КАК ОТСЛЕЖИВАТЬ ПОКУПКИ В ИНТЕРНЕТ-МАГАЗИНЕ С ПОМОЩЬЮ 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>
Что можно получить из этого кода:
- Каждую карточку товара из списка.
- Из каждой карточки ID товара, название товара, цену и количество.
- Код создает объект «item» с полученными ранее параметрами.
- Код сохраняет объект «item» в массив «items».
- Сохраняет массив «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>
Что можно получить из этого кода:
- С Local Storage перечень приобретенных товаров.
- Со страницы номер заказа.
- Со страницы сумму заказа.
- Отправить в dataLayer событие purchase со всеми параметрами.
Отправка события покупки Google Analytics 4
Теперь нам осталось отправить все данные.
В GTM-контейнере создаем новый тег типа “Google Analytics: GA4 Event«, указываем тег потока Google Analytics, название события «purchase».
В настройках выберите пункт «Отправить 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 передать их в аналитику.
