Введение

В прошлой статье я уже рассказал о том, как установить Tag Manager на свой сайт, и как с его помощью можно настроить Google Analytics. Однако, после всех манипуляций может возникнуть вопрос относительно того, а что же нам делать с событиями, которые мы устанавливали на сайте, когда использовали Google Analytics. На самом деле, тут все просто и сложно одновременно. С одной стороны, события будут отслеживаться при помощи нового кода Tag Manager, однако, правильнее заменить их и начать использовать события, которые есть в Google Tag Manager.

Все просто, скажете вы, – прочитали мануал и вперед. Как говорится, не тут-то было. Мануалов по Tag Manager, собственно как и по Google Universe, фактически нет. Так что приходится по крупицам собирать полезные сведения на просторах интернета и действовать путем проб и ошибок. Но довольно лирики, приступим к делу.

Собственно для всех экспериментов нам понадобится следующие вещи:

1. Браузер «Хром» (тут мы будем использовать консоль JavaScript Ctrl + Shift + J)

2. GA Debugger

3. Tag Assistant

4. Notepad++

Ну что же, давайте для начала вспомним, как же у нас происходит отслеживание событий в Google Analytics.

Архитектура события Google Analytics

Для отслеживания событий в Google Analytics используется следующая функция:

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

category (Обязательный атрибут)

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

action (Обязательный атрибут)

Действие, связанное с категорией, которое отслеживаем. Обязательный параметр.

label (Необязательный атрибут)

Ярлык, который позволяет получить более детальную информацию о событии. Необязательный параметр.

value (Необязательный атрибут)

Передаем некий числовой (integer) параметр, который предоставляет более детальную информацию о действии. Например, скорость загрузки ролика, или досмотрел пользователь ролик до конца рекламного сета или нет.

non-interaction (Необязательный атрибут)

Опция, которая позволяет не учитывать событие в расчете показателя отказов (для этого устанавливается значение true). По умолчанию имеет значение false. Необязательный параметр.

Пример события <a href=»#» onClick=»_gaq.push(['_trackEvent', 'error-message', 'error-avia', '%текст сообщения об ошибке%', '', true]);»>Play</a>

Есть вариант _gaq.push(['_trackEvent', 'Videos', 'Video Load Time', 'Gone With the Wind', downloadTime, 'true']); – где downloadTime будет передаваться информация о скорости загрузки ролика. Корректность этого варианта уточняю.

А вот события, которые не вызывают смену страницы, необходимо метить следующим образом: onclick=»_gaq.push(['_trackEvent', '***', '<?=$_SERVER['REQUEST_URI'];?>’])

Как говорится, все можно усложнить, ну, или упростить. Все дело в том, что мы можем развести JavaScript и разметку HTML посредством создания скрипта, который мы разместим к <head> нашей страницы. Для этого мы будем использовать библиотеку JQuery , которая по умолчанию стоит на большинстве сайтов.

В результате манипуляций получим следующий код:

$(function () {
$(‘#targetLink’).click(function () {
_gaq. push (['_trackEvent', 'Category', 'Action', 'Label'])
; })
; });

Если JQuery не установлен, тогда есть следующее решение, которое предлагает Google.

Основываясь на коде, представленном выше, получаем следующий код:

function addListener(element, type, callback) {
if (element.addEventListener) element.addEventListener(type, callback);
else if (element.attachEvent) element.attachEvent(‘on’ + type, callback);
}
var mylink = document.getElementById(‘targetLink’);
addListener(mylink, ‘click’, function() {
_gaq.push(['_trackEvent', 'Category', 'Event', 'Label']);
});

Теперь поговорим о Google Tag Manager.

Настройка отслеживания событий в Google Tag Manager

Простой способ

Для того чтобы настроить событие, нам нужно зайти в уже созданный аккаунт GTM в контейнер Google Analytics. Далее выбираем «Дополнительные настройки» – «Расширенная конфигурация».

Ставим галочку напротив «Имя трекера». Данная манипуляция позволит вам получить доступ к Google Analytics Tracker, объектам из внешних скриптов.

Временно об этом забыли и идем создавать новый произвольный тег HTML со следующим содержимым:

<script type=»text/javascript»>
$(function () {
$(‘#targetLink’).click(function () {
_gaq. push (['_trackEvent', 'Category', 'Action', 'Label']);
});
});
</script>

Далее применяем правило активации тега на всех страницах сайта и сохраняем тег. Далее создаем новую версию контейнера и публикуем ее.

Правильный способ

Теперь давайте рассмотрим второй вариант отслеживания событий при помощи Google Tag Manager, который позволит нам использовать все возможности GTM по полной!

