Автор: Khilinski
2024-10-14
GA4, eCommerce Трекинг в WooCommerce
Этот код выполняет отслеживание различных событий электронной коммерции на сайте WooCommerce с использованием Google Analytics 4 (GA4) через объект dataLayer. В нем реализуются события для Google Analytics, такие как удаление товара из корзины, показ товаров, клики по товарам, просмотр корзины, оформление заказа и покупка.
Отслеживание удаления товара из корзины
jQuery(document).ready(function($) {
// Функция для отправки данных в dataLayer
function sendRemoveToDataLayer(productName, productPrice) {
window.dataLayer.push({
'event': 'remove_from_cart',
'ecommerce': {
'items': [{
'item_name': productName,
'price': productPrice
}]
}
});
}
// Отслеживание клика на кнопке удаления товара
$('body').on('click', '.remove-item.remove', function(e) {
e.preventDefault();
var $parentTR = $(this).closest('tr.cart-table-item');
var productName = $parentTR.find('.title.product-name a').text().trim();
var productPrice = $parentTR.find('.product-price .woocommerce-Price-amount').text().trim();
// Отправляем данные в dataLayer
sendRemoveToDataLayer(productName, productPrice);
window.location.href = $(this).attr('href');
});
});
Показ товаров в списке (категории и главная страница)
<?php if (is_shop() || is_product_category()) : ?>
<script>
window.dataLayer.push({
'event': 'view_item_list',
'ecommerce': {
'items': [
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
global $product;
$product_id = $product->get_id();
$product_name = $product->get_name();
$product_price = $product->get_price();
$product_brand = $product->get_attribute('pa_brand');
$product_category = get_the_terms($product_id, 'product_cat')[0]->name;
?>
{
'item_name': '<?php echo esc_js($product_name); ?>',
'item_id': '<?php echo esc_js($product_id); ?>',
'price': '<?php echo esc_js($product_price); ?>',
'item_brand': '<?php echo esc_js($product_brand); ?>',
'item_category': '<?php echo esc_js($product_category); ?>',
'quantity': 1
},
<?php endwhile; endif; ?>
]
}
});
</script>
<?php endif; ?>
Функция отправки уведомлений в Telegram
function sendTelegramNotification($botToken, $chatId, $message) {
$url = "https://api.telegram.org/bot$botToken/sendMessage?chat_id=$chatId&text=".urlencode($message);
file_get_contents($url);
}
Клик по товару в списке (выбор товара)
<?php if (is_shop() || is_product_category()) : ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
function sendProductToDataLayer(eventType, productName, productPrice) {
window.dataLayer.push({
'event': eventType,
'ecommerce': {
'items': [{
'item_name': productName,
'price': productPrice
}]
}
});
}
document.querySelectorAll('.product-card').forEach(function(card) {
card.addEventListener('click', function() {
var productName = card.querySelector('.product-card__content-title a').textContent.trim();
var productPrice = card.querySelector('.product-card__content-price').textContent.trim();
sendProductToDataLayer('select_item', productName, productPrice);
});
});
});
</script>
<?php endif; ?>
Просмотр карточки товара (детальный просмотр)
<?php if (is_product()) :
$product_id = $product->get_id();
$product_name = $product->get_name();
$product_price = $product->get_price();
$product_brand = $product->get_attribute('pa_brand');
$product_category = get_the_terms($product_id, 'product_cat')[0]->name;
?>
<script>
window.dataLayer.push({
'event': 'view_item',
'ecommerce': {
'items': [{
'item_name': '<?php echo esc_js($product_name); ?>',
'item_id': '<?php echo esc_js($product_id); ?>',
'price': '<?php echo esc_js($product_price); ?>',
'item_brand': '<?php echo esc_js($product_brand); ?>',
'item_category': '<?php echo esc_js($product_category); ?>',
'quantity': 1
}]
}
});
</script>
<?php endif; ?>
Просмотр корзины (событие view_cart)
<?php if (is_cart()) : ?>
<script>
window.dataLayer.push({
'event': 'view_cart',
'ecommerce': {
'items': [
<?php
foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
$product = $cart_item['data'];
$product_id = $product->get_id();
$product_name = $product->get_name();
$product_price = $product->get_price();
$product_brand = $product->get_attribute('pa_brand');
$product_category = get_the_terms($product_id, 'product_cat')[0]->name;
?>
{
'item_name': '<?php echo esc_js($product_name); ?>',
'item_id': '<?php echo esc_js($product_id); ?>',
'price': '<?php echo esc_js($product_price); ?>',
'item_brand': '<?php echo esc_js($product_brand); ?>',
'item_category': '<?php echo esc_js($product_category); ?>',
'quantity': <?php echo esc_js($cart_item['quantity']); ?>
},
<?php } ?>
]
}
});
</script>
<?php endif; ?>
Покупка (событие purchase)
if (is_order_received_page()) :
$order_id = $order->get_id();
$order_total = $order->get_total();
$order_tax = $order->get_total_tax();
$order_shipping = $order->get_shipping_total();
?>
<script>
var orderId = localStorage.getItem('orderId');
if (orderId !== '<?php echo esc_js($order_id); ?>') {
window.dataLayer.push({
'event': 'purchase',
'ecommerce': {
'transaction_id': '<?php echo esc_js($order_id); ?>',
'value': '<?php echo esc_js($order_total); ?>',
'tax': '<?php echo esc_js($order_tax); ?>',
'shipping': '<?php echo esc_js($order_shipping); ?>',
'items': [
<?php
foreach ( $order->get_items() as $item_id => $item ) {
$product_name = $item->get_name();
$product_id = $item->get_product_id();
$product_price = $item->get_total() / $item->get_quantity();
$product_quantity = $item->get_quantity();
$product_brand = $item->get_meta('pa_brand');
$product_category = get_the_terms($product_id, 'product_cat')[0]->name;
?>
{
'item_name': '<?php echo esc_js($product_name); ?>',
'item_id': '<?php echo esc_js($product_id); ?>',
'price': '<?php echo esc_js($product_price); ?>',
'item_brand': '<?php echo esc_js($product_brand); ?>',
'item_category': '<?php echo esc_js($product_category); ?>',
'quantity': '<?php echo esc_js($product_quantity); ?>'
},
<?php } ?>
]
}
});
localStorage.setItem('orderId', '<?php echo esc_js($order_id); ?>');
}
</script>
<?php endif; ?>
Этот код предназначен для реализации детализированного отслеживания электронной коммерции на сайте WooCommerce, интегрированного с Google Analytics 4 через dataLayer. Включение этих событий позволяет получать важную информацию о действиях пользователей: что они смотрят, какие товары выбирают, что добавляют в корзину, удаляют, изменяют количество, и, наконец, какие покупки совершают.
Весь код находится в github, а сам видео-урок на моем канале, кликай чтобы перейти.
+375 (33) 625-25-67
