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

eSputnik дозволяє персоналізувати віджети за допомогою даних із Data Layer або змінних JavaScript.

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

Також у динамічних тегах можна використовувати змінні JavaScript. Щоб додати ці змінні на сайт, необхідно виконати скрипт, наприклад, esputnik('addVariables', { subscribed: false }); . Дані зберігаються до перезавантаження або переходу на іншу сторінку (поведінка аналогічна до 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.

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

1. Перейдіть до розділу Сайт — Віджети і відкрийте потрібний віджет, або створіть новий.

2. Виділіть текст в полі, де відбуватиметься персоналізація, натисніть опцію Merge tag та виберіть Data layer або JavaScript variable.

3. Заповніть наступні поля:

3.1. Для Data Layer:

• Data Layer Event: Укажіть назву події.
• Шлях до змінної: Введіть точний шлях до потрібних даних у Data Layer.
• Приклад значення: Надайте зразок значення для попереднього перегляду.

📘

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

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

3.2. Для JavaScript Variable:

• Введіть назву змінної та приклад її значення для попереднього перегляду віджета.

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

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

• Кейс:

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

• Налаштування:

1. Data layer event: Вкажіть подію view_item, з якої отримуватимуться дані.

2. Шлях до даних: Відкрийте Developer Tools свого сайту та знайдіть подію view_item в Data Layer.

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

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

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

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

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

• Кейс:

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

• Налаштування:

1. Data layer event: add_to_cart

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

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

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

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

• Кейс:

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

• Налаштування:

1. Data layer event: view_cart

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

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

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