Аналитика

Google Tag Manager

GTM: многообразие решаемых задач и особенности работы для начинающих

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

                                         

Одной из основных глобальных задач, которую позволяет решить или частично решить GTM - это централизованное управление всеми установленными кодами счетчиков (Google.Analytics, Яндекс.Метрика, CPA, Social) на сайте. К тому же, GTM позволяет сократить время внедрения и последующего управления этими счетчиками.

Если у вас, если у вас, если у вас программиста нет…

Бывают ситуации, когда совсем нет возможности установить какие-то сложные коды на сайт. Допустим, удалось установить на сайт код GTM. И теперь нам необходимо отслеживать клики на различные кнопки и ссылки.

GTM предоставляет возможность отслеживать клики почти по любому элементу страниц сайта. На эту тему написано большое количество статей. Я приведу лишь небольшой пример.

Допустим, у нас есть ссылка “Посмотреть все характеристики” (рис. 1) и мы хотим отслеживать клики по данной ссылке и отправлять в Google.Analytics “событие” (event).

Рисунок 1. Пример отслеживаемой ссылки

Данная ссылка имеет следующий html-код (рис. 2):

Рисунок 2. Html-код отслеживаемой ссылки

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

  1. наличие в url ссылки параметра “show=properties”
  2. наличие css-класса “link”

Теперь в GTM мы настраиваем тег отправки “события” в Google.Anlytics. Создаваемый приведен для примера. Мы рекомендуем использовать в тегах переменные из dataLayer.push. Создаем новый тег Google.Analytics и заполняем всю необходимую информацию (рис. 3).

Рисунок 3. Ввод передаваемой информации в Google.Analytics


Нажимаем кнопочку “Далее” и переходим к самому главному - настройке правила активации нашего тега.

Так как мы отслеживаем “клики”, то выбираем тип правила “Клик” (рис. 4):


Рисунок 4. Выбираем тип правила “Клик”

Исходя из html-кода элемента, мы отслеживаем клик по ссылке, следовательно, в выпадающем меню выбираем “Только ссылки” и нажимаем кнопку “Далее” (рис. 5):

Рисунок 5. Выбираем тип отслеживаемых элементов (только ссылки)

Чтобы наш тег срабатывал только в карточках товаров, мы задаем ограничение в виде URL страниц, на которых он должен срабатывать. В нашем случае, карточки товара имеют в URL такую конструкицю “/cat/detail/”. Эти данные мы укажем в фильтре и нажмем “Далее” (рис. 6):

Рисунок 6. Задаем на каких страницах должен срабатывать тег

Теперь система спрашивает хотим ли мы отслеживать все подряд ссылки или только какой-то определенный набор? Нам необходимо отследить только определенные ссылки, поэтому мы выбираем пункт “Некоторые клики” (рис. 7).

Рисунок 7. Выбираем пункт “Некоторые клики”

Теперь настало время указать отличительные признаки наших ссылок (мы выявили их чуть ранее) (рис. 8). В левом выпадающем меню выбираем какой признак мы хотим указать (например class элемента - это пункт “element classes”) и указываем условие.


Рисунок 8. Указываем отличительные признаки наших ссылок

Далее просто сохраняем триггер (обязательно назовите его так, чтобы потом было понятно когда он срабатывает). Сохраняем тег, проверяем работу тега в “режиме предварительного просмотра” и публикуем контейнер.

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


Более сложные случаи

Однако, часто бывает так, что необходимо решить более сложные задачи или автоматизировать какой-то процесс передачи исходных данных с сайта в GTM.

Допустим, у нас есть сайт с игрой. Нам необходимо отслеживать нажатия пользователей на различные элементы интерфейса (рис. 9).


Рисунок 9. Пример сайта с игрой

Мы можем постараться решить поставленную перед нами задачу с помощью функционала, описанного выше. Однако, если на проекте большое количество отслеживаемых элементов и верстка сайта меняется постоянно, нам этот вариант не подойдет.

В качестве выхода мы можем воспользоваться более “программным решением”, а именно, принудительно передавать в GTM всю необходимую информацию.

Для передачи информации с сайта в GTM используется объект dataLayer. Именно в нем Google Tag Manager хранит все, что ему может пригодиться. А почему мы бы и нам туда не складировать необходимую информацию?

В нашем случае, мы будем поступать следующим образом: когда пользователь нажимает на какой-либо элемент страницы (для примера возьмем ответы - “облачка”), мы будем отправлять в GTM информацию, что был факт клика на один из вариантов ответа.

Синтаксис команды будет следующим:
dataLayer.push({

    'event':'siteEvent',

    'place':'game',

    'interaction':'pass the test',

    'question':'#Номер_вопроса#',

    'answer':'#Номер_ответа#'

});


Передаем:

название события: siteEvent
место взаимодействия: game

взаимодействие: pass the test

номер вопроса: #Номер_вопроса#

номер ответа: #Номер_ответа#

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

Мы выполнили первую часть настроек - передали информацию в dataLayer. Теперь необходимо эту информацию использовать внутри GTM. Для этого необходимо создать “Переменные уровня данных”. Создаем две переменные “question”, “place”, “interaction” и “answer” (рис. 10):


Рисунок 10. Создание переменной, чтобы использовать ее значение из dataLayer

Теперь мы можем использовать информацию из dataLayer в интерфейсе GTM.

Давайте настроим тег Google.Analytics, который будет отправлять в GA “событие”  с информацией о номере вопроса и ответа, на который кликнул пользователь.


Создаем новый тег Google.Analytics (рис. 11):


Рисунок 11. Использование ранее созданных переменных

В полях “Категория” и “Действие” мы используем отдельные переменные.

В поле “Ярлык” мы используем сразу 2 переменные {{question}} и {{answer}}. Это позволяет нам отправить в Google.Analytics более полную информацию (номер вопроса и номер ответа).

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

В этом и заключается удобство использования “переменных уровня данных”, т.к. мы можем с помощью dataLayer передать любую необходимую нам информацию в GTM и затем использовать ее в любом теге.