Pages Menu Stijit.com
Twitter
Categories Menu
Создание и отправка событий при клике на кнопку 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. Зайти в Google Analytics
  3. Слева в меню выбрать Real-Time (В режиме реального времени)
  4. Слева в подменю выбрать Events (События) и посмотреть отобразилось ли недавно сработавшее событие

15 Коммент.

  1. Вот спасибо, только тут нашел внятно расжевано. А то использовал ga.js ранее и там иначе было, а на сайте гуглов тоже весьма размыто написано как в новом коде реализовать это.

  2. Спасибо! после огромной справки гугла по юниверсалу, ваши два абзаца просто ответили на все вопросы.

  3. Здравствуйте, я начинающий, и пытаюсь отслеживать события. Я использую Universal Analytics. Как я понял, нужно, во-первых, добавить строчку в код отслеживания. Я использую WordPress и в файл header.php добавил одну строчку к имевшемуся коду (предпоследнюю)

      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-********-1', 'auto');
      ga('require', 'linkid', 'linkid.js');
      ga('require', 'displayfeatures');
      ga('send', 'pageview');
      ga('send', 'event', 'category', 'action', 'opt_label', opt_value, {'nonInteraction': 1});
    

    Во-вторых, нужно на конкретной странице изменить код. Например, у меня есть ссылка

    <a href="#footnote1" rel="nofollow">[1]</a>

    Я вместо нее пробую

    <a href="#footnote1" rel="nofollow">[1]</a>

    К сожалению, не работает. Не подскажите, что сделал не так?
    Спасибо

    • Вам не нужно добавлять код для вызова события в сам код аналитики — уберите предпоследнюю строку которую вы добавили:

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

      Вместо этого, нужно прописать код отправки события в самой ссылке — к примеру:

      <a href="#footnote1" onclick="ga('send', 'event', 'link', 'click', 'Footnote link', {'nonInteraction': 1});" rel="nofollow">[1]</a>
  4. Добрый вечер, у меня похожий вопрос. Первый раз подобные «события» добавляю. Прописал в кнопке функцию ga на onclick — вообще не реагирует кнопка ни на что. В хэдере глянул — универсал стоит. Наверно надо повесить листенер теперь? А то я про него недопонял :) спасибо!

    • Если вы повесили не кнопку onclick, то добавлять listener не нужно. Он добавляется только если у вы не хотите использовать onclick на кнопке. Проверьте еще раз все ли правильно прописано на кнопке, также посмотрите правильно ли работает сам код Universal Analytics (отображает ли он что вы зашли на сайт в режиме реального времени).

  5. Добрый вечер.
    Вроде-бы настроил все как нужно, но Аналитикс в режиме реального времени, после клика на элемент не отображает произошедшего события.
    Посмотрите, пожалуйста, все ли правильно настроено?
    Сайт — vse-skidki.com.ua.
    Событие стоит на клик по скриншоту магазина, по кнопке «Перейти на сайт», и по заголовку скидки.
    Спасибо!

    • Ан-нет, все работает как нужно. Извините)

  6. Добрый день! добавил событие следующим образом:

    $("#measure-request input[type='button']").on('click',function(){
    	ga('send', 'event', 'button_measure-request', 'click');	
    });

    Но код не сработал. Возможно я чтото не так сделал?

    • Возможно у вас не работает селектор элемента $("#measure-request input[type='button']"). Также убедитесь что вы правильно проверяете работоспособность кода события в аналитике — событие должно появится в Google Analytics -> Real-Time (В режиме реального времени) -> Events (События)

  7. Здравствуйте! У меня analytics.js, ваш код с ссылкой работает, но никак не могу повесить событие на кнопку подписки ютуб — https://developers.google.com/youtube/youtube_subscribe_button

    Там есть галочка «Мое приложение отслеживает…», если туда (вместо // Add code to handle subscribe event.) вставить ga('send', 'event', 'category', 'action', 'opt_label', opt_value, {'nonInteraction': 1}); и нажать кнопку, то ничего не происходит, может как-то не так запускаю код?

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

      <div class="g-ytsubscribe" data-channel="GoogleDevelopers" data-layout="default" data-count="default" data-onytevent="onYtEvent" onclick="ga('send', 'event', 'button', 'click', 'Youtube subscription', {'nonInteraction': 1});"></div>
  8. Уважаемый. У меня вот такой вопрос:
    В режиме реального времени мой код работает и учитывается.
    Но не показывается в отчете.
    Что я делаю не так?

  9. такой вопрос по файлу analytics.js
    Могу ли я его не подгружать а хранить у себя для более быстрой згрузки сайта и как это будет влиять на статистику.
    Так же интересует что будет если я его закэширую как это повлияет на статистику.

    Спасибо за ответ

    • Думаю файл analytics.js лучше не кешировать и не хранить у себя, т.к. Google может выпускать обновления для аналитики и вы их в таком случае просто не увидите. Кроме того, подгрузка этого файла с серверов google не должна особо тормозить ваш сайт.

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *