Создание и отправка событий при клике на кнопку Google Analytics

Создание и отправка событий при клике на кнопку Google Analytics

Часто для отслеживания разных действий на сайте, к примеру клик на кнопку или скачивание прайса, нужно создавать и отправлять событе при клике в Google Analytics или Universal Analytics. Рассмотрим коды отправки событий, из чего они формируются и как отличаются для каждой версии аналитики.

Чтобы определить какия версия аналитикса у вас, посмотрите код страницы вашего сайта. Если в коде аналитики подключается файл ga.js то это Google Analytics (старый код), если analytics.js - то это Universal Analytics (новый код аналитики).

Код отправки события для Google Analytics

Сама функция, которую мы вызываем при срабатывании события чтобы отправить информацию о нем в Google Analytics отслеживания выглядит так:

_gaq.push(['_trackEvent', 'category', 'action', 'opt_label', 'opt_value', 'opt_noninteraction']);

Как видно, код содержит в себе несколько параметров, некоторые из них нужно указывать обязательно - это category и action, остальные можно не указывать, но для того чтобы в самом аналитиксе событие выглядело понятнее, лучше их тоже прописывать.

  • category (обязательный) - это то, чем является наш отслеживаемый обьект (к примеру это может быть 'button' или 'link');
  • action (обязательный) - это действие, которое пользователь делает с этим обьектом. Чаще всего это 'click', также может быть 'load';
  • label (необязательный) - это категория (группа), к которой относится наш отслеживаемый обьект (к примеру 'navigation buttons');
  • value (необязательный) - число, соответствующее этому событию, к примеру '4 times';
  • non-interaction (необязательный) - может принимать значение true или false. Если передается true, то это событие не будет учитываться при вычислении bounce rate.

На практике, код для отслеживания клика на кнопку "Показать телефон" может выглядеть так:

<a href="..." class="button" onclick="_gaq.push(['_trackEvent', 'button', 'click', 'Show the phone number']);">Показать телефон</a>

или, более продвинутый вариант без явного навешивания onclick на саму кнопку:

<script>

    var callButton = document.getElementById("button1");
    callButton.onclick = (function () {
        _gaq.push(['_trackEvent', 'button', 'click', 'call-button1']);
    })();

</script>

При этом у самой кнопки должен быть id="button1".

Код отправки события для Universal Analytics

Для Universal Analytics код функции отслеживания события будет выглядеть так:

ga('send', 'event', 'button', 'click', 'hiding buttons', 4);

где:

  • button - это наш обьект над которым произвели действие;
  • click - это само действие;
  • hiding buttons - группа к которой относится обьект (в нашем случае это кнопка, которая скрывает номер телефона);
  • 4 - числовое значение.

'event', 'button', 'click' - обязательные параметры, остальные - нет. Если не хотите чтобы событие влияло на bounce rate, тогда добавляем пару ключ:значение 'nonInteraction': 1 так:

ga('send', 'event', 'category', 'action', { 'nonInteraction': 1 });

Также для наглядности и ясности можно все параметры передавать через пары ключ:значение:

ga('send', {
    'hitType': 'event',
    'eventCategory': 'button',
    'eventAction': 'click',
    'eventLabel': 'hiding buttons',
    'eventValue': 4
});

На практике код для отправки события при клике на кнопку в Universal Analytics может выглядеть так:

<a href="..." class="button" onclick="ga('send', 'event', 'button', 'click', 'Show the phone number');">Показать телефон</a>

Или, более мастерски, если убрать вызов кода отслеживание из самой кнопки:

<a href="..." class="button" id="show-phone-button">Показать телефон</a>

Тогда после самого скрипта Universal Analytics нужно будет прописать следующее:

var phoneButton = document.getElementById('show-phone-button');
addListener(phoneButton, 'click', function () {
    ga('send', 'event', 'button', 'click', 'Show the phone number');
});

/* Utility to wrap the different behaviors between W3C-compliant browsers and IE when adding event handlers. */
function addListener (element, type, callback) {
    if (element.addEventListener) element.addEventListener(type, callback);
    else if (element.attachEvent) element.attachEvent('on' + type, callback);
}

Для проверки работы кода отправки события нужно:

  1. Кликнуть по кнопке на которую установлено событие (заставить его сработать).
  2. Зайти в https://analytics.google.com/.
  3. Слева в меню выбрать Real-Time (В режиме реального времени).
  4. Слева в подменю выбрать Events (События) и посмотреть отобразилось ли недавно сработавшее событие.