Если вы уже пошли по первому пути, то откатите изменения до первоначальной версии. Для этого идем в «Версии» – «Общие сведения», выбираем предшествующую версию и нажимаем «Восстановить». Убираем флажок и восстанавливаем:

Создание макросов событий в GTM

Макрос в GTM – место, где вы можете хранить различные значения. Макрос может захватывать и сохранять значения, поступающие из различных источников: cookie, referrer, URL, и т. д. При этом самым важным источником данных для макроса служит data layer (слой данных). Де факто любые сочетания data layer могут быть сохранены в макросах.

Так как из-за использования GTM в Google Analytics трекер объекта становится затруднительным (лечение мы придумывали в начале статьи), нам нужно научить передавать данные события, толкать Google Analytics в data layer, а затем отправить эти данные в Google Analytics с помощью макросов. Скажу честно, на первый взгляд это кажется сумасшествием, но что делать =)

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

Приступим. Нажимаем на кнопку «Новый макрос».

В новом окне называем макрос и выбираем «Переменная уровня данных»:

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

  • Macro Name: Event Category -> Переменная уровня данных: eventCategory
  • Macro Name: Event Action -> Переменная уровня данных: eventAction
  • Macro Name: Event Label -> Переменная уровня данных: eventLabel
  • Macro Name: Event Value -> Переменная уровня данных: eventValue
  • Macro Name: Event Interaction -> Переменная уровня данных: eventInteraction

Замечательно, основные переменные мы «замапили». Это означает, что как только вы опубликуете версию контейнера с данными макросами, каждый раз, когда будет передаваться значение одной из переменных в слой данных, вы сразу сможете передать значение данной переменной в GTM или в правило при помощи синтаксиса {{Variable Name}}.

Создание тега Google Analytics для отслеживания событий

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

Обратите внимание, что пока у данного тега нет правила. Его нужно создать отдельно.

В GTM каждый раз, когда нам нужно будет отследить взаимодействие пользователя с элементами сайта (кнопки, ссылки и т.д.), нам придется создавать слой данных переменной события. При этом они не имеют никакого отношения к событиям Google Analytics.

Единственное, что нужно помнить: каждый раз, когда вы хотите отслеживать взаимодействие пользователя с элементом страницы, необходимо создать правило, которое срабатывает на основе значения переменной события – слоя данных. Наше правило будет срабатывать в случае, когда значение события «слой данных» установлен в GAevent.

Правило выглядит следующим образом:

Ну вот, мы практически закончили работу. Теперь нам нужно связать функцию со ссылкой или кнопкой, которую мы хотим отслеживать. Функция будет передавать соответствующие данные в слои данных и инициировать событие Google Analytics Tracking Tag.

В результате мы получим следующую конструкцию на нашей ссылке (ну, или кнопке):

<a id=»targetLink» href=»#» onlick=»dataLayer.push({‘event’:'GAevent’, ‘eventCategory’:'Category’, ‘eventAction’:'Action’, ‘eventLabel’:'Label’})»>Click here </a>

Вы, наверное, догадались, что вместо Category, Action и Label нужно подставить наши значения, которыми мы метили ссылки в GA. Данная конструкция будет работать, но мы можем немного схитрить.

Для этого создадим пользовательский контейнер HTML, в который закинем следующий код:

<script type=»text/javascript»>
$(document).ready(function(){
$(‘#targetLink’).click(function(){
dataLayer.push({
‘event’:'GAevent’,
‘eventCategory’:'My Category’,
‘eventAction’:'My Action’,
‘eventLabel’:'My Label’
})
});
});
</script>

Далее применяем данному тегу правило работать на всех страницах.

А вот теперь внимание. Есть одна маленькая хитрость. Как вы можете увидеть в примере выше, у нашей ссылки есть уникальный id targetLink. Такой же id должен быть и в нашем контейнере $(‘#targetLink’). Фактически происходит следующая интересная штука. В том случае, когда на сайте происходит загрузка элемента взаимодействия с данным id, GTM сам добавляет этому элементу необходимые атрибуты. В результате нам вообще не нужны программисты, и не нужно их просить что-либо подставлять в кнопки, разве что уникальные id, которые они иногда забывают проставлять.

Собственно, в это же событие можно запихнуть и идентификатор самой метрики, например, на сабминт:

<script type=»text/javascript»>
$(document).ready(function(){
$(‘#services_form’).submit(function(){
yaCounter********.reachGoal(‘********’);
return true;
});
$(‘#send_message’).click(function(){
dataLayer.push({
‘event’:'GAevent’,
‘eventCategory’:'button’,
‘eventAction’:'send’
})
});
});
</script>

Всем спасибо за внимание и удачи!

Источник: www.searchengines.ru

Поделиться в соц. сетях

Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Одноклассники
Опубликовать в Яндекс
Опубликовать в Мой Мир

Рекомендуем ещё