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

Что такое 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 ID вставляем идентификатор пикселя вашего аккаунта.

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

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

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

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

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

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

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

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

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

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

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

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

Если вкратце,  эта переменная получает на вход массив объектов и возвращает значения выбранного свойства этих объектов. То есть с помощью такого шаблона можно из массива объектов 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'
       }]   

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

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

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

'ecommerce': {
    'purchase': {
      'actionField': {...}
      'products': [{         
        'id': '12345',
        ...                  
       },
       {
         'id': '67890',
         ...       
        }]
    }
  }

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

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

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

Например:

let user = {     // объект
  name: "John",  // под ключом "name" хранится значение "John"
  age: 30        // под ключом "age" хранится значение 30
};

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

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

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

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

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

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

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

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

{
   'transactionId': '1234',
   'transactionAffiliation': 'Acme Clothing',
   'transactionTotal': 38.26,
   'transactionTax': 1.29,
   'transactionShipping': 5,
   'transactionProducts': [{
       'sku': 'DD44',
       'name': 'T-Shirt',
       'category': 'Apparel',
       'price': 11.99,
       'quantity': 1
   },{
       'sku': 'AA1243544',
       'name': 'Socks',
       'category': 'Apparel',
       'price': 9.99,
       'quantity': 2
   }]
}

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

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

view_list: {
 products: [{
 product_name: 'Шторка солнцезащитная CarLife',
 product_id: '9872355',
 product_price: '2.75'
 },
 {
 product_name: 'Органайзер автомобильный Smart & Simple',
 product_id: '5767753',
 product_price: '23.17'
 }]
}

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