модель dom готова что это

Что означают gtm.js, gtm.dom, gtm.load в Google Tag Manager?

Что означают три события gtm.js, gtm.dom, gtm.load в dataLayer, которые срабатывают по умолчанию в Google Tag Manager и которые мы видим в режиме предварительного просмотра при загрузке любой страницы?

Каждый раз, когда загружается страница вашего сайта, в уровень данных передается информация о трех событиях: Container Loaded (gtm.js), DOM Ready (gtm.dom) и Window Loaded (gtm.load).

Если мы перейдем в консоль разработчика (клавиша F12 в Google Chrome) на вкладку Console, введем dataLayer и нажмем Enter, то увидим тот же самый результат:

dataLayer в консоли разработчики

Что же означают эти события?

Жизненный цикл HTML-страницы состоит из трех важных событий: DOMContentLoaded, load и beforeunload/unload. Первое отвечает за полную загрузку HTML и построение DOM-дерева, второе за окончательную прогрузку HTML и всех внешних ресурсов (включая картинки, стили и т.д.), а последнее срабатывает, когда пользователь покидает страницу сайта.

Подробнее об этом читайте в документации learn.javascript.ru. Важно отметить, что два из трех вышеперечисленных событий по умолчанию срабатывают и в Google Tag Manager.

1. Container Loaded (gtm.js)

Это первое событие, которое запускает триггер gtm.js, помещается в dataLayer и срабатывает тогда, когда контейнер GTM готов к работе.

Не так давно разработчики Google переименовали данное событие в Container Loaded. Раньше это событие называлось Page View (Просмотр страницы), что несколько вводило интернет-маркетологов в заблуждение, поскольку в Google Tag Manager по умолчанию существует триггер со схожим названием Page View (All Pages), который используется при настройке отслеживания тегов на всех страницах сайта. Да и Page View меньше охарактеризовало себя как событие, поскольку правильнее было бы говорить именно о загрузке самого контейнера Google Tag Manager, а не о просмотре страницы.

Примечательно, что данное событие содержит в себе отметку времени в gtm.start:

gtm.js с отметкой времени в gtm.start

В дальнейшем мы можем использовать переменную уровня данных gtm.start для своих целей, например, для определения времени начала пользовательской сессии.

Примечание: некоторые события могут срабатывать ДО загрузки контейнера GTM. В этом случае Container Loaded может иметь другой порядковый номер, отличный от единицы. Например:

Container Loaded загружается вторым по порядку

Здесь Container Loaded загружается вторым по порядку, до загрузки контейнера Google Tag Manager уже доступна информация по userId.

2. DOM Ready (gtm.dom)

Событие, которое запускает триггер gtm.dom, помещается в dataLayer и срабатывает как только браузер загрузит объектную модель документа (Document Object Model). Событие происходит когда весь HTML был полностью загружен и пройден парсером, не дожидаясь окончания загрузки таблиц стилей, изображений и фреймов.

3. Window Loaded (gtm.load)

Событие, которое запускает триггер gtm.load, помещается в dataLayer и срабатывает после завершения загрузки всей страницы и всех связанных ресурсов (загрузки таблиц стилей, изображений, фреймов), когда окно полностью загружено.

Разница в скорости загрузки

Хронология с событиями и таймингом (расширение dataLayer Inspector+)

На примере выше у нас событие gtm.js произошло в 11:37:53.901, событие gtm.dom в 11:37:54.198, а последнее событие gtm.load в 11:37:57.690, то есть через 0,790 секунды позже, чем загрузился контейнер GTM, и на 0,492 секунды позже, чем загрузилась объектная модель документа (DOM).

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

Если сайт тяжелый, имеет большое количество неоптимизированных картинок, долго загружаются скрипты, вы зашли на него впервые (страница не закэширована), то разница между DOMContentLoaded и Load может быть существенной. И вот как раз здесь возможна ситуация, при которой вы будете пытаться прикрепить слушатель к элементу, которого еще не существует. Триггер GTM сработает, но информация через тег в инструменты веб-аналитики не попадет, поскольку не будет еще определена.

Какое из трех событий выбрать в качестве триггера?

Триггеры «Просмотр страницы»

Зависит от конкретной задачи и от момента, когда ваши данные будут готовы к отправке в инструменты аналитики:

События для одностраничных сайтов (SPA)

Источник

Триггеры в Google Tag Manager

Триггер (от анг. слова trigger в значении спусковой крючок, или приводящий в действие элемент) в GTM – это условие, при котором активируется или блокируется тег. Для запуска тега должен быть хотя бы один триггер.

Таким образом, нельзя создать тег без триггера. Триггер может принимать значение «true» (истина), либо «false» (ложь). Он выполняется только в том случае, когда его значение является истинным, и если выполняются все условия триггера.

А чтобы это определить (true или false), значение переменной сравнивается с тем, которое задано в триггере. Все триггеры в Google Tag Manager связаны с событиями. Также они могут иметь дополнительные условия или фильтры. В старой версии диспетчера тегов Google триггер назывался «правилом».

