Сегодня мы поговорим о том, как быстро и легко настроить цели на кнопки для отслеживания действий посетителей через Google Tag Manager. Наверняка, каждый из нас сталкивался с ситуацией, когда вследствие каких-либо очередных изменений в коде сайта, наши цели слетали и отслеживание прекращалось. Для того, чтобы в будущем избежать таких ситуациях, вы самостоятельно (без помощи программистов) можете установить цели, которые будут безотказно работать, пока вы сами это не остановите.
К основным преимуществам Google Tag Manager относятся:
- Минимум кода на страницах сайта: убираем все скрипты Google и вместо них загружаем код контейнера Google Tag Manager.
- Удобство настройки и отслеживания: все настройки ведутся через панель управления Google Tag Manager. Здесь мы можем отслеживать, какие события отслеживаются для сайта.
- Масштабируемость. Для того чтобы добавить код отслеживания Google Analytics или код ремаркетинга, вам больше не нужно добавлять скрипт в код страниц. Это можно легко сделать через панель Google Tag Manager.
- Система контроля версий. В случае необходимости, можно сделать откат к более ранней версии. К тому же, можно контролировать действия пользователей аккаунта, которые вносили какие-либо изменения.
- Режим многопользовательской работы.
Прежде, чем приступать к работе с Google Tag Manager, нужно иметь представления о следующих понятиях: аккаунт, контейнер, тег, правило, макросы. Дадим же определения каждому из них:
- Аккаунт — это ваша учетная запись в Google Tag Manager.
- Контейнер — это фрагмент js-кода, который подгружается на все страницы сайта. Внутри контейнера содержится информация о тегах, которые запускаются в следствии выполнения определенных правил.
- Тег — это фрагмент js-кода, который мы ранее вручную вставляли на страницы сайта. Например, код ремаркетинга, код отслеживания Google Analytics.
- Правило — условие, при котором будет выполняться/не выполняться тег.
- Макросы — это переменные, которые используются для отслеживания событий.
Таким образом, на каждой странице сайта есть контейнер, внутри которого содержатся теги, которые выполняются при выполнении определенных правил. В свою очередь, макросы нужны для настройки этих правил и тегов.
Ниже приведена пошаговая инструкция того, как начать работать с Google Tag Manager.
Шаг 1. Создаем контейнер
Регистрируемся в Google Tag Manager и создаем новый аккаунт:
Далее создаем контейнер для нашего аккаунта. Указываем имя контейнера, домен, где будет внедрен контейнер, часовой пояс, после чего нажимаем кнопку «Создать аккаунт и контейнер»:
После нажатия кнопки возникнет всплывающее окно, в котором нужно нажать кнопку принятия условий соглашения:
После принятия соглашения будет сформирован контейнер (фрагмент js-кода), который необходимо разместить на всех страницах сайта сразу же после открывающегося тега body.
N.B. Контейнер необходимо размещать сразу после открытия тега body. В противном случае, все методы и данные, расположенные выше контейнера, попросту не будут работать.
К тому же, стоит помнить, что для основного домена и поддоменов сайта лучше использовать разные контейнеры.
Шаг 2. Добавляем тег Google Analytics
Ниже контейнера находится список рекомендуемых тегов, которые мы можем добавить в контейнер одним кликом. В данном случае добавим тег Google Analytics.
В появившемся окне настройки тега вводим соответствующие данные:
- имя и тип тега
- идентификатор веб-ресурса
- тип отслеживания
После введения типа отслеживания необходимо добавить правило активации тега, без которого работа тега просто невозможна. В правом верхнем блоке нажимаем кнопку «добавить правило», где ставим галочку напротив условия «все страницы сайта», так как мы хотим, чтобы код отслеживания срабатывал на всех страницах сайта.
Шаг 3. Настраиваем макрос
После настройки тега, приступаем к настройке макроса для отслеживания события для формы «Обратная связь». Для этого нам надо создать три макроса (eventCategory, eventAction, eventLabel), на основе которых будет сформирован тег отслеживания события.
Создаем макрос GA Event_action. Указываем имя, тип макроса, указываем переменную уровня данных и выбираем версию уровня данных. После нажимаем кнопку «Сохранить».
Аналогичным образом создаем макросы GA Event_category, GA Event_label.
Шаг 4. Создаем тег
По окончанию создания трех макросов приступаем к созданию тега:
Указываем имя, тип тега, идентификатор отслеживания Google Analytics, тип отслеживания, заполняем параметры события (ранее созданные три макроса).
Шаг 5. Создаем правило активации события
Затем приступаем к созданию правила активации события. Для этого в верхней боковой части экрана нажимаем кнопку «Создать». В появившемся окне указываем имя правила и условие его выполнения.
Принцип работы отслеживания событий с помощью Google Tag Manager
Обычно для отслеживания событий через Google Analytics мы используем фрагмент кода (приведенный ниже), который мы непосредственно добавляем в код страницы для определенной кнопки:
<a href
="#" onclick
="dataLayer.push({'event':'value', 'eventCategory':'value', 'eventAction':'value', 'eventLabel':'value'})">
Так как код отслеживания события мы не будем внедрять непосредственно в код страницы, то будем делать привязку действия по клику с использованием jQuery и подключением через Google Tag Manager следующим образом:
1. Создаем новый тег
2. Добавляем в поле HTML следующий код:
<script>
$(document).ready(function(){ $('селектор нужного объекта').click(function() { dataLayer.push({'event':'GAevent',
'eventCategory':'Заданное нами значение', 'eventAction':'Заданное нами значение', 'eventLabel':'Заданное нами значение'}); });});<
/script>
3. После создания тега, переходим к созданию цели в Google Analytics, где указываем значения для каждой переменной:
4. После этого, указанные нами значения, включаем в метод dataLayer.push() :
После того, как цель в Google Analytics, макросы и теги созданы, переходим в Google Tag Manager во вкладку «Общие сведения» и нажимаем кнопки «Сохранить» и «Опубликовать».
Как видите, настроить цели с помощью Google Tag Manager не сложно. Выполнив все вышеуказанные рекомендации, вы сможете с легкостью настроить все интересующие вас события и наблюдать за поведением посетителей на вашем сайте, без помощи посторонних лиц.
