понедельник, 19 января 2015 г.

Отслеживание событий в Universal Analytics



Я уже писал о том как настроить отслеживание событий в Google Analytycs около года назад. Но после обновления Google Analytycs до Universal Analytics старая статья стала не актуальна.

Для тех кто использует Universal Analytics несколько примеров настройки отслеживания событий.

Небольшое вступление

Для тех кто не понимает о чем речь, система web аналитики Google Analytycs позволяет отслеживать разнообразные события на вашем сайте, а также использовать эти события для отслеживания конверсии.

Рассмотрим два примера:

  • Отслеживание нажатия на кнопку,
  • Отсылка формы.

Прежде всего мы должны сообщить Google Analytycs о происходящем событии для этого в Universal Analytics используется функция: ga

ga('send', 'event', 'Category', 'Action', 'Label', Value)

category — название категории события (обычно страница или элемент страницы с которым происходит событие), например: форма обратной связи, корзина т.д.

аction — название события, примеры: продолжить покупки, оформить заказ, купить, скачать и.д.

labal — (не обязательное поле) метка события для удобство навигации в отчетах Google Analytycs. Удобно при большом количестве отслеживаемых событий.

value — (не обязательное поле) положительное цифровое значение.


Отслеживание нажатия на кнопку на примере кнопки "Купить"

Прежде всего добавим к нашей кнопке "купить" событие onclick, и по этому событию будем отправлять данные для GA

Для этого добавим в тег активного элемента строку:
onclick="ga('send', 'event', 'Страница Товара', 'Купить')"

Пример кода:



Таким образом вы сможете увидеть статистику по этому событию в отчете Google Analytycs "События"
Поведение - События - Обзор


Если вы хотите отслеживать это событие как цель в Google Analytycs
  1. Зайдите в раздел "Администратор"
  2. Выберите меню "Цели"
  3. Нажмите на кнопку "+ Цель"


 Если у вас нет таких меню или не активна кнопка, значит у вашего пользователя не достаточно прав для создания целей в этом профиле Google Analytycs. Обратитесь к тем кто настраивал вам GA.

Пример заполнения формы при создании новой цели:



Если вы все сделаете правильно, с этого момента вы начнете отслеживать конверсию по заданной цели.


Отслеживание отправки данных формы на сайте


По сути отслеживание формы не сильно отличается от отслеживания нажатия на кнопку. Все что нам нужно, это использовать функцию onsubmit вместо onclick.

Пример кода:



Настройка отслеживание событий с формой как целевого действия производиться аналогично кнопке "купить". (Описано выше после строки "Если вы хотите отслеживать это событие как цель в Google Analytycs").

Итог

Этих примеров достаточно чтобы отслеживать наиболее популярные события такие как:
  • Отправка формы обратного звонка,
  • Кнопка "Купить",
  • Онлайн заявка,
  • Регистрация,

А если вы используете старый код Google Analytycs загляните сюда.

Автор: Артем на 14:53
Ярлыки: ,