Существует два способа создания триггеров:

1. перейти на вкладку «Триггеры» и нажать на кнопку «Создать»;

2. через сам тег в блоке «Триггеры» по нажатию на «+» если в нем уже есть триггеры;

или же через пустую область блока, если триггеры к тегу еще не были добавлены.

Тип триггера представляет собой комбинацию события GTM и типа взаимодействия (или события), которое вы хотите, чтобы GTM начал прослушивать. Они разбиты на несколько категорий:

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

Просмотр страницы

Триггеры «Просмотры страницы»

Google Tag Manager передает эти три события на уровень данных по умолчанию. Убедиться в этом можно перейдя в режим предварительного просмотра.

Перейдя на сайт в режиме отладки, вы увидите:

Режим отладки – три события

Выбрав событие, например, Window Loaded, и перейдя на вкладку «Variables» (Переменные), можно просмотреть зафиксированное пользовательское событие (переменная _event) и его значение (value – в нашем примере gtm.load):

или у переменной «Пользовательское событие»:

Переменная «Пользовательское событие»

Клик

Тип триггера фиксирует клики по ссылкам или любым кликабельным элементам сайта.

Например, создадим триггер на «Все элементы» с условием активации триггера «Все клики».

Тип триггера – Клик – Все элементы

В таком случае при каждом клике по любой области на странице в режиме предварительного просмотра GTM будет фиксировать событие gtm.click:

Фиксация кликов в режиме отладки

То есть вне зависимости от того, куда пользователь кликнул (на кнопку, на фон, в пустую область на странице) – все события будут зафиксированы. Если же мы хотим отслеживать события только по определенным элементам, то вместо условия активации триггера «Все клики» выбираем «Некоторые клики»:

Клики по определенным элементам

Нам станет доступна настройка активации триггера при наступлении события и выполнении всех условий, а именно:

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

Добавление условий через +/-

Условия и фильтры связаны между собой логическим «И». То есть задав две строки, триггер будет срабатывать только тогда (событие будет считаться истинным и принимать значение true), когда одновременно соблюдаются первое И второе условия.

В этом примере триггер сработает только тогда, когда пользователь кликнет по элементу с соответствующим селектором #features1 > div > ul > li:nth… И только на странице https://site.ru/catalog.

Соблюдение условий активации триггера

Аналогичным образом настраиваются триггеры для «Только ссылки», а событие в режиме отладки будет называться gtm.linkClick:

Однако данный тип триггера имеет дополнительные настройки. Такие же опции появляются при создании триггера «Отправка формы».

Опции «Ждать теги» и «Проверка ошибок»

Блок «Проверка ошибок» позволяет нам указать ГДЕ мы хотим использовать данный триггер, а блок с условиями активации определяет КОГДА этому быть. В качестве примера давайте разберем условие клика по ссылке (элемент – кнопка) со значением CSS-селектора и зададим «Проверка ошибок» на главной странице сайта.

В режиме предварительного просмотра при клике на данную кнопку зафиксируется событие gtm.linkClick:

Но если мы поменяем условие проверки ошибок, например, на такое:

Пример условия проверки ошибок

То события gtm.linkClick фиксироваться не будут, поскольку не соблюдено условие ГДЕ. До обновления Google Tag Manager «Проверка ошибок» и условие активации назывались «Условия включения» и «Условия активации». Рядовой пользователь мог легко запутаться в данной терминологии.

Для триггера типа «Отправка формы» распространенным условием активации функции «Проверка ошибок» является указание только тех страниц, на которых есть формы.

Триггер можно использовать со специально встроенными переменными: Click Element, Click Classes, Click ID, Click Target, Click URL, Click Text.

Взаимодействие пользователей

Триггеры «Взаимодействие пользователей»

Видео YouTube

Пример настройки триггера «Видео YouTube»

Тоже самое, что было описано в разделе «Переменные»:

Установив этот флажок, вы включите YouTube iFrame Player API. В результате ко всем URL видеопроигрывателя YouTube будет добавлен параметр enablejsapi = 1 для управления проигрывателем через iframe или JavaScript.

Как правило, данный триггер используется в связке со встроенными переменными из блока «Видео»: Video Provider, Video Status, Video URL, Video Title, Video Duration, Video Current Time, Video Percent, Video Visible.

Глубина прокрутки

Триггер «Глубина прокрутки»

Как правило, данный триггер используется в связке со встроенными переменными из блока «Прокрутка»: Scroll Depth Threshold, Scroll Depth Units, Scroll Direction.

Доступность элемента

Триггер «Доступность элемента»

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

В большинстве случаев название атрибута id на странице уникальное.

Метод выбора – Селектор CSS

Применяется, если у отслеживаемого элемента нет атрибута id, а также если нам нужно отследить несколько элементов.

Например, у нас на сайте есть несколько форм отправки. У каждой из них есть свой уникальный id. Отслеживание всех форм через «Идентификатор» нам бы не подошло. А вот привязать метод выбора через «Селектор CSS» элементов вполне можно.

