GTM V2

Google Tag Manager V2

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

  • Теперь GTM доступен на поддомене tagmanager.google.com
  • Макросы заменены на переменные. Правила заменены на триггеры. Теги остались тегами.
  • Больше нет необходимости добавления тегов прослушивания событий для отслеживания клика, отправки формы и т. д. Если нужно отследить клик, создаем тег отслеживания события и в качестве правила активации просто выбираем из предложенных вариантов триггер типа “Клик”.

    GTM

  • Отдельным блоком стали выделяться встроенные переменные. По умолчанию они отключены, поэтому перед использованием их необходимо активировать, установив соответствующие чекбоксы.

    GTM V2

  • Пользовательские переменные можно создавать как и раньше. Теперь они размещаются отдельно от встроенных.

    GTM

  • Изменились названия переменных. Например, эквивалентом макроса URL теперь является переменная Page URL, макросу Element ID соответствуют Click ID/FORM ID и т. д.
  • Еще больше встроенных тегов.

    GTM

  • Настраивать теги стало еще проще, так как процесс настройки реализован пошагово.
  • Триггеры, которые активируют теги, отличаются символом, что предоставляет возможность при одном взгляде на тег в списке понять, триггер какого типа его активирует.

    GTM

  • Новое API для управления аккаунтами, контейнерами, переменными, триггерами и тегами.

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

 

 

Установка кода Google Analytics в GTM V2

 

 

1. Создаем новый тег. Мы можем это сделать либо со страницы “Обзор”,

GTM

либо перейдя на вкладку “Теги”.

GTM

При выборе продукта останавливаемся на “Google Analytics”.

GTM

2. Указываем тип тега (“Universal Analytics”, “Классический Google Analytics”) и идентификатор отслеживания ресурса в Google Analytics.

GTM

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

3. Указываем правило активации тега.

Код аналитики должен активироваться на всех страницах сайта, поэтому выбираем соответствующее правило.

GTM

Созданный тег появится в списке тегов:

GTM

4. Публикуем новую версию контейнера.

GTM

Не забываем тестировать изменения перед публикацией с помощью инструмента предварительного просмотра и отладки (этот инструмент, кстати, тоже упрощен, в сравнении с прошлой версией).

GTM

Для этого нужно войти в режим предпросмотра и обновить страницу сайта. Появится окошко отладчика.

GTM

Если при проверке в отладчике вы убедились, что все работает правильно, можно смело публиковать новую версию контейнера.

5. Проверяем данные в Google Analytics, отчет “Режим реального времени”.

GTM V2

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

 

Установка Яндекс Метрики, ремаркетинга FB, VK и других пользовательских тегов в GTM V2

 

1. Добавляем новый тег типа “Пользовательский тег HTML”.

GTM

2. Вставляем в поле код Яндекс Метрики (кода ремаркетинга FB или VK). Фрагменты JavaScript необходимо заключить в HTML-теги скрипта <script>…</script>

GTM

3. Задаем условия активации тега.

GTM

 

Отправка событий по таймеру в GTM V2

 

Для примера настроим событие, которое будет отправляться, если пользователь провел на странице не менее 60 секунд.

1. Добавляем триггер типа “Таймер”.

GTM

2. Задаем настройки таймера.

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

GTM

3. Добавляем новый тег типа “Google Analytics”.

GTM

Выбираем тип отслеживания — событие. Указываем обязательные параметры “Категория” и “Действие”. Обращаю внимание на опцию “Не взаимодействие” (ВАЖНО!).

GTM V2

Если вы хотите, чтобы отправка события влияла на ваш показатель отказов, то необходимо установить значение “false” для этого параметра. В противном случае – устанавливайте значение “true”. В качестве условия активации выбираем созданный на предыдущем шаге триггер “Таймер”.

GTM

 

Отслеживание кликов в GTM V2

 

1. Создаем новый триггер “Клик”.

GTM

При настройке триггера можно выбрать цель “Все элементы” либо “Только ссылки”. При выборе типа “Все элементы”, тег будет активироваться при клике на любой элемент, при выборе “Только ссылки” — только при клике на ссылку.

Если выбрать цель “Только ссылки”, то появятся дополнительные настройки: “Ждать теги”, “Проверка ошибок”. Такие опции появляются также при создании триггера “Форма”.

При активации опции “Ждать теги” происходит задержка открытия ссылок (отправки формы), пока не будут активированы все связанные с этим событием теги или пока не истечет указанное время ожидания (в зависимости от того, что произойдет раньше)

