Шаблони користувача в 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 і відправити шаблон до галереї.

Експорт та імпорт шаблонів користувача

Якщо ви не хочете публікувати свої шаблони в Галереї, але хочете використовувати їх в інших облікових записах, можна експортувати шаблон і потім імпортувати його в потрібний обліковий запис. Це робиться в меню редагування шаблону:

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