Пользовательские шаблоны в 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 вида:
|
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' }] |
выбрать значения конкретного свойства, допустим, field_id и на выходе получить строку вида: ‘001, 002’. Такой шаблон можно использовать, например, при настройке динамического ремаркетинга в Facebook/Instagram для передачи только айдишников товаров.
В поле «Array of objects» вносим массив объектов, из которого хотим получить данные.
Например, если нужно получить идентификаторы продуктов из массива ‘products’ в структуре данных для расширенной электронной торговли:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
'ecommerce': { 'purchase': { 'actionField': {...} 'products': [{ 'id': '12345', ... }, { 'id': '67890', ... }] } } |
то в качестве входного массива используем переменную уровня данных ecommerce.purchase.products:
Опишу подробнее, почему я обращаюсь к ‘products’ именно таким образом: ecommerce.purchase.products.
В JavaScript для хранения коллекций различных значений используются объекты. Объект может быть создан с помощью фигурных скобок {…} со списком свойств. Свойство объекта – это пара «ключ: значение», где ключ – это строка, значение может быть чем угодно. После имени свойства стоит двоеточие «:», и затем указывается значение свойства.
Например:
|
1 2 3 4 |
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:
Я подробно описала пример работы с данными для расширенной электронной торговли, но стоит понимать, что шаблон будет работать и в случае, когда объектный массив является частью структуры другого вида. Важно только правильно указать входные данные.
При структуре данных для стандартной электронной торговли
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
{ '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.
Для пользовательской структуры, например:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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.