Підставлення даних з сайту у віджети

eSputnik може використовувати дані з вашого сайту для персоналізації тексту віджетів і автоматичного заповнення полів форми.

Для персоналізації тексту за допомогою динамічних тегів (Merge Tags) доступні п’ять типів даних:

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

Отримані значення можна використовувати двома способами:

• Динамічні теги підставляють дані в заголовки, описи, кнопки та інші текстові елементи віджета. Для них доступні всі п’ять типів даних.
• Автозаповнення додає значення в поля форми, щоб відвідувачу не доводилося вводити вже відому інформацію повторно. Для нього доступні всі п’ять типів даних зі списку вище, а також Статичне поле — поле контакту в eSputnik, наприклад Email.

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

Відкрийте Developer Tools у браузері: натисніть Ctrl+Shift+I у Windows або Cmd+Option+I у macOS. Також можна клікнути сторінку правою кнопкою миші та вибрати Inspect.

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

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

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

Якщо потрібно передати кілька значень, розділяйте параметри символом &:

https://shop.ua/product/123?coupon=PARTNER25&source=partner

Налаштування змінних 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.

Додавання динамічних тегів у текст віджета

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

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

3. Налаштуйте динамічний тег відповідно до вибраного джерела.

Data layer

• Data layer Event — укажіть назву події.
• Шлях до змінної — введіть точний шлях до потрібного значення в Data layer.
• Приклад значення — додайте зразок, щоб перевірити вигляд віджета в редакторі.

URL query параметр

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

JavaScript variable

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

Cookie

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

Local storage

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

Автозаповнення полів форми

Автозаповнення підставляє у форму дані, які вже відомі про відвідувача. Наприклад, можна додати значення поля контакту Email з eSputnik, ім’я з Data layer, email із параметра URL або номер телефона з cookie. Користувачеві залишиться перевірити значення та надіслати форму.

Функція доступна для таких полів:

• Email;
• Phone;
• First Name;
• Last Name;
• текстові поля.

У списку джерел доступні такі опції:

• Статичне поле — поле контакту в eSputnik, наприклад Email;
• URL query параметр — значення параметра в URL;
• JavaScript variable — значення змінної JavaScript;
• Local storage — значення з браузерного сховища;
• Cookie — значення з cookie вашого домену;
• Data layer event — значення параметра з події Data layer.

Щоб налаштувати автозаповнення:

1. Відкрийте віджет у редакторі та виберіть потрібне поле форми.
2. У налаштуваннях поля активуйте автозаповнення.

3. Виберіть одну з доступних опцій.
4. Заповніть параметри, що з’являться для вибраного варіанта:

• виберіть потрібне поле контакту eSputnik для опції Статичне поле, наприклад Email;
• укажіть назву параметра для опції URL query параметр;
• укажіть назву змінної для JavaScript variable;
• укажіть ключ для Local storage;
• укажіть назву cookie для Cookie;
• укажіть подію та шлях до потрібного значення для Data layer event.

5. Збережіть віджет і перевірте автозаповнення на сайті з тестовими даними.

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

Приклади автозаповнення

Якщо значення змінюється залежно від відвідувача, перевірте віджет із кількома тестовими наборами даних.

Приклади використання Data layer у динамічних тегах

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

Кейс

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

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

1. У полі Data layer Event укажіть подію view_item, з якої система отримуватиме дані.

2. Відкрийте Developer Tools на сайті та знайдіть подію view_item у Data layer.

3. Знайдіть властивість із назвою категорії товару. У нашому прикладі це item_category.

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

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

6. У полі Приклад значення введіть зразок, наприклад 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. Передайте рівень лояльності через змінну JavaScript:

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

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

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

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

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

Кейс

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

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

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

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

Пропозиція за переглянутою категорією

Кейс

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

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

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

Динамічний тег підставить значення в текст попапа: Нова колекція {{lastViewedCategory}} вже тут!

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

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

Кейс

На сайті є квіз або конфігуратор для підбору товару. Після завершення результат зберігається в Local storage. Покажіть його у віджеті одразу або під час наступного відвідування.

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

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

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

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

Кейс

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

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

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

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

Можливі проблеми

Динамічні теги

Автозаповнення

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