При активации опции “Проверка ошибок” тег не будет срабатывать, если для отслеживаемого элемента (ссылки/формы) не было выполнено действие по умолчанию (отправка формы/переход по ссылке).

2. Далее задаем условие активации триггера.

Выбираем “Некоторые клики”

GTM

и уточняем, по какому элементу хотим отслеживать клик , установив правило сопоставления с идентифицирующим этот элемент атрибутом (Click Classes, Click ID…). Значение атрибута можно получить, обратившись к исходному коду страницы сайта. Чтобы встроенная переменная Click Classes стала доступной, не забываем ее активировать на вкладке “Переменные”:  

GTM

 

3. Далее создаем тег, который будет отправлять событие в аналитику. Создаем новый тег типа “Universal Analytics”. В качестве типа отслеживания выбираем “Событие”, указываем обязательные параметры “Категория”, “Действие”.

GTM

4. Добавляем условие активации — триггер, созданный на 3-м шаге.

В случае, когда необходимо настроить отслеживание клика по какому-либо элементу на веб-странице, а у этого элемента нет идентифицирующих его атрибутов, таких как, например, ID, class или URL, задачу отслеживания можно решить с помощью селекторов CSS.

 

Отслеживание отправки форм в GTM V2

 

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

 

Отслеживание форм, отправляющих данные посредством submit

 

Если данные отправляются через submit, то для отслеживания такого события можно привязаться к классу или идентификатору формы. Настройка осуществляется аналогично настройке отслеживания кликов.

1. Создаем новый триггер, в качестве типа события триггера выбираем “Отправка формы” вместо “Клик”.

GTM

Если активировать хотя бы одну из опций “Ждать теги”, “Проверка ошибок”, о которых я уже писала в пункте “Отслеживание кликов”, появится дополнительный шаг создания триггера “Условия включения”. Это не то же самое, что условие активации. Условие включения позволяет указать, в каких случаях триггер должен быть доступен, то есть при каких условиях должны прослушиваться отправки форм. Распространенным условием включения триггера типа “форма” является указание только тех страниц, на которых есть формы.

GTM

При установке опции “Ждать теги” обязательно тестируйте события. Если возникают проблемы, снимайте чекбокс. Правда в таком случае, есть вероятность, что часть обращений может быть потеряна. На четвертом шаге указываем условие активации. Привязываемся к атрибуту, идентифицирующему нужную нам форму (Form ID, Form Classes, …). Не забываем активировать необходимую встроенную переменную перед использованием.

GTM

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

 

Отслеживание форм, отправляющих данные посредством ajax

 

Если для отправки данных используется ajax, необходимо проделать следующие шаги:

  • В одном из javascript-фалов найти функцию, отвечающую за отправку данных нужной формы через ajax. Выглядит это примерно так:
    $.ajax ({
    url :'/example.com/geinfo_function',
    type : 'post',
    data : {'exam1': value1},
    success: function() {...}
    })

    Параметр success отвечает за выполнение указанных действий в случае успешной отправки формы. Внутри function() { … } нужно прописать команду

    dataLayer.push({'event': 'event_name'});

    где event_name — имя соответствующего события.

       Подробнее про dataLayer

  • В GTM создаем пользовательское событие event_name.Добавляем новый триггер “Пользовательское событие”.

    GTM

    И в условии его активации указываем ивент, который отправили с помощью dataLayer.push().

    GTM

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

Если у вас возникает необходимость отслеживать взаимодействие с отдельными элементами форм, вы можете ознакомиться с подробным описанием методов в статье Отслеживание взаимодействия с элементами форм при помощи GTM.

 

Виртуальные страницы в GTM V2

 

1. Создаем новый тег типа “Google Analytics” с типом отслеживания “Просмотр страницы”. В дополнительных настройках добавляем новое поле, в нем ищем параметр “page”. Указываем URL виртуальной страницы, который хотим видеть в аналитике.

GTM

2. В качестве условия активации используем необходимый триггер. В этой статье я рассмотрела основные изменения в GTM 2.0., а также продемонстрировала основные принципы работы на примере некоторых типичных задач. Надеюсь, этот материал поможет постичь основы работы с новой версией тег менеджера. Если остались вопросы — оставляйте в комментариях, будем разбираться вместе! Если же вы уже продвинутый пользователь GTM и на этой странице ничего нового для себя не нашли, думаю, вам будет интересно ознакомиться с этой статьей. 🙂

 

Обновление от 5.10.16 Один из частых вопросов, который мне задавали — как отследить копирование на сайте. Ответ на этот вопрос я выделила в отдельный пост.

Новая статья, посвященная работе в Google Tag Manager, доступна по ссылке.