it-agency.ru

Стандарт по GTM v 0.92

Здравый смысл никто не отменяет. Нужно помнить о пользе, цене-ценности каждой задачи. Есть предложения по улучшению стандарта? Оставляйте комментарий и пишите Никите Шеину.

Когда ставим GTM

Всегда, когда это возможно — ставим GTM.

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

Контейнер GTM

Регистрируемся в сервисе на основную почту, к которой привязан ГА, шарим доступ на свою почту.

Один или несколько контейнеров?

Отдельный контейнер создаём, когда для клиента нужен отдельный счетчик GA, например — отдельные продуктовые сайты.

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

Если у клиента много лендингов схожей структуры но про разные продукты, то лучше поставить на них один и тот же контейнер.

Установка GTM

Справка

Через разработчиков, отдём им ТЗ:

Поставить на все страницы сразу после открывающего тэга <head> код:

<!— Google Tag Manager —><script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:»;j.async=true;j.src=’https://www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);})(window,document,’script’,’dataLayer’,’GTM-XXXXXX’);</script><!— End Google Tag Manager —>

и кода, сразу после открывающего <body>:

<!— Google Tag Manager (noscript) —><noscript><iframe src=»https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX»height=»0″ width=»0″ style=»display:none;visibility:hidden»></iframe></noscript><!— End Google Tag Manager (noscript) —>

Код контейнера можно найти в кабинете:

Проверяем корректность установки GTM

Через Google tag assistant

Ставим для хрома надстройку Google Tag Assistant, заходим на сайт, смотрим расширение, видим что-то подобное:

Зеленый значёк — всё ок.

Если видим такое:

В целом всё ок, но Google рекомендует сделать немного иначе, нужно выяснить причину, ткнув на строчку мы увидим подробности ошибки:

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

Красная иконка и с опечаленным смайлом:

Критическая ошибка и её обязательно нужно исправлять.

Желтый цвет — это ошибка средней критичности, её тоже нужно исправлять.

Через режим просмотра

Идем в GTM, включаем Preview режим, переходим на сайт, при обновлении страницы должно появиться окно отладчика в нижней части страницы со стандартными шагами прогрузки:

3. Window Loaded

2. DOM Ready

1. Page View

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

Наименование

Аккаунт

Именуем по названию проекта

Пример: Aquaphor

Контейнер

Именуем по названию основного домена

Пример: aquaphor.ru

Тэги

Принцип наименования:

Тип тэга → Тип взаимодействия → Условие срабатывания.

Пример:

тэг отправляет в GA данные о client_id:

GA → Event → Client_id

Передать в Метрику данные о событии скролла на странице:

Metrika → Event → Scroll

Триггеры

Принцип наименования:

Тип триггера → Условия срабатывание

Пример:

Триггер, который срабатывает при просмотре страницы тестового домена:

PageView → DEV doman

Триггер, который срабатывает при скролле 100%:

Scroll → 100

Переменные

Принцип наименования: из названия понятно, какие данные будут храниться в переменной.

Примеры:

idYM — id счетчика Яндекс Метрики

timerEventLabel — техническая переменная для работы с тэгом отслеживания времени

Переменные нужно всегда разносить в смысловые папки.

Сделать сразу, после создания нового контейнера

Базовые действия для настройки контейнера, чтобы было удобно работать в дальнейшем.

Включаем переменные

В разделе настройки переменных:

Включаем все переменные из блоков: Pages, Errors, Clicks, Forms, Videos, Scrolling, Visibility.

В блоке Utilities включаем переменные: Event, Random Number.

Включаем отображение данных о кликах и формах в отладчике

Общая логика — чтобы в отладчике видеть события нужно сделать триггер, который бы отрабатывал на таком событии.

Пример: Когда кликаете в любой точке сайта то GTM должен фиксировать этот клик, чтобы мы могли видеть его характеристики и идентифицировать его

Кликаем на этап и видим значения переменных, которые его характеризуют

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

Создаём триггер, который будет отслеживать все клики:

Создаём триггер, для отслеживания всех отправок форм:

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

Что должно работать через GTM

Счетчик
Отправка событий в GA

Метрика

Счетчик
Отправка событий в Метрику

Важно: при передаче событий в Метрику нужно использовать конструкцию вида:

Это нужно для того, чтобы счетчик точно успевал прогрузиться и не было ошибок типа “yaCounter is not defined”

{{idYM}} — ваш id метрики, эту переменную нужно создать, тип — константа.

Тайм трэкинг 30-60-90 сек

Скролл трэкинг 25-50-75-100%

Важно: если у вас многостраничный сайт с большим трафиком — от 5 000 посетителей в день, то настраивайте только те события которые будете точно использовать, т.к. можно упереться в лимит хитов Universal Analytics :

500 на сеанс
200 000 на пользователья в день
10 000 000 на ресурс

Автособытия

Тэг будет автоматом отправлять событие в GA, если увидит соответствующие данные в dataLayer.

Создаём 4 кастомные переменные:

Делаем тэг, который будет мониторить их:

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

Шаблон

Базовые штуки уже все настроены, нужно только импортировать к себе в аккаунт.

Скачать шаблон

Если не знаете, что это такое и как пользоваться → читайте тут

Важно!

После установки, отпишитесь Мише Стерликову и расскажите, как всё прошло. Это нужно для дальнейшего улучшения шаблона.

Готовые тэги внутри шаблона

