Пользовательские шаблоны в 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.