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

Июль 26, 2020

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

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

gtm.js, gtm.dom, gtm.load

Режим отладки - 3 события по умолчанию

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

gtm.js, gtm.dom, gtm.load

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.dom, gtm.load

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

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

Как вы уже знаете, события в режиме отладки отображаются в хронологическом порядке по мере их запуска. Каждое из них имеет свой порядковый номер. Container Loaded - первое событие на представленном примере.

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

gtm.js, gtm.dom, gtm.load

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 и срабатывает после завершения загрузки всей страницы и всех связанных ресурсов (загрузки таблиц стилей, изображений, фреймов), когда окно полностью загружено.

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

Для наглядности сравним время, через которое срабатывает каждое представленное событие. Воспользуемся расширением для браузера Adswerve - dataLayer Inspector+ и вкладкой Console. Обновив страницу, мы увидим переданные события с временной меткой:

gtm.js, gtm.dom, gtm.load

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

Примечание: временная метка включается в Google Chrome через Настройки - раздел Console - галочка Show timestamps.

На примере выше у нас событие 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 и обновим страницу:

gtm.js, gtm.dom, gtm.load

Консоль разработчика - вкладка Network

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

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

gtm.js, gtm.dom, gtm.load

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

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

  • если информация доступна до загрузки контейнера Google Tag Manager, и вы хотите, чтобы ваши теги срабатывали в самый ранний момент, вы можете отправлять данные сразу же, используя триггеры Пользовательское событие с именем gtm.js или Просмотр страницы (Page View).
  • если  вы хотите, чтобы ваши теги запускались после загрузки объектной модели документа, вы можете использовать триггеры Пользовательское событие с именем gtm.dom или Модель DOM готова (DOM Ready).
  • если вы не знаете, когда точно точно появляется доступ к элементу на странице, вы можете использовать триггеры Пользовательское событие с именем gtm.load или Window Loaded (Окно загружено).

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

Одностраничное приложение (SPA, Single Page Application) - это веб-сайт / веб-приложение, основанное на JavaScript-фреймворках, которое загружает весь контент, необходимый для навигации по сайту, при загрузке первой страницы. А когда пользователь взаимодействует со страницей, контент динамически подается через JavaScript вместо отправки запроса на сервер.

Поэтому, когда вы устанавливаете Google Tag Manager на своем SPA-сайте, первая загрузка запустит все три события gtm.js, gtm.dom, gtm.load. Но вы не увидите других таких событий, поскольку страница не перезагружается. Чтобы отслеживать последующие страницы в одностраничных приложениях, вам нужно использовать виртуальные страницы, а само отслеживание можно на основе триггера типа Изменение в истории (gtm.historyChange).

Метки:

Получайте бесплатные уроки и фишки

По контекстной, таргетированной рекламе и аналитике