Виклик віджета через JavaScript API

Використовуйте JavaScript API, щоб показувати віджет eSputnik за логікою, налаштованою на вашому сайті. Наприклад, віджет можна відкрити після реєстрації, додавання товару до кошика, завершення покупки або іншої визначеної дії.

Виклик eS('showForm', ...) показує вибраний віджет на сторінці, де встановлено скрипт вебтрекінгу eSputnik. Його можна додати безпосередньо до коду сайту або виконувати через Google Tag Manager. Щоб виконати власний код після надсилання форми відвідувачем, використовуйте виклик eS('onWidgetEvents', ...), описаний нижче.

Функція для показу віджета

eS('showForm', {
  formVariantId: 'f(form id)v(variant id)'
});

Параметри

Функція приймає один обов'язковий параметр:

Де скопіювати функцію

Готова функція з ідентифікатором вашого віджета відображається в налаштуваннях показу:

1. Відкрийте віджет у редакторі та перейдіть на вкладку Параметри.
2. У блоці Виклик віджета знайдіть розділ Може бути викликана по API.
3. Скопіюйте функцію, натиснувши іконку копіювання.

4. Додайте функцію до коду сайту в місці, де має виконуватися API-виклик, і опублікуйте зміни.

Функція доступна для будь-якого віджета — окремо вмикати цей спосіб виклику не потрібно.

Приклад: показ віджета за кліком на кнопку

Для простого показу віджета після кліку зазвичай достатньо налаштувати виклик за CSS-селектором — режим По кліку на HTML-елемент, описаний у статті Виклик віджета. JavaScript API використовуйте, якщо момент показу визначає власна логіка сайту.

<button id="show-discount-widget" type="button">
  Підписатися на знижки
</button>

<script>
  document
    .getElementById('show-discount-widget')
    .addEventListener('click', function () {
      eS('showForm', {
        formVariantId: 'f12345v12345'
      });
    });
</script>

У прикладі замініть f12345v12345 на значення вашого віджета.

Виклик через Google Tag Manager

1. Створіть тег типу Custom HTML.

2. Додайте скопійовану функцію:

   HTML

   <script>
     eS('showForm', {
       formVariantId: 'f12345v12345'
     });
   </script>

3. Налаштуйте тригер, який визначатиме момент виконання тега.

4. Опублікуйте контейнер і перевірте показ віджета.

Відстеження подій віджета

Щоб виконати власний код, коли відвідувач надсилає контактні дані у віджеті, — наприклад, передати подію у вашу аналітику — підпишіться на події віджета:

eS('onWidgetEvents', {
  formVariantId: 'f12345v12345'
}, function (event) {
  if (event.type === 'CONTACT_DATA_SUBMIT') {
    // ваш код, наприклад надсилання події в аналітику
    console.log('Відвідувач надіслав форму');
  }
});

Колбек реєструється для віджета, вказаного у formVariantId, і виконується щоразу, коли відбувається подія.

Параметри

Доступні події

Як перевірити результат

1. Опублікуйте віджет.
2. Відкрийте сторінку сайту, де додано функцію, і виконайте дію, яка її запускає.
3. Переконайтеся, що віджет з'явився. Він відображається одразу після виконання функції.

Якщо віджет не відображається

Віджет не з'являється після виконання дії

Ймовірна причина: на сторінці немає скрипта eSputnik, він блокується браузером чи розширенням, або віджет не опубліковано.

Рішення: перевірте, що скрипт установлений саме на цій сторінці й домені та завантажується без блокування, а віджет має статус Опубліковано.

У консолі браузера помилка eS is not defined

Ймовірна причина: функція виконується раніше, ніж скрипт eSputnik завантажився та ініціалізувався, або скрипт відсутній на сторінці.

Рішення: переконайтеся, що скрипт eSputnik установлений на сторінці, а функція виконується після його завантаження та ініціалізації. Якщо ви використовуєте Google Tag Manager, перевірте, що тег із функцією не спрацьовує раніше за завантаження скрипта eSputnik.

Функція виконується, але з'являється інший віджет або нічого не відбувається

Ймовірна причина: у функції вказано formVariantId іншого віджета.

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

Корисні посилання

• Виклик віджета
• Виклик віджета за змінними JavaScript
• Налаштування віджетів для сайту
• Створення pop-up-форм за допомогою Google Tag Manager або WordPress