ЯК ВІДСТЕЖУВАТИ ПОКУПКИ В ІНТЕРНЕТ-МАГАЗИНІ ЗА ДОПОМОГОЮ GTM?

Для будь-якого інтернет-магазину важливо знати хто, коли і які товари купує. Для цього Google пропонує безкоштовний сервіс Google Analytics 4, який надає багато можливостей для аналізу дій користувачів на сайті.

Для того, щоб повністю розкрити можливості Google Analytics 4, необхідно надсилати до сервісу коректні дані. Більшість сучасних CRM мають інтеграцію з GA4 і для передачі даних достатньо вказати в налаштуваннях код потоку аналітики. Але існують такі, в яких така функція платна або відсутня, тому для налаштування передачі даних у GA4 необхідно підключати розробника або налаштувати передачу даних за допомогою коду у GTM.

В цій статті ми покажемо як відстежити та передати до GA4 подію purchase (покупка).

Про що йде мова?

• Налаштування відстеження події purchase
• Отримання даних зі сторінки Підтвердження замовлення
• Збір даних та надсилання події до Google Analytics 4

Налаштування відстеження події purchase

Перед початком налаштування проаналізуйте сторінки сайту, та знайдіть елементи, з яких можна отримати дані. Звернувшись до Документації Google для події обов’язковими є наступні параметри:

• currency — 3-буквене значення валюти згідно ISO 4217;
• value — сума товарів, що додаються у кошик;
• items — список товарів, що додаються у кошик у вигляді масиву.

Також, на мою думку, необхідно передавати такий параметр як transaction_id (номер замовлення). Цей параметр не є обов’язковим, проте без нього Google Analytics 4 в звітах буде об’єднувати замовлення під назвою «(no set)».

Отримання даних зі сторінки Підтвердження замовлення

В різних інтернет-магазинах сторінка Подяки за замовлення має різний вигляд. Є сторінки, на яких відображається і номер замовлення, і список придбаних товарів, що дозволяє отримати всі дані на одній сторінці безпосередньо коли покупка відбулась. Але, що робити коли на сторінці Подяки відсутня така інформація? Зараз ми такий випадок і розберемо.

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

Для збору і збереження цих даних створіть в GTM-контейнері новий тег з типом «Custom HTML» і додайте код, що збере необхідні дані про список товарів та збереже їх у Local Storage.

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

То ж створіть новий тег в GTM-контейнері, дайте йому зрозумілу назву, тригером оберіть клік по кнопці «Checkout».

У тег додайте код та збережіть зміни:

<script>

 var items=[]

 var value = valueEl ? parseFloat(document.querySelector('div.total-figures').textContent.replace(/[^\d\.]/g, '')) : 0;

document.querySelectorAll('div.cart-row').forEach(function(productBlock) {

    var name = productBlock.querySelector('span.product-name > a').textContent.trim();

    var price = parseFloat(productBlock.querySelector('div.regular-price').textContent.replace(/[^\d\.]/g, ''));

    var quantity = productBlock.querySelector('input.count').value;

    var itemId = productBlock.dataset.productid;

    var item = {

        item_id: itemId,

        item_name: name,

        price: price,

        quantity: quantity,

        currency: 'USD'

    }

    items.push(item);

    })

    localStorage.setItem('items', JSON.stringify(items));

</script>

Що можна отримати з цього коду:

1. Кожну картку товару зі списку.
2. З кожної картки ID товару, назву товару, ціну та кількість.
3. Код створює об’єкт «item» з отриманими раніше параметрами.
4. Код зберігає об’єкт «item» до масиву «items».
5. Зберігає масив «items» у Local Storage.

Збір даних та надсилання події до Google Analytics 4

Тепер перейдіть до сторінки Подяки за замовлення. На неї користувач потрапляє після підтвердження замовлення, або його оплати, залежно від обраного способу оплати. Саме на цій сторінці маємо відправити подію purchase до Google Analytics 4.

На сторінці-прикладі можна побачити номер замовлення та суму замовлення, а от списку придбаних товарів немає, саме тому ми раніше створювали тег збереження цих даних і зараз можна їх отримати з Local Storage.

Збереження події purchase у dataLayer

У нашому GTM-контейнері створіть новий тег типу «Custom HTML», а тригером буде перегляд сторінки Page URL якої містить «/shop/complete/».

Додайте до тегу код.

<script>

var orderItems = JSON.parse(localStorage.getItem('items'));

var transactionEL = document.querySelector('#checkout > div > div > div.min-3.mobile-3.tablet-6.desktop-8.max-8.order-details-info > div > div:nth-child(3) > p:nth-child(2)');

var transactionId = parseFloat(transactionEL.textContent.replace(/[^\d\.]/g, ''));

var value = parseFloat(document.querySelector('div.total-figures').textContent.replace(/[^\d\.]/g, ''));

dataLayer.push({

          event: 'purchase',

          eсommerce: {

            transaction_Id: transactionId,

            currency: 'USD',

            value: value,

            items: orderItems

          }

        });

</script>

Що можна отримати з цього коду:

1. З Local Storage перелік придбаних товарів.
2. Зі сторінки номер замовлення.
3. Зі сторінки суму замовлення.
4. Відправити у dataLayer подію purchase зі всіма параметрами.

Надсилання події purchase Google Analytics 4

Тепер нам залишилось відправити всі дані.

В GTM-контейнері створюємо новий тег типу «Google Analytics: GA4 Event», вказуємо тег потоку Google Analytics, назва події «purchase». 

В налаштування оберіть пункт «Send Ecommerce data».

Створіть тригер типу «Сustom Event», а назва події «purchase».

Після тестування подій можна побачити в кабінеті Google Analytics 4 наше замовлення.

Через 24 години дані про замовлення будуть доступні в звітах Google Analytics 4.

У вкладці Drive sales > Transactions можна побачити номери замовлень, кількість товарів в замовлені та суму замовлення.

А у вкладці Drive sales > Transactions тепер доступний перелік товарів з замовлень, їх кількість та прибуток від кожного товару.

Висновки

Налаштування відстеження події purchase в Google Analytics 4 можна зробити і через Google Tag Manager отримавши необхідні дані зі сторінок сайту. Для цього потрібно проаналізувати код сторінки, знайти елементи що містять потрібну інформацію та за допомогою Javascript передати їх до аналітики.