Углубление в архитектуре TMS (теги и триггеры) поможет в реальной жизни выполнить простую отладку ваших настроек и понять, что именно происходит в бэкэнде, когда TMS работает.

Для включения любого веб-сайта или приложения в систему аналитики системы управления тегами (TMS) стали де-факто способом добавления любых тегов на веб-сайт. Помимо снижения зависимости от ИТ-команд, он предоставляет маркетологам множество преимуществ: производительность, гибкость маркетинга, меньше работы по кодированию, более быстрое начало работы, снижение затрат, производительность сайта и простота отладки.

В этой статье мы будем рассматривать веб-сайты, на которых аналитика реализована через двух лидеров рынка TMS, т. е. Google и Adobe.

Требования к программному обеспечению:

+ Гугл хром браузер.

+ Расширения Chrome: WASP, GA Debugger, ObservePoint, Adobe Experience Cloud Debugger.

Диспетчер тегов Google

Для GTM мы будем рассматривать демонстрационный сайт магазина товаров, который многие из нас могли видеть для учетной записи GA demo. Здесь мы будем понимать последовательность тегов из:

gtm.js в analytics.js в теги отслеживания.

Шаги интеграции GTM предполагают добавление стандартного кода с вашим идентификатором контейнера GTM. На этом демонстрационном сайте мы можем видеть из исходного кода скрипт GTM, добавленный на сайт. И как это срабатывает в бэкенде, можно увидеть с расширением WASP.

Затем gtm.js инициирует вызов analytics.js, в котором находится вся логика для Google Analytics.

Сценарий analytics.js загружает различные другие сценарии (если они настроены), необходимые для расширенной электронной торговли, расширенной атрибуции ссылок и т. д.

Триггеры post analytics.js, несколько просмотров страниц GA и теги событий настраиваются через GTM для отправки данных на серверы аналитики.

Данные магазина товаров отправляются в несколько ресурсов в GA:

Пример тега просмотра страницы: отправка данных в свойство GA UA-54516992–1, доступ к которому можно получить из демо-аккаунта GA:

Пример тега события: для отслеживания прокрутки:

Больше подробностей и возможностей GTM можно найти здесь.

Запуск Adobe

Последним продуктом TMS от Adobe является Adobe Launch. Дополнительная плата за запуск платформы не взимается. Он доступен для любого клиента Adobe Experience Cloud.

Более старый продукт TMS от Adobe — Dynamic Tag Manager DTM, его закатное обновление.

Демонстрационный сайт, предоставленный Adobe, можно найти здесь. На этом сайте развернуто несколько тегов:

TMS добавляется на веб-сайт с помощью примера кода, как показано ниже:

‹script src="//assets.adobedtm.com/launch-EN8689d0d2e7d84048be077a460fec531e.min.js" async›‹/script›

Неминифицированную версию можно увидеть, удалив .min из пути к файлу.

Расширение Adobe debugger chrome также можно использовать для дальнейшего изучения:

Далее мы рассмотрим последовательность тегов от launch-%environment_id%.min.js до AppMeasurement.min.jsи до тегов отслеживания.

Пример тега просмотра страницы: отправка данных в Report Suite: tmd-web-retail-prod1

Пример тега события:

Более подробную информацию и функции Adobe Launch можно найти здесь.

Чтобы начать работу с Adobe Analytics через Adobe Launch.

Быстрые действия:

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

  • тиалиум

Исследуйте https://www.munchkin.com/, ища тег

https://tags.tiqcdn.com/utag/munchkin/munchkinus/prod/utag.js

  • Прозрение

Исследуйте https://www.benenden.co.uk/, ища тег

https://nexus.ensighten.com/benenden/prod/Bootstrap.js

Ключевые выводы

  1. Если какой-либо тег перестал работать, начните с исходного кода веб-страницы, чтобы проверить, отсутствует ли код TMS.
  2. Ищите любые ошибки JS в консоли браузера, чтобы увидеть какие-либо блокираторы нашего кода.
  3. Все продукты TMS предоставляют режим или опцию отладки, используйте ее в полной мере.
  4. Сетевая панель в браузере даст вам хорошее представление о последовательности, в которой файлы JS и теги загружаются на сайт.

Заключительные мысли

Если вы начнете понимать вызовы JavaScript, происходящие в бэкэнде TMS, это поможет быстрее выявлять проблемы и решать их с помощью ИТ-команд, эффективно сообщая об основных причинах.

Удачного изучения !!!

Спасибо, что нашли время, чтобы просмотреть мою статью.