Совет: если не знаете, за что зацепиться, а нужно прослушивать конкретный элемент – цепляйтесь за его CSS-селектор. Получить его легко можно через консоль разработчика (в браузере Google Chrome вызывается через клавишу F12, см. скриншот выше).

Правило запуска этого триггера

Правило запуска триггера

При перезагрузке страницы триггер сработает повторно;

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

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

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

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

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

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

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

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

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

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

Другое

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

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

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

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

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

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

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

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

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

Таймер

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

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

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

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

gtm.timer в Data Layer

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Как использовать Google Tag Manager

Google Analytics и Яндекс.Метрика давно стали необходимыми инструментами для любого сайта. Чтобы воспользоваться такими сервисами, достаточно добавить их код на свой ресурс. Это несложно, но здесь могут возникнуть некоторые трудности – обычно они начинаются в тех случаях, когда требуется внести изменения в уже добавленный код. Для начинающего вебмастера сделать это довольно проблематично – чуть что заденешь, и весь сайт полетит. Выходом из ситуации может стать специальный сервис от Google – Tag Manager.

Давайте разберемся, что умеет этот инструмент и как им воспользоваться.

Что такое Google Tag Manager

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

Стоит также понимать, что GTM – это не единственный сервис в своем роде, существуют такие системы, как Tealium, Adobe Dynamic Tag Manager, Yahoo Tag Manager. Но почему же все выбирают Google? Рассмотрим далее.

Почему Google Tag Manager

Обычно выделяют следующие преимущества сервиса:

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

Настройка Google Tag Manager

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

В данном случае файл, в котором был прописан код, называется index.html. Также он может именоваться как header.php или как-то иначе, если сайт расположен на CMS.

Основные параметры

Прежде чем переходить к настройкам сервиса, давайте остановимся на некоторых понятиях, относящихся к GTM. Это контейнер, тег, триггер и переменная – именно они нас встречают на главной странице сервиса.

Объясняю на пальцах: в каждом аккаунте есть как минимум один контейнер. В нем располагается один или несколько тегов – например, код Google Analytics. Для него устанавливается триггер, который определяет условия срабатывания тега и отправки им данных. После того как триггер срабатывает, он считывает определенную переменную. Например, встроенная переменная Click Text содержит текст, а Click URL — URL. Данный триггер активируется, если значение переменной совпадает с заданными пользователем параметрами: кликом по элементу с указанным текстом или URL.

Именно с переменных и начинается базовая настройка Google Tag Manager.

Настройка переменных

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

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

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

Пройдемся по каждому типу встроенных переменных:

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

Настройка триггеров

Для начала давайте рассмотрим основные параметры триггеров, а затем перейдем к их настройке. Всего их 4 типа:

Просмотр страницы

Клик

Взаимодействия пользователей

Другое

Вот такой функционал поддерживают триггеры. Давайте создадим один триггер, который будет взаимодействовать с переменной. Для этого выполним следующее:

Готово! Мы создали свой первый триггер. При необходимости вы можете настроить более точное срабатывание с помощью дополнительных параметров.

Настройка тегов

Вот мы и пришли к самому интересному: после того как переменные были определены, а триггеры настроены, можно переходить к тегам. Их настройка начинается в разделе «Теги» с помощью кнопки «Создать».

В меню конфигуратора мы увидим два блока «Конфигурация тега» и «Триггеры». Первым делом нам понадобится верхний раздел – перейдем в него и посмотрим, что там находится.

Здесь мы можем выбрать один из тегов, который соответствует нужному нам сервису. Пусть это будет «Google Аналитика: Universal Analitics».

После этого перед нами отобразится окно настроек выбранного тега. Так как мы хотим использовать Google Analytics, потребуется добавить идентификатор отслеживания. Чтобы это сделать, отмечаем пункт «Включить переопределение настроек в этом теге» и вводим значение.

Теперь нам нужно привязать к этому тегу триггер – для этого на этой же странице открываем блок «Триггеры» и выбираем тип отслеживания просмотра страниц «All Pages». В данном случае мы используем триггер, который был автоматически сгенерирован сервисом. Если вы ранее создавали собственный тег, то можете добавить его, но только в том случае, если он подходит под данное действие.

В завершение сохраняем созданный нами тег.

Готово! Тег был создан, теперь давайте проверим его работоспособность – для этого в Google Tag Manager есть специальная функция «Предварительный просмотр».

На отобразившейся странице вводим ссылку на свой сайт и жмем «Start».

После этого будет выполнен переход на сайт. Если на панели отладки появится тег, то поздравляю. Все получилось!

Осталось опубликовать контейнер с созданным тегом. Для этого на главной странице выбираем «Отправить».

На этом настройка Google Tag Manager завершена. Как только вы нажмете на кнопку «Отправить», перед вами отобразится новое окно, в котором можно указать название версии и ее описание. После внесения изменений останется нажать на кнопку «Опубликовать».

Теперь вы знаете, как можно использовать Google Tag Manager. Спасибо за внимание!

Источник