Что означают 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, то увидим тот же самый результат:

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

Жизненный цикл 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.start для своих целей, например, для определения времени начала пользовательской сессии.

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

Примечание: некоторые события могут срабатывать ДО загрузки контейнера GTM. В этом случае 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. Обновив страницу, мы увидим переданные события с временной меткой:

Примечание: временная метка включается в 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 и обновим страницу:

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

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

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

• если информация доступна до загрузки контейнера 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).