How to Track Button Clicks in Google Analytics Using Google Tag Manager

There are situations when you have to know how many website visitors click to the button on the online store. This need appears when you are testing new webdesign elements or when you are tracking the website convertions. Google Tag Manager gives you the chance to make settings and count all button clicks just in few steps. You don't need to know how to code and being a developer to make such changes in the internet store. 

About Google Tag Manager in a Nutshell

Google Tag Manager — a great tool for SEO and marketing specilists. GTM (Google Tag Manager) has an impressive functionality and this service is absolutely free. 

You can use GTM to create Google Analytics, Ads, or any thir-party tags, and specify when they could fire. This simplified and speeds up the process of tag deployment. 

GTM makes you less reliant on PHP developers for small marketing changes. 

GTM interface is simple and user-friendly. It was eveloped specially for the non-developers, but for the people who are far from the coding. 

With GTM you can easily set up tracking any event of the website to better understand how often store visitors click to the button Buy in 1 click or Compare.  

As the main part of our work is a work under CS-Cart stores, we take this CMS as example. 

How to track click to button "Buy in 1 click"

In case you haven't set up Google Tag Manager account yet and you haven't tied accounts in GTM and Google Analytics, please follow the links to the manual. 

Usually the main challenge of the website event tracking is in the button identificators. You need to understand what is the unique button attribute to follow it. 

Right click on the button "Buy in 1 click" to see the web page code. Choose the english word "Inspect" or the Developer's tools. There is a shortcut keys Shift+Ctrl+I (Show or hide the developer's dashboard in browser) you can use too. 

As you open the developer's side you can find the class of the button Buy in 1 click. 

We see that the "Buy in 1 click" button class — "cm-dialog-opener cm-dialog-auto-size ty-btn ty-cr-product-button cm-dialog-destroy-on-close".

Please remember that CS-Cart platform is under the review here. 

Thus to set up clicks tracking you need to go to Google Tag Manager and create new trigger for the "hearing" the event then new tag where the trigger determes when those tags should fire or collect data. 

In Google Tag Manager, trigger listens to your web page or mobile app for certain types of events like form submissions, button clicks, or page views. The trigger tells the tag to fire when the specified event is detected.

Create the trigger in Google Tag Manager

Let's name our trigger "Clicks to Buy in 1 click button".

• Trigger type - Click - All elements
• The conditions of trigger activations - Some clicks.
• Click classes contains cm-dialog-opener cm-dialog-auto-size ty-btn ty-cr-product-button cm-dialog-destroy-on-close. (This is the "Buy in 1 click" button class that we have learned before).

Create a new tag

As soon as we created the trigger, we need to create a new tag where the trigger is used. 

Настройки нового тэга "UA-Нажатие на кнопку Купить в 1 клик" смотрите на скриншоте выше. Мы обычно указываем в названиях тэга для какой системы аналитики создан тэг. Здесь мы указали UA (Universal Analytics), что подсказывает менеджеру в Tag Manager, что данный тэг сделан для Google счетчика, а не для Яндекс системы. 

Далее, мы поставили такие настройки:

• Тип отслеживания — Событие
• Категория — Button
• Действие — Click

Далее в настройках тэга в Google Tag Manager указываем переменную Google Analytics, которую создавали ранее, когда связывали аккаунты Tag Manager и Google Analytics. 

И добавляем ранее созданный триггер "Нажатие на кнопку Купить в 1 клик"

Обратите внимание, что после того, как настроен тэг на отслеживание кликов по кнопке, нужно создать соответствующую цель в Google Analytics аккаунте. При настройке цели в Аналитике Гугл нужно выбрать отслеживание события и указывать те настройки, которые указали в тэге в Google Tag Manager. 

Чтобы проверить правильность настройки тэга на отслеживание события, вы должны перейти к "Предварительному просмотру" и проверить изменения с помощью Tag Assistance.

 Не забудьте отключить все блокировщики рекламы в браузере. Если этого не сделать, то Tag Assistance не сможет подсоединиться к сайту. 

Вы запустили режим предварительного просмотра. Запустили сайт. 

• Tags Fired — это тэги, которые сработали на сайте, т.е. сработал триггер для запуска этого тэга.
• Tags Not Fired — это тэги, которые еще не запущены, так как еще не сработал триггер. Как только вы кликните по кнопке Купить в 1 клик, то тэг "UA-Нажатие на кнопку Купить в 1 клик" перейдет в раздел Tags Fired. Это будет значить, что тэг успешно настроен и отлично работает. Теперь можно переходить к публикации изменений в Tag Manager и сохранять изменения. Как только вы опубликуете контейнер с изменениями, настроите цель на клик в Google Analytics, то увидите результаты в Google Analytics отчетах реального времени и  в конверсиях. 

Если вы все сделали верно, то уже на следующий день будете видеть в Google Analytics, сколько кликов было совершено на кнопку Купить в 1 клик  в интернет-магазине на CS-Cart платформе.

Если вам нужно настроить цели в Tag Manager, то мы с удовольствием поможем.

Напишите нам