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

eSputnik дає змогу персоналізувати віджети за допомогою динамічних тегів (Merge Tags) на основі п'яти типів даних:

• Data layer (шар даних) – це структура, що зберігає дані про дії користувачів на сайті. Наприклад, у віджеті може відображатися знижка на товари з категорії, яку наразі переглядає користувач.
• URL query параметр (параметри рядка запиту) — пара "ключ=значення" у рядку після ? (наприклад, https://shop.ua/product/123?coupon=PARTNER25), яку часто використовують для передачі персональних ідентифікаторів клієнтів, промокодів або джерела трафіку.
• JavaScript variable (змінна JavaScript) — будь-яка змінна у глобальній області видимості JS-коду сторінки. Ці змінні дозволяють персоналізувати віджети такими даними, як вартість кошика відвідувача, статус підписки, рівень лояльності тощо.
• Cookie — дані зі збережених у браузері cookie-файлів вашого домену. Дозволяють персоналізувати віджети на основі джерела переходу, статусу авторизації або попередніх дій користувача. Зберігаються між сесіями та перезавантаженнями сторінки.
• Local storage — дані з браузерного сховища вашого домену. Як і cookie, зберігаються між перезавантаженнями сторінки, але не передаються на сервер із кожним запитом. Підходять для збереження поведінкових даних на стороні клієнта: кількість переглядів, завершені дії, налаштування користувача тощо.

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

📘

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

Ті самі типи даних — Data layer, JavaScript variable, Cookie та Local storage — також доступні як умови в правилах виклику віджетів. Використовуйте їх для керування тим, коли і кому відображається віджет, а не лише для персоналізації його тексту.

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

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

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

Використання параметрів URL query

Додайте потрібні query параметри до посилань на ваш сайт, наприклад, https://shop.ua/product/123?coupon=PARTNER25. Коли відвідувач перейде за таким посиланням, йому буде показаний віджет зі значенням query параметра, наприклад, "Введіть код PARTNER25 і знижка 25 % застосується автоматично".

Налаштування змінних JavaScript на сайті

Щоб надсилати значення змінних до eSputnik, додайте скрипт

• безпосередньо у код вашого сайту
• або у Користувацький тег HTML Google Tag Manager (детальніше).

Формат скрипту:

<script>
  esputnik('addVariables', { variableName: value });
</script>

Наприклад, щоб передати статус підписки:

<script>
  esputnik('addVariables', { subscribed: false });
</script>

Також можна задати декілька змінних одночасно, наприклад:

<script>
  esputnik('addVariables', {
    user_age: 25,
    user_status: 'vip'
  });
</script>

Дані зберігатимуться на сайті до перезавантаження або переходу на іншу сторінку (поведінка аналогічна до Data layer).

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

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

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

3. Налаштуйте Merge tag:

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. URL query параметр

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

3.3. JavaScript variable

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

3.4. Cookie

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

📘

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

• eSputnik може зчитувати лише cookie вашого домену — сторонні cookie недоступні.
• HttpOnly cookie недоступні для JavaScript і тому не можуть використовуватися в Merge Tags.

3.5. Local storage

• Введіть ключ Local storage та приклад його значення для попереднього перегляду віджета.

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

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

• Кейс:

Користувач переглядає товари певної категорії на вашому сайті. Ви хочете привернути його увагу, відобразивши попап, який пропонує 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

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

Персоналізація пропозиції за рівнем лояльності

• Кейс:

Ви хочете показувати VIP-клієнтам попап з ексклюзивною пропозицією, а решті відвідувачів — стандартне промо. Рівень лояльності доступний у вашій системі після авторизації користувача.

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

1. Передайте рівень лояльності через JS-змінну:

<script>
  esputnik('addVariables', { loyalty_tier: 'vip' });
</script>

2. Використайте змінну як Merge Tag у тексті попапа: "Для вас як учасника програми {{loyalty_tier}} — особлива пропозиція".

Або створіть окремий попап для VIP-клієнтів і в правилах виклику вкажіть умову: JavaScript variable loyalty_tier дорівнює vip.

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

Персональне вітання для відвідувачів із партнерського сайту

• Кейс:

Відвідувач перейшов на ваш сайт за реферальним посиланням від партнера. Ви хочете показати йому персоналізований попап з ексклюзивним промокодом або спеціальним вітанням одразу при першому відвідуванні.

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

Назва cookie: referral, приклад значення: partner123.

Merge Tag підставить значення в текст попапа: "Вітаємо від {{referral}}! Спеціально для вас — знижка 15%".

Таргетинг за переглянутими категоріями

• Кейс:

Ваш сайт зберігає в cookie категорії товарів, які переглядав користувач. Ви хочете показати релевантний попап — наприклад, пропозицію аксесуарів до категорії, що зацікавила відвідувача.

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

Назва cookie: lastViewedCategory, приклад значення: Взуття.

Merge Tag підставить значення в текст попапа: "Нова колекція {{lastViewedCategory}} вже тут!".

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

Персональна рекомендація за результатом квізу

• Кейс:

На вашому сайті є конфігуратор або квіз для підбору товару. Після завершення результат зберігається в Local storage. Ви хочете показати попап із персональною рекомендацією — одразу або під час наступного відвідування.

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

Ключ Local storage: recommended_product, приклад значення: Бігові кросівки.

Merge Tag підставить значення в текст попапа: "За вашими відповідями вам підійдуть {{recommended_product}}. Ось знижка 10% на перше замовлення".

Нагадування про бонусні бали

• Кейс:

Після авторизації ваш сайт записує баланс бонусних балів користувача в Local storage. Ви хочете нагадати про них у попапі, щоб стимулювати покупку.

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

Ключ Local storage: bonus_points, приклад значення: 350.

Merge Tag підставить значення в текст попапа: "У вас {{bonus_points}} бонусних балів — використайте їх до кінця місяця".

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