Google Tag Manager для googлят: Руководство по управлению тегами

же сообщение, используйте эту настройку.

● При каждом появлении элемента на экране – в этом случае триггер срабатывает каждый раз, когда соответствующий элемент становится видимым.

Минимальный процент видимости – какой процент выбранного элемента должен быть виден на экране для срабатывания триггера. Можно использовать собственную переменные.

Рис. 348. Минимальный процент видимости

Укажите минимальное время видимости – как долго выбранный элемент должен быть виден на экране для срабатывания триггера. Время периодов видимости на одной странице суммируется. Например, если элемент был виден в течение 4000 мс (4 секунд), затем скрыт из видимости окна браузера и после этого снова виден в течение 2000 мс, то общее время видимости этого элемента составит 6 000 мс.

Рис. 349. Минимальное время видимости

Если галочку не ставить, то время видимости для срабатывания триггера не будет играть роли.

Регистрация изменений DOM – настройка отслеживает элементы, которых изначально нет на странице, которые подгружены динамически и могут не входить в DOM (Объектная Модель Документа). Например, всплывающие формы. Если у вас есть на сайте есть такой контент, поставьте галочку, и такие элементы будут регистрироваться.

Рис. 350. Регистрация изменений DOM

Отправка формы

Рис. 351. Триггер «Отправка формы»

Триггер аналогичен настройкам другого триггера «Клик – Только ссылки». Можно использовать со специально встроенными переменными: Form Element, Form Classes, Form Target, Form URL, Form Text.

Другое

Рис. 352. Триггеры «Другое»

● Изменение в истории – срабатывает событие gtm.historyChange если изменился фрагмент URL (хэш, #). Как правило, используется на сайтах, контент которых подгружается динамически, без перезагрузки страниц;

В GTM можно использовать со встроенными переменными: New History Fragment, Old History Fragment, New History State, Old History State, History Source.

● Ошибка JavaScript – срабатывает событие gtm.pageError если происходит неперехваченное исключение JavaScript (window.onError);

В случае, если в JavaScript мы используем конструкцию «try..catch», то GTM не зафиксирует ошибку. Также триггер не будет сигнализировать об ошибках, которые произошли до загрузки кода Диспетчера тегов. Можно использовать со встроенными переменными Google Tag Manager: Error Message, Error URL, Error Line, Debug Mode.

● Пользовательское событие – срабатывает событие event, которое отправили с помощью конструкции dataLayer.push({'event': 'event_name'});

Пользовательские события позволяют отслеживать те взаимодействия, для которых не подходят стандартные методы. Например, отслеживание отправки формы с переопределением события submit.

Допустим мы хотим отправлять событие на уровень данных при нажатии кнопки «Отправить заявку». Для этого добавим код: dataLayer.push({'event': ‘button1-click’})

Рис. 353. dataLayer.push({'event': ‘button1-click’})

где button1-click – название пользовательского события;

Далее необходимо создать тег, а в настройках триггера «Пользовательское событие» задать название button1-click и условие активации – «Все специальные события». При необходимости можно использовать регулярные выражения.

Рис. 354. Пользовательское событие button1-click

Когда пользователь нажмет кнопку, на уровень данных будет отправлено пользовательское событие со значением button1-click. Затем GTM определит button1-click как значение пользовательского события и активирует тег.

Рис. 355. Событие button1-click

В dataLayer.push() можно добавить не только одну переменную вида «ключ=значение», но и целый массив. А чтобы посмотреть порядок в котором события передаются на уровень данных, откройте консоль JavaScript в веб-браузере и введите dataLayer:

Рис. 356. Console – dataLayer

● gtm.start – запуск контейнера GTM;

● gtm.dom – модель DOM готова;

● gtm.load – окно загружено;

● gtm.linkClick – открытие формы;

● button1-click – клик по кнопке.

Таймер

Событие gtm.timer срабатывает через заданный интервал времени (в миллисекундах).

Доступны следующие настройки:

Рис. 357. Триггер «Таймер»

● Имя события (по умолчанию gtm.timer) – можем изменить на любое другое. Например, timer2018;

● Интервал – время, через которое должно активироваться событие. Например, через 2,5 секунды;

● Ограничение – максимальное число активаций события. Например, 1. Если оставить это поле пустым, событие будет активироваться до тех пор, пока пользователь не покинет страницу.

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

Так выглядит уровень данных события gtm.timer:

Рис. 358. gtm.timer в Data Layer

Триггеры в Google Tag Manager делятся на триггеры активации тегов и триггеры блокировки тегов.

Триггер активации – это условие, при выполнении которого срабатывает тег.

Например, вы хотите отслеживать клики по определенной кнопке на сайте. Зная значения переменной, вы можете настроить триггер активации, например, по Click ID:

Рис. 359. Пример условия активации триггера

Таким образом, тег активируется только в том случае, когда идентификатор HTML-тега равен menu-item-4306.

Триггеры активации делятся на:

● встроенные триггеры – доступны к использованию готовые шаблоны;

● пользовательские триггеры – ручная самостоятельная настройка.

Триггер блокировки – это условие, при выполнении которого активация тега блокируется.

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

Рис. 360. Триггер блокировки или исключения

При конфликте триггеров активации и блокировки, приоритет отдается блокиратору. Добавить триггер блокировки можно с помощью кнопки «Добавить исключение» в настройках тега.

Рис. 361. Добавить исключение

В Google Tag Manager существует триггер, который добавлен по умолчанию и который нельзя удалить. Это All Pages (Просмотр страницы).

Также как и переменные, триггеры в GTM можно копировать, удалять, просматривать изменения, и у них можно вывести примечания. Для этого в правом верхнем углу нажмите на значок «три точки».

Рис. 362. Действия над триггерами

В «Просмотреть изменения» можно узнать, что конкретно было изменено в переменной по сравнению с предыдущей версией, а в «Показать примечания» есть возможность заносить какие-то пометки, добавить описание по функциональности и т.д.

После создания триггеров их следует добавить к тегам.

Примечание: для каждого тега не нужно создавать отдельный триггер. Вы можете использовать один триггер в разных тегах.

Теги

Тег в Google Tag Manager – это фрагмент JavaScript кода, который собирает данные о посетителях на сайте и в приложении, а затем пересылает их на сторонние сервисы – Google Analytics, Google AdWords, Facebook, Яндекс.Метрика и т.д.

Если вы не используете Google Tag Manager, то все фрагменты кода других сервисов вам приходится вставлять вручную в исходный код страницы сайта. Это не очень удобно и отнимает много времени. Благодаря GTM все становится куда проще – исходный код менять не требуется, достаточно лишь указать в интерфейсе, какие теги вы хотите использовать и когда их нужно активировать.

В Google Tag Manager есть n-ое количество шаблонов тегов, которые облегчают их установку на сайте. Они разделены на категории:

● рекомендуемые – Universal Analytics, классический Google Analytics, отслеживание конверсий AdWords, ремаркетинг AdWords, счетчик DoubleClick Floodlight, тег продаж DoubleClick Floodlight, Google Optimize, Google Опросы;

Рис. 363. Рекомендуемые теги

● специальные – пользовательский HTML и пользовательское изображение;

Рис. 364. Специальные теги

● еще – сторонние сервисы, Twitter Universal Website Tag, Adometry, Crazy Egg, comScore Unified Digital Measurement, K50 tracking tag, Foxmetrics, Hotjar Tracking Code и другие.