Електронна комерція Plerdy через Google Tag Manager

Andrew Chornyy - 001
Andrew Chornyy

CEO Plerdy — експерт із SEO&CRO з більш ніж 14-річним досвідом.

Інструкція по додаванню скрипта в Google Tag Manager (GTM) для сторінки “Дякую” в магазині

Відкрийте ваш аккаунт Google Tag Manager.

  • Увійдіть в систему GTM, використовуючи ваші облікові дані.
  • Виберіть потрібний контейнер.

  • Після входу в систему ви побачите список ваших сайтів/контейнерів. Клацніть на потрібний вам контейнер, де ви хочете додати скрипт.
  • Створіть новий тег.

  • Клацніть на “New Tag” або “Новий тег” (залежно від мови інтерфейсу).
  • Надайте тегу назву, наприклад “Plerdy E-commerce Tracking”.
  • Налаштування тегу.

  • У розділі “Tag Configuration” виберіть “Custom HTML”.
  • Вставте наданий вами скрипт у вікно для коду:
    <script type="text/javascript" defer>
    var orderID = document.getElementById("order_id").innerText;
    var totalMoney = document.getElementById("total_money").innerText.replace('$', '');
    var quantity = document.getElementById("quantity").innerText;
    var plerdysendData = {
    'type': 'commerce',
    'data': {
    'order_id': orderID,
    'money': totalMoney,
    'quantity': quantity
    }
    }
    </script>

    Зверніть увагу на ID елементів ( order_id, total_money, quantity ). Вони повинні відповідати ID або class елементів на вашій сторінці.

    Якщо у вас є можливість використовувати класи замість ID та інші символи валют, ось як ви можете модифікувати код:

    1. Вибір елементів за класом: Для вибору елементів за допомогою класу використовуйте document.querySelector(‘.classname’). Ця функція повертає перший елемент, який відповідає вказаному селектору. Якщо у вас є кілька елементів з однаковим класом, і ви хочете взяти конкретний, вам потрібно використовувати document.querySelectorAll(‘.classname’)[index].
    2. Опрацювання різних символів валют: Я додав регулярний вираз, щоб видалити всі не-цифрові символи (включаючи знаки валют) з рядка.

    Ось модифікований код:
    <script type="text/javascript" defer>
    var orderID = document.querySelector(".order_id_class").innerText;
    var totalMoney = document.querySelector(".total_money_class").innerText.replace(/[^0-9.]/g, '');
    var quantity = document.querySelector(".quantity_class").innerText;
    var plerdysendData = {
    'type': 'commerce',
    'data': {
    'order_id': orderID,
    'money': totalMoney,
    'quantity': quantity
    }
    }
    </script>

    Замініть order_id_class, total_money_class та quantity_class на відповідні класи елементів вашої сторінки.
    Цей підхід видалятиме знаки як $ так і грн, а також інші символи, залишаючи тільки числа та крапки (для десяткових чисел). Тим не менше, будьте обережні, щоб ваша сторінка не містила інших символів, які можуть завадити коректному визначенню суми.

    Встановлення тригера.

  • У розділі “Triggering” клацніть на “Choose a trigger” або “Вибрати тригер” (залежно від мови інтерфейсу).
  • Створіть новий тригер, який буде активуватися на сторінці “Дякую” після завершення покупки.

  • Виберіть “Page View”.
  • Виберіть “Some Page Views”.
  • Встановіть умови, за якими тригер буде активований (наприклад, URL сторінки містить “thank-you” або інший ідентифікатор сторінки дякую в вашому магазині).

    Збережіть зміни.

  • Клацніть “Save” або “Зберегти” (залежно від мови інтерфейсу).
  • Публікуйте зміни.

  • Після того, як ви додали тег і встановили тригер, клацніть кнопку “Submit” або “Відправити”, щоб опублікувати зміни в вашому контейнері.
  • Тестування.

  • Використовуйте режим попереднього перегляду в GTM, щоб перевірити правильність роботи скрипта на вашому сайті перед тим, як його побачать ваші користувачі.
  • Тепер скрипт буде запускатися на сторінці “Дякую” кожного разу, коли користувач завершує покупку в вашому магазині.