Шаблони користувача в Google Tag Manager: що це і коли вони можуть бути корисні

Що таке Custom Templates у Google Tag Manager

Custom Templates (користувацькі шаблони) – це шаблони тегів та змінних, які можна налаштувати самостійно та поділитися ними з іншими користувачами.

Шаблони корисні головним чином тому, що дозволяють обернути код користувача в зрозумілий інтерфейс і, відповідно, мінімізувати кількість помилок, які можуть виникнути у користувачів при роботі з кодом.

Власні шаблони тегів та змінних створюються в розділі «Шаблони».

Тут же можна виконати пошук по галереї шаблонів, створених іншими користувачами.

Коли шаблони користувача будуть корисні

Користувацькі шаблони можуть бути корисними в таких випадках:

• Щоб заощадити час спеціаліста: створивши шаблон один раз, його можна використовувати повторно в інших акаунтах;
• Для початківців користувачів GTM: якщо поки складно робити якісь маніпуляції з кодом у GTM, можна використовувати готові рішення більш досвідчених колег; досвідченим колегам.

Як використовувати готові Custom Templates

Коли перед вами стоїть завдання налаштування якогось нового тега або змінної, яких немає у списку вбудованих, і ви не знаєте, з якого боку до нього підійти, подивіться рішення інших користувачів, дуже ймовірно, що хтось уже вирішив це завдання і винаходити велосипед не доведеться.

Приклад використання кастомного шаблону тега

Розглянемо, як користуватися кастомними шаблонами інших користувачів. Як приклад я візьму шаблон тега Facebook Pixel, створений Simo Ahava для надсилання даних до Facebook.

Facebook Pixel — це код відстеження, який передає дані про дії користувачів сайту та допомагає вимірювати ефективність реклами у Facebook/Instagram. Докладніше про можливості Facebook Pixel читайте тут.

Отже, щоб отримати доступ до готових кастомних шаблонів тегів, потрібно на вкладці «Шаблони» перейти до галереї. Зі запропонованого списку вибираємо шаблон потрібного нам тега

і додаємо в робочу область.

Для кожного шаблону надається інформація про те, що цей тег являє собою, а також, які дозволи необхідні для його роботи.

Тепер при створенні нового тега ви зможете помітити, що список пропонованих спеціальних тегів поповнився завантаженим користувачем.

У полі Facebook Pixel ID вставляємо ідентифікатор пікселя вашого облікового запису.

Як переглянути ідентифікатор пікселя Facebook:

Вказуємо тип події, що відправляється. Так як це базовий тег відправлення даних із сайту, вибираємо PageView.

В якості активації використовуємо вбудований тригер «Всі сторінки».

Публікуємо контейнер та перевіряємо коректність установки. Як переконатися, що піксель встановлений правильно, я писала тут: https://odesseo.com.ua/piksel-facebook-s-pomoshchyu-google-tag-manager/.

Вуаля! Ми встановили піксель 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.