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

Шар даних (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.

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

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

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

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

• Data Layer Event: Укажіть назву події.
• Шлях до змінної: Введіть точний шлях до потрібних даних у 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

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