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

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

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

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

'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’ в структуре данных для расширенной электронной торговли:

'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’ в структуре данных для расширенной электронной торговли:

 '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 и отправить шаблон в галерею.

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

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

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