понедельник, 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 загляните сюда.

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

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

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

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

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

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

    ОтветитьУдалить
  3. Бьюсь целый день с настройкой события отправки формы, но оно не регистрируется. В чем моя ошибка?:
    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. Должно работать, посмотрите не в конверсиях, а в отчете события. Вы все прописали корректно.

      Удалить

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

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

    ОтветитьУдалить
  5. onsubmit="ga('send', 'event', 'Button', 'Book you event')" должно работать

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

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

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

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

      Удалить
  7. Здравствуйте! подскажите стоит задача встроить цели-события и от аналитики и от яндекса, сделал такой код , два онклика добавить нельзя второго не видит и скорость загрузки станицы падает, все в одном , будет работать ? как проверить?
    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. По идее можете, посмотрите в примере
    http://stackoverflow.com/questions/2881307/can-i-have-two-javascript-onclick-events-in-one-element#2881307

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

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

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

    ОтветитьУдалить
  11. Ким, попробуйте использовать другой способ отслеживания событий (так как у Вас 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. Спасибо за ответ. но все равно не работает!!! в режиме реаного времени включаю аналитику и вставляю код по вашим рекомендациям и все рано ничего.
    Вот код 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. Вы используете Universal Analytics
      _gaq.push — это для версии Classic Analytics

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

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

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

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

    ОтветитьУдалить
  16. 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. А как видео с You Tube Отслеживать ?

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

      Удалить
  18. Подскажите, почему событие не срабатывает на кнопке подписки 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. Код вроде правильный, может у вас проверка не срабатывает. Или поставьте проверенным способом на сам блок по которому идет клик. А не через проверку.

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

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

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

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