Пользовательские шаблоны в Google Tag Manager: что это и когда они могут быть полезны

Пользовательские шаблоны в GTM

Что такое Custom Templates в Google Tag Manager

Custom Templates (пользовательские шаблоны) – это шаблоны тегов и переменных, которые можно настроить самостоятельно и поделиться ими с другими пользователями.

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

Собственные шаблоны тегов и переменных создаются в разделе «Шаблоны»,

Раздел «Шаблоны»

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

Галерея шаблонов

Когда полезны пользовательские шаблоны

Пользовательские шаблоны могут быть полезны в следующих случаях:

  • Чтобы сэкономить время специалиста: создав шаблон один раз, его можно использовать повторно в других аккаунтах;
  • Для начинающих пользователей GTM: если пока сложно делать какие-то манипуляции с кодом в GTM, можно использовать готовые решения более опытных коллег;
  • Для продвинутых пользователей GTM: чтобы создавать паттерны для делегирования задач по настройке отслеживания менее опытным коллегам.

Как использовать готовые Custom Templates

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

Пример использования кастомного шаблона тега

Рассмотрим, как воспользоваться кастомными шаблонами других пользователей. В качестве примера я возьму пользовательский шаблон тега Facebook Pixel, созданный  Simo Ahava для отправки данных в Facebook. 

Facebook Pixel — это код отслеживания, который передает данные о действиях пользователей сайта и помогает измерять эффективность рекламы в Facebook/Instagram. Подробнее о возможностях Facebook Pixel читайте тут.

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

Кастомный шаблон Facebook Pixel

и добавляем в рабочую область.

Добавление Facebook Pixel в рабочую область

Для каждого шаблона предоставляется информация о том, что этот тег из себя представляет, а также, какие разрешения необходимы для его работы. 

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

Загруженный шаблон Facebook Pixel

В поле Facebook Pixel ID вставляем идентификатор пикселя вашего аккаунта.

Идентификатор в поле Facebook Pixel ID

Как посмотреть идентификатор пикселя Facebook: 

Просмотр идентификатора пикселя Facebook

Указываем тип отправляемого события. Так как это базовый тег отправки данных с сайта, выбираем PageView.

Тип отправляемого события PageView

В качестве условия активации используем встроенный триггер «Все страницы». 

Публикуем контейнер и проверяем корректность установки. Как убедиться, что пиксель установлен правильно, я писала тут.

Вуаля! Мы установили пиксель Facebook на сайт без каких-либо касаний с кодом. 

По аналогии c PageView в выпадающем списке можно выбрать и другие стандартные события. Если есть желание передавать пользовательское событие, это тоже реализуемо:

Выбор стандартного события

Подробнее о конфигурации и возможностях этого шаблона можно почитать в документации.

Как создать собственный шаблон

Процесс создания собственного шаблона на примере шаблона переменной я вынесла в отдельную статью.

Как использовать шаблон переменной

Создаем новую переменную по шаблону. Для этого нужно импортировать шаблон так же, как мы делали с тегом:  Шаблоны – Шаблоны переменных – Поиск в галерее.

Поиск шаблона в галерее

Как использовать шаблон переменной я покажу на примере своего шаблона Property Values from Array of Objects, создание которого я подробно описывала тут

Импорт готового шаблона

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

выбрать значения конкретного свойства, допустим, field_id и на выходе получить строку вида: ‘001, 002’. Такой шаблон можно использовать, например, при настройке динамического ремаркетинга в Facebook/Instagram для передачи только айдишников товаров. 

В поле «Array of objects» вносим массив объектов, из которого хотим получить данные.

Поле «Array of objects»

Например, если нужно получить идентификаторы продуктов из массива ‘products’ в структуре данных для расширенной электронной торговли:

то в качестве входного массива используем переменную уровня данных ecommerce.purchase.products:

Переменная уровня данных

Опишу подробнее, почему я обращаюсь к ‘products’ именно таким образом: ecommerce.purchase.products.

В JavaScript для хранения коллекций различных значений используются объекты. Объект может быть создан с помощью фигурных скобок {…} со списком свойств. Свойство объекта – это пара «ключ: значение», где ключ – это строка, значение может быть чем угодно. После имени свойства стоит двоеточие «:», и затем указывается значение свойства. 

Например:

Обращение к свойствам реализуется через точку. То есть чтобы получить значение первого свойства объекта user, мы напишем так:  user.name, второго: user.age.

Возвращаясь к фрагменту кода с данными о транзакции для расширенной электронной торговли, видим, что у ‘ecommerce’ есть свойство ‘purchase’. ‘purchase’ в свою очередь имеет свойства ‘actionField’ и ‘products’. Поэтому, чтобы обратиться к массиву ‘products’ как к свойству объекта, используем точку: ecommerce.purchase.products.

Далее в поле Field задаем свойство объекта, которое хотим добавить в массив. Так как в моем примере это id,

Фрагмент кода с данными транзакции

соответственно, и в поле указываю id. 

Сохраняем и переходим в режим отладки.

Режим отладки

Можем убедиться, что в созданную по шаблону переменную записались нужные идентификаторы товаров из массива dataLayer:

Проверка записи идентификаторов

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

При структуре данных для стандартной электронной торговли 

в поле Array of objects будет переменная уровня данных transactionProducts, а в Field – строка sku.

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

в поле Array of objects будет переменная уровня данных view_list.products, а в Field – строка product_id.