Підставлення даних з сайту через динамічні теги

Шар даних (Data Layer) – це структура, що зберігає дані про дії користувачів на сайті, а динамічні теги (Merge Tags) дозволяють підставляти ці дані у віджети для персоналізації їх контенту. Наприклад, у віджеті може відображатися знижка на товари з категорії, яку наразі переглядає користувач.

Розглянемо, як знайти потрібні дані у Data Layer вашого сайту і додати відповідні Merge Tags до віджетів, щоб забезпечити високоперсоніфікований користувальницький досвід, що сприятиме залученню та покращенню коефіцієнтів конверсії.

Пошук типів Data Layer на вашому сайті

Відкрийте Developer Tools вашого браузера (натисніть Ctrl+Shift+I на Windows чи Cmd+Option+I на Mac, або клікніть сторінку правою кнопкою миші та виберіть Inspect).

  1. Перейдіть на вкладку Console.
  2. Введіть dataLayer і натисніть Enter.
  3. Розгорніть список, щоб переглянути поточну структуру та типи даних Data Layer.
Data Layer

Додавання Merge Tags у віджети

  1. Перейдіть до розділу “Сайт” — “Віджети” і відкрийте потрібний віджет, або створіть новий.
“Сайт” — “Віджети”
  1. Виділіть текст в полі, де відбуватиметься персоналізація, натисніть опцію Merge tags та виберіть Data layer.
Data layer
  1. Заповніть наступні поля:
  • Data Layer Event: Укажіть назву події.
  • Шлях до змінної: Введіть точний шлях до потрібних даних у Data Layer.
  • Приклад значення: Надайте зразок значення для попереднього перегляду.
Заповніть поля

📘

Зверніть увагу

  • Поле eventName є необов’язковим; воно потрібне, лише якщо ваш Data Layer відповідає структурі, рекомендованій Google. Навіть якщо ваші події не мають назви, система знайде потрібні параметри за шляхом у форматі ecommerce.items.0.price.
  • Якщо в Data Layer існує кілька подібних параметрів або Data Layer дублюється, система використає останній, система використовує останній з них.
  • Переконайтеся, що ви вводите назви параметрів точно так, як вони відображаються в Data Layer, щоб система змогла знайти їх. Також назви параметрів мають відповідати вимогам Google.
Parameter names

Приклади використання

Відображення переглянутої товарної категорії у віджеті

  • Кейс:

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

  • Налаштування:
  1. Data layer event: Вкажіть подію view_item, з якої отримуватимуться дані.
Data Layer Event
  1. Шлях до даних: Відкрийте Developer Tools свого сайту та знайдіть подію view_item в Data Layer.
view_item

Визначте властивість, яка містить інформацію про категорію товару (у нашому прикладі — item_category).

item_category

Клікніть правою кнопкою миші рядок, що містить item_category, і скопіюйте його шлях властивості.

Скопіюйте його шлях властивості

Вставте дані в поле “Шлях до змінної”, та видаліть початкові номери масиву разом з крапкою (“13” у нашому прикладі).

Шлях до змінної
  1. Приклад значення: Введіть довільне значення, наприклад — Jewellery, у поле “Приклад значення”, щоб переглянути, як виглядатиме віджет.
Приклад значення

Нагадування про покинутий кошик із динамічною інформацією про товар

  • Кейс:

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

  • Налаштування:
  1. Data layer event: add_to_cart

  2. Шлях до змінної: ecommerce.items[0].item_name

add_to_cart
  1. Приклад значення: Item name
Item name

Після збереження попапа налаштуйте його правила виклику, як то час, проведений на сайті, неактивність або прибирання курсора зі сторінки.

Правила виклику

Збільшення загальної суми замовлення

  • Кейс:

Щоб заохотити клієнтів збільшити загальну суму кошика, ви можете показати динамічне повідомлення на кшталт: "Витратьте $300, щоб отримати знижку 10%. Загальна сума вашого кошика становить N", де "N" динамічно замінюється на поточну вартість кошика.

  • Налаштування:
  1. Data layer event: view_cart

  2. Шлях до змінної: checkout.total_value

view_cart
  1. Приклад значення: Total value
Total value

Можливі проблеми, на які варто звернути увагу

ПроблемаРезультат
Відсутній Data LayerВіджет не відображатиметься
Недійсний шляхПорожній або неправильний шлях не дозволить системі отримати необхідні дані
Шлях веде до об'єкта або масиву об'єктівВіджет не відображатиметься
Шлях веде до масиву примітивів (наприклад, чисел або рядків)Значення відображатимуться розділеними комами та пробілами