Книга: Google Tag Manager для googлят: Руководство по управлению тегами
Назад: Прослушивание кликов в GTM
Дальше: Как задать ценность покупки для пикселя Facebook
Отслеживание кликов с помощью GTM
Рассмотрим настройки на примере клика по кнопке «Обратный звонок».
Рис. 442. Отслеживание кнопки «Обратный звонок»
Последовательность действий:
1. Настраиваем прослушивание кликов;
2. Переходим в пункт меню «Переменные», нажимаем на кнопку «Настроить» и активируем соответствующие переменные:
Рис. 443. Активация встроенных переменных типа «Клики»
3. Активируем режим предварительного просмотра:
Рис. 444. Активация режима предварительного просмотра
4. Переходим на необходимую страницу сайта и обновляем eе для активации режима отладки
5. Далее кликаем по элементу, для которого хотим настроить отслеживание целей. В нашем случаем это будет кнопка «Обратный звонок». Видим, что зафиксировалось соответствующее событие gtm.click:
Рис. 445. Зафиксированное событие gtm.click
6. Выбираем событие gtm.click и переходим на вкладку «Variables». Данному событию соответствуют несколько переменных. В нашем случае, для дальнейших настроек копируем значение переменной Click Classes.
Примечание: если по каким-то причинам у вас нет необходимой переменной при клике по кнопке, то обратитесь к вашему программисту, чтобы он ее добавил, или же используйте CSS-селекторы.
Рис. 446. Копируем Click Classes элемента
7. Переходим к настройкам GTM. В первую очередь создаем соответствующий триггер, который будет принимать истинное значение, когда будет происходить клик по кнопке «Обратный звонок». В качестве условия активации триггера задаем ранее скопированное значение переменной Click Classes. Для этого необходимо задать следующие настройки:
● Тип триггера – «Клик – Все элементы»
● Триггер: активации – «Некоторые клики»
● Click Classes равно enter_1 GTM-zvonok-link
Рис. 447. Условие активации триггера по некоторым кликам
8. Cоздаем тег, который будет передавать события в Google Analytics. Называем тег таким образом, чтобы было понятно за что он отвечает. В качестве типа тега указываем «Universal Analytics».
● Тип тега – «Universal Analytics»
● Тип отслеживания – «Событие»
Задаем значения переменных, которые будут передаваться в Google Analytics при нажатии на кнопку. Не обязательно заполнять все поля. Они нужны для более детального анализа в отчетах Google Analytics.
Рис. 448. Настройки тега Universal Analytics
9. Указываем идентификатор отслеживания. В данном примере мы его создали через переменную.
Рис. 449. Включить переопределение настроек в этом теге и добавить переменную отслеживания
Создание переменной {{code ua}}
Значение кода счетчика (идентификатора отслеживания) берем с «Google Analytics – Ресурс – Код отслеживания».
Рис. 450. Создание пользовательской переменной с кодом GA
10. Возвращаемся к настройкам тега. В качестве триггера активации выбираем ранее созданный триггер «обратный звонок» и сохраняем.
Рис. 451. Условие активации тега
11.Теперь переходим к созданию тега для отслеживания клика по кнопке в Яндекс.Метрика. Называем тег таким образом, что бы потом можно было его отличить от тега для GA. В качестве типа тега задаем «Пользовательский HTML».
Рис. 452. Создание пользовательского HTM-тега
В поле HTML укажем следующий код:
<script>yaCounter46519032.reachGoal(‘obratni_zvonok’);</script>
где:
● 46519032 – номер вашего счетчика в Яндекс.Метрика;
● obratni_zvonok – идентификатор цели, который в дальнейшем будет прописан в настройках цели в самой Яндекс.Метрика.
В качестве триггера указываем ранее созданный в п. 7 триггер «обратный звонок» и сохраняем. Один триггер будет активировать два тега. Поэтому нет необходимости создавать для каждого тега отдельный триггер.
Рис. 453. Условие активации тега «обратный звонок»
12.Теперь перейдем к настройке целей. Начнем с Яндекс.Метрика. Переходим в «Настройки – Цели».
Рис. 454. Настройки – Цели
Указываем название цели. «Тип условия» выбираем «JavaScript-событие». В качестве идентификатора цели задаем то значение, которое указали в предварительно созданном теге GTM для Яндекс.Метрика в п. 11. Сохраняем цель, нажав на кнопку «Добавить цель».
Рис. 455. JavaScript-событие
13. Создадим цель в Google Analytics:
● переходим в меню «Цели» на уровне «Представление»;
● нажимаем на кнопку «+Цель»;
● выбираем пункт «Собственная» и нажимаем «Далее»;
● указываем название цели, в качестве типа выбираем «Событие» и нажимаем «Далее»;
● в качестве условий берем те значения, которые указали в соответствующем теге (см. Рис. )
Рис. 456. Задаем категорию и действие в Google Analytics
Сохраняем. Теперь цель создана и будет фиксировать клики по кнопке «Обратный звонок». После проверки целей (сделать это можно с помощью отчетов «В режиме реального времени») необходимо опубликовать контейнер в GTM, чтобы все изменения были активированы для посетителей сайта.
