Пользовательские шаблоны в Google Tag Manager: как создать собственный шаблон
О том, что такое пользовательские шаблоны, и чем они могут быть полезны, читайте тут.
В этой статье я рассмотрю, как создать собственный шаблон на примере шаблона переменной.
На developers есть мануал по созданию шаблона переменной, которая преобразует массив значений в строку. На базе этого примера я реализовала шаблон переменной, которая получает на вход массив объектов и возвращает значения некоторых полей этих объектов. То есть с помощью такого шаблона можно из массива объектов Array_Of_Objects вида
|
1 2 3 4 5 6 7 8 9 10 |
'Array_Of_Objects': [{ 'field_name': 'name_1', 'field_id': '001', 'field_price': '15' }, { 'field_name': 'name_2', 'field_id': '002', 'field_price': '30' }] |
выбрать значения конкретного поля.
Такой шаблон можно использовать, например, при настройке динамического ремаркетинга в Facebook/Instagram чтобы передать только айдишники товаров.
К примеру, если нужно получить идентификаторы продуктов из массива ‘products’ в структуре данных для расширенной электронной торговли:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
'ecommerce': { 'purchase': { 'actionField': { 'id': 'T12345', 'affiliation': 'Online Store', 'revenue': '35.43', 'tax':'4.90', 'shipping': '5.99', 'coupon': 'SUMMER_SALE' }, 'products': [{ 'name': 'Triblend Android T-Shirt', 'id': '12345', 'price': '15.25', 'brand': 'Google', 'category': 'Apparel', 'variant': 'Gray', 'quantity': 1, 'coupon': '' }, { 'name': 'Donut Friday Scented T-Shirt', 'id': '67890', 'price': '33.75', 'brand': 'Google', 'category': 'Apparel', 'variant': 'Black', 'quantity': 1 }] } } |
то в качестве входного массива используем переменную уровня данных 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’ в структуре данных для расширенной электронной торговли:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
'ecommerce': { 'purchase': { 'actionField': { 'id': 'T12345', 'affiliation': 'Online Store', 'revenue': '35.43', 'tax':'4.90', 'shipping': '5.99', 'coupon': 'SUMMER_SALE' }, 'products': [{ 'name': 'Triblend Android T-Shirt', 'id': '12345', 'price': '15.25', 'brand': 'Google', 'category': 'Apparel', 'variant': 'Gray', 'quantity': 1, 'coupon': '' }, { 'name': 'Donut Friday Scented T-Shirt', 'id': '67890', 'price': '33.75', 'brand': 'Google', 'category': 'Apparel', 'variant': 'Black', 'quantity': 1 }] } } |
то в качестве входного массива используем переменную уровня данных ecommerce.purchase.products:
Далее в поле Field задаем свойство объекта, которое хотим добавить в массив. Так как в моем примере это id,
соответственно, и в поле указываю id.
Сохраняем и переходим в режим отладки.
Можем убедиться, что в созданную по шаблону переменную записались нужные идентификаторы товаров из массива dataLayer:
Как добавить пользовательский шаблон в Галерею
Для того, чтобы отправить свой пользовательский шаблона в Галерею, нужно подготовить файлы проекта в соответствии с этим руководством, загрузить на GitHub и отправить шаблон в галерею.
Экспорт и импорт пользовательских шаблонов
Если вы не хотите публиковать свои шаблоны в Галерее, но хотите использовать их в других аккаунтах, можно экспортировать шаблон и затем импортировать его в нужный аккаунт. Это делается в меню редактирования шаблона:
Для импорта в аккаунте нужно создать пустой шаблон и в редакторе шаблонов выбрать «Импортировать».