33 комментария:

  1. Unknown20 января 2015 г. в 12:20

    Добрый день. Отличная статья, спасибо автору. Подскажите пожалуйста, как сделать чтобы каждые 30 секунд если страница не закрыта, то посылается эвент?

    ОтветитьУдалить
    Ответы
    1. Артем21 января 2015 г. в 16:36

      По идее должно срабатывать что-то вроде этого:

      var count = 0;
      setInterval(function(){
      ga('send', 'event', 'time', 'tracking', 'seconds', count);
      }, 30000);

      Но я не силен в JS , надо будет уточнить этот вопрос и написать статейку с готовым решением.

      Удалить
    2. Unknown22 января 2015 г. в 09:15

      Спасибо, будем ждать!

      Удалить
  2. Unknown20 марта 2015 г. в 13:14

    Этот комментарий был удален автором.

    ОтветитьУдалить
  3. Unknown15 мая 2015 г. в 23:27

    Бьюсь целый день с настройкой события отправки формы, но оно не регистрируется. В чем моя ошибка?:
    form id="contact-form" onsubmit="ga('send', 'event', 'Форма', 'Свяжитесь со мной');" >
    input placeholder="Как Вас зовут?" type="text" id="comment_author" name="comment_author" />
    input placeholder="Ваш email (Спам слать не будем!)" id="comment_author_email" type="email" name="comment_author_email" />
    input placeholder="Контактный телефон или Skype" type="text" id="comment_content" name="comment_content" />
    input id="ss-send" onclick="valid(this);return false;" type="submit" value="Свяжитесь со мной">
    input type="hidden" name="form_id" value="42">
    /form>

    ОтветитьУдалить
    Ответы
    1. Артем16 мая 2015 г. в 19:58

      Должно работать, посмотрите не в конверсиях, а в отчете события. Вы все прописали корректно.

      Удалить
  4. Unknown19 мая 2015 г. в 22:25


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

    onsubmit="ga('send', 'event', 'Button', 'Book you event')"
    или
    on_sent_ok:"ga('send', 'event', 'Button', 'Book you event');" (данный код советует ворпресовская инструкция)

    ОтветитьУдалить
  5. Артем20 мая 2015 г. в 12:36

    onsubmit="ga('send', 'event', 'Button', 'Book you event')" должно работать

    ОтветитьУдалить
  6. Unknown24 июня 2015 г. в 14:35

    Этот комментарий был удален автором.

    ОтветитьУдалить
    Ответы
    1. Unknown24 июня 2015 г. в 14:35

      Этот комментарий был удален автором.

      Удалить
    2. Unknown24 июня 2015 г. в 14:36

      Этот комментарий был удален автором.

      Удалить
    3. Unknown24 июня 2015 г. в 14:37

      Этот комментарий был удален автором.

      Удалить
  7. Unknown24 июня 2015 г. в 14:38

    Здравствуйте! подскажите стоит задача встроить цели-события и от аналитики и от яндекса, сделал такой код , два онклика добавить нельзя второго не видит и скорость загрузки станицы падает, все в одном , будет работать ? как проверить?
    input class="submit_button button button_apply js-telefon" onclick="_gaq.push(['_trackEvent', 'submit_button', 'Zakazat_zvonok']); yaCounter30687653.reachGoal2('submit_button'); return true;" name="submit" type="submit" value="Відправити">

    ОтветитьУдалить
  8. Артем24 июня 2015 г. в 14:47

    По идее можете, посмотрите в примере
    http://stackoverflow.com/questions/2881307/can-i-have-two-javascript-onclick-events-in-one-element#2881307

    ОтветитьУдалить
  9. Unknown24 июня 2015 г. в 15:12

    какой то способ проверки работоспособности вставленого сайт кода есть ? статистика пуста пока.

    ОтветитьУдалить
    Ответы
    1. Артем24 июня 2015 г. в 15:25

      Да, посмотрите отчет события, если все настроено корректно то данные должна появиться в этом отчете.

      Удалить
  10. Unknown24 июня 2015 г. в 21:07

    Спасибо за ответы. как посмотреть отчет событий в хроме? на аналитикс пока нечего не вижу. http://edu-vienna.com.ua/ -- сайт о котором идет речь. там нажимаешь заказать звонок с права и перед тобой окно появляется, и кнопку заказать вставлен код можно посмотреть через "проверить элемент .

    ОтветитьУдалить
  11. Anton Fill25 июня 2015 г. в 15:30

    Ким, попробуйте использовать другой способ отслеживания событий (так как у Вас analytics.js - https://developers.google.com/analytics/devguides/collection/analyticsjs/events?hl=ru)

    // jQuery
    $('#button').on('click', function() {
    ga('send', 'event', 'button', 'click', 'nav-buttons');
    });

    ОтветитьУдалить
  12. Unknown25 июня 2015 г. в 17:01

    Спасибо за ответ. но все равно не работает!!! в режиме реаного времени включаю аналитику и вставляю код по вашим рекомендациям и все рано ничего.
    Вот код 2 варианта написаны разными способами:
    var callButton = document.getElementById("submit_button button button_apply js-telefon");
    callButton.onclick = (function() {
    _gaq.push(['_trackEvent', 'submit_button', 'Zakazat_zvonok']);
    })();


    // Using jQuery Event API v1.3
    $('#submit_button button button_apply js-telefon').on('click', function() {
    ga('_trackEvent', 'submit_button', 'Zakazat_zvonok');
    });
    Можете меня где то поправить или помочь разобратся? у меня варианты исчерпались.

    ОтветитьУдалить
    Ответы
    1. Артем25 июня 2015 г. в 17:27

      Вы используете Universal Analytics
      _gaq.push — это для версии Classic Analytics

      Используйте
      ga('send', 'event', 'submit_button', 'Zakazat_zvonok');

      Удалить
  13. Unknown25 июня 2015 г. в 19:08

    Этот комментарий был удален автором.

    ОтветитьУдалить
  14. Unknown25 июня 2015 г. в 19:10

    Этот комментарий был удален автором.

    ОтветитьУдалить
  15. Unknown25 июня 2015 г. в 19:11

    Этот комментарий был удален автором.

    ОтветитьУдалить
  16. Anton Fill26 июня 2015 г. в 10:23

    var callButton = document.getElementById("submit_button button button_apply js-telefon");
    Это явно не сработает :) Вы хотите выбрать элемент по айдишнику (ID), а у Вас класс :) Используйте jQuery:
    $(".submit_button").on("click", function() {
    ga('send', 'event', 'submit_button', 'Zakazat_zvonok');
    });

    Типа того :)

    ОтветитьУдалить
  17. Анатолий6 сентября 2015 г. в 21:26

    А как видео с You Tube Отслеживать ?

    ОтветитьУдалить
    Ответы
    1. Артем7 сентября 2015 г. в 16:38

      Вот отличный гайд по вашему вопросу https://goo.gl/avLuEy

      Удалить
  18. reds26 ноября 2015 г. в 21:10

    Подскажите, почему событие не срабатывает на кнопке подписки Youtube, вот тут - генератор кода, а здесь готовый вариант:


    function onYtEvent(payload) {
    if (payload.eventType == 'subscribe') {
    // Add code to handle subscribe event.
    ga('send', 'event', 'button2', 'click', 'Show the phone number');
    } else if (payload.eventType == 'unsubscribe') {
    // Add code to handle unsubscribe event.
    }
    if (window.console) { // for debugging only
    window.console.log('YT event: ', payload);
    }
    }

    ОтветитьУдалить
    Ответы
    1. Артем27 ноября 2015 г. в 14:14

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

      Удалить
  19. Korolesova25 июля 2016 г. в 12:25

    Здравствуйте. Подскажите какой код нужен для отслеживания на сайте компании-перевозчика активность зарегистрированных в системе компаний.

    ОтветитьУдалить
    Ответы
    1. Артем25 июля 2016 г. в 12:34

      Смотря какую активность вы хотите отслеживать. Это можно делать в рамках одного кода аналитики просто создать представление с фильтрами.

      Удалить
  20. Korolesova25 июля 2016 г. в 14:53

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

    ОтветитьУдалить

Подписаться на: Комментарии к сообщению (Atom)