GA
Метрика
Передача в GA Client id параметром
Передача в GA времени загрузки каждой страницы, через событие
Передача GA session id, hit timestamp, full referrer параметрами в GA
Google adwords conversion linker
Трэкинг взаимодействия с AJAX элементами
Автособытя для GA и Метрики
Передача событий в GA:
- активное время на странице 30-60-90 сек
- активное время на сайте 60 сек
- скролла 25-50-75-100%
- клика по телефону и е-мейлу
- JS ошибки
- скачивание файлов
- 404 страница
Передача js событий в метрику:
- скролл 25-50-75-100%
- активное время на странице 30-60-90 сек
- активное время на сайте 60 сек
Передача через Параметры визитова всех событий, которые передаются в GA

Дефолтные настройки

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

Триггер Page view → Title → Страница не найдена

Для 404 страницы срабатывает на страницах, где тайтл страницы = “Страница не найдена”. Нужно изменить под свой формат 404-х страниц.

Const — Engagement Timer — Max Time On Page

Верхняя граница по тому, какое время будете трэкать, дефолтно — 90 сек.

Const — Engagement Timer — Tracking Interval

Интервал трэкинга, через который будет отправляться событие. Дефолтно — 30. Т.е. будут события 30 сек, 60 сек, 90 сек

Сделать сразу после импорта

В GTM

Задать номера своих счетчиков в переменных 1 → GA id и 2 → YM id.

Оставить только нужные вам тэги, триггеры, переменные.
Скорректировать Category, Event, Action для событий в соответствии с вашей картой целей и событий.
Если у вас jquery установлен, то удалите подгрузку этой библиотеки из тэга HTML → 60 seconds on site script → All pages.

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

В Google Analytics

Задать пользовательские параметры, указать нужную область действия

С разработчиками

Если вам нужно каким-то особенным образом передавать id сессии или пользователя (промокод), то нужно, чтобы разработчики пушили это значение в dataLayer переменную — session_id. По дефолту, она будет отправляться в 1 специальный параметр GA.

Правила публикации

Новые публикации

При публикации изменений обязательно указывайте описание ваших изменений в понятной формулировке.

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

Работа в GTM совместно с другими командами

В GTM есть рабочие области (Workspace) — созданы для параллельной работы разных людей на одном и том же проекте.

Подробнее можно почитать в справке.

По умолчанию создается одна рабочая область с названием Default Workspace. Если со стороны клиента есть команда, которая тоже вносит правки в GTM, то для наших правок нужно создать отдельную рабочую область и назвать её IT-Agency Workspace.

В этом случае мы не будем мешать клиенту вносить правки и они не будут мешать нам.

Когда нужен dataLayer

dataLayer — массив данных, в который разработчик может в нужный момент времени отправить информацию. GTM может это подхватить и передать нужные значения о событии в GA. dataLayer обновляется каждый раз при обновлении страницы.

dataLayer нужен тогда, когда мы хотим с очень высокой точностью передавать события в GA, обычно это финальные события воронки — отправленная заявки, оформленный заказ и т д. При стандартных способах вы обычно будете привязываться к объектам верстки сайта → при изменении верстки, может сломаться триггер и не будет отправляться событие. Если проект большой и там часто идут работы с сайтом, то вероятность этого довольно высокая.

Когда нужно использовать dataLayer:

если вы хотите быть уверенными на 99%, что информация о событии будет отправлена в GA;
когда нет технической возможности идентифицировать объект взаимодействия и настроить под него триггер.

Для этого нужно разработчикам ставить ТЗ вида:

При успешной отправке формы заявки на обратный звонок нужно пушить в dataLayer следующие данные:

Частые ошибки

Данные в dataLayer передаются позже, чем нужно

Например, у вас уже сработал счетчик GA, а данные о сессии передались после этого → в dimention у вас не будет данных о сессии.

Как исправить?

Передавать данные в dataLayer до того момента, когда их будет обрабатывать тэг.

Слишком широкое описание для триггера

Например, вы сделаете триггер типа клик текст включает “Калькулятор” и будете думать, что он сработает только при клике по меню. На самом деле он будет срабатывать при любом клике по любому блоку, где в тексте есть слово “Калькулятор”, например, при клике по общему описательному тексту.

Как исправить?

Важно идентифицировать верно объект взаимодействия. Добавляйте несколько условий, чтобы идентифицировать действие однозначно — Click text, Click class, id и т. д.

Неверно настроен параметр Non-interaction hit для событий GA

Следствие — резко проседает показатель отказов GA, например с 50% до 2%. Дефолтная настройка — False. Т.е. событие будет сразу влиять на показатель отказа.

Как исправить?

Ставить False там, где нужно, чтобы событие влияло на показатель отказов и True, там, где нужно, чтобы событие не учитывалось в показателе.

Что почитать

Блог Simo Ahava — евангелист GTM, много крутых штук

Хороший базовый гайд (начальный уровень сложности)

Руководство по управлению тегами, бесплатная pdf — много практических примеров — подмена контента, отслеживание youtube, отслеживание ошибок JavaScript и пр.

Гид по Google Tag Manager — часть 1 (начальный уровень сложности)

Гид по Google Tag Manager — часть 2 (средний уровень сложности)

Как корректно установить счетчик Метрики и отправлять события

Как протестировать и настроить GTM, до того, как его установили на сайт

GOOGLE TAG MANAGER RECIPES — набор фишек, что можно делать с GTM

Как с помощью GTM в ремаркетинге Adwords использовать динамические данные

Отправка данных с сайта в Google Spreadsheets

GTM Переменные DOM — как получить значение любого атрибута HTML тега