Пользовательские шаблоны в Google Tag Manager: как создать собственный шаблон

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

О том, что такое пользовательские шаблоны, и чем они могут быть полезны, читайте тут.

В этой статье я рассмотрю, как создать собственный шаблон на примере шаблона переменной.

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

выбрать значения конкретного поля. 

Такой шаблон можно использовать, например, при настройке динамического ремаркетинга в Facebook/Instagram чтобы передать только айдишники товаров. 

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

то в качестве входного массива используем переменную уровня данных ecommerce.purchase.products. На выходе получаем строку из разделенных запятой айдишников товаров, которую можно отправить с помощью пикселя Facebook: ‘12345, 67890’.

Итак, переходим в режим создания шаблона:

Создание шаблона

Информация

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

Вкладка «Информация»

Поля

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

Вкладка «Поля»

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

Настройка поля

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

  • inputArray – массив объектов;
  • field – поле, которое должно быть добавлено в новый массив.
 Добавление новых полей

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

Активация возможности добавления переменных

Кстати, на панели справа сразу видно, как ваш шаблон будет выглядеть в интерфейсе GTM:

Предварительный просмотр шаблона

Код

На вкладке «Код» в поле вставляем свой пользовательский код.

Вкладка «Код»

Для работы с пользовательскими шаблонами используется Изолированный JavaScript (Sandboxed JavaScript). Если при создании шаблона вы копируете стандартный JS-код переменной, который использовали в GTM, учтите, что он  должен претерпеть некоторые изменения. Подробнее об особенностях и ограничениях работы с изолированной версией JavaScript смотрите тут. Обязательно читайте оригинальную версию справки, в переводе я замечала ошибки. Также важно отметить, что в изолированной версии работа с полями, которые мы задали на предыдущем шаге, реализована с помощью глобальной переменной data. Поэтому обращение к ним выглядит следующим образом: data.inputArray,  data.field.

Разрешения

Вкладка «Разрешения»

Для решения ряда задач в изолированном скрипте JavaScript может понадобиться API пользовательских шаблонов. Обращение по API осуществляется посредством метода require():

const myAPI = require(‘myAPI’);

Если в коде происходит обращение по API с помощью метода require(), на вкладке «Разрешения» автоматически появится информация о требуемых разрешениях. 

Перечень API пользовательских шаблонов.

Тесты

На вкладке тесты можно проверить работоспособность кода пользовательского шаблона. Как создавать и проводить тесты, описано тут. Для этого скрипта я не добавляла тесты, так как код довольно простой, плюс я стараюсь в интерфейс ГТМ добавлять уже проверенные и отлаженные скрипты.

Создание переменной по шаблону

Создаем новую переменную по шаблону. Если вы создавали собственный шаблон, он сразу будет доступен в разделе «пользовательские шаблоны» при клике на «Конфигурация переменной».

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

Поиск в галерее шаблонов
Импорт шаблона переменной

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

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

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

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

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

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

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

Заполнение поля Field

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

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

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

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

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

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

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

Если вы не хотите публиковать свои шаблоны в Галерее, но хотите использовать их в других аккаунтах, можно экспортировать шаблон и затем импортировать его в нужный аккаунт. Это делается в меню редактирования шаблона:

Экспорт и импорт шаблонов

Для импорта в аккаунте  нужно создать пустой шаблон и в редакторе шаблонов выбрать «Импортировать».