<script>
function track_fb(event_name, payload = {}) {
try {
fbq('track', event_name, payload);
}
catch (err) {
console.error('Failed to invoke FB Pixel', err);
}
}
function is_payment_successful(event) {
var result = event.detail.result;
return result === 'success' || result === 'pending' || result === 'invoice';
}
document.addEventListener('voog:shoppingcart:checkout', function () {
track_fb('InitiateCheckout');
});
document.addEventListener('voog:shoppingcart:addproduct', function () {
track_fb('AddToCart');
});
document.addEventListener('voog:checkout:show', function (event) {
if (is_payment_successful(event) && event.detail.order) {
var payload = { currency: event.detail.order.currency, value: event.detail.order.total_amount };
track_fb('Purchase', payload);
}
else if (is_payment_successful(event) && !event.detail.order) {
console.error('Error: Order is missing', event);
}
});
</script>
analytics.js
, gtag.js
or gtm.js
by looking at the analytics code snippet you are given by Google: usually one of the aforementioned keywords is present in the code. gtag.js
, use this code:
<script>
function track_gtag_purchase(order) {
try {
var items = [];
var total_tax = parseFloat(order.items_tax_amount) + parseFloat(order.shipping_tax_amount);
if (!typeof gtag === 'function') {
throw new Error("Google Analytics has not been loaded yet");
}
else {
order.items.forEach(function (item) {
items.push({
"item_id": item.product.id,
"item_name": item.product.name,
"quantity": item.quantity,
"price": item.amount
});
});
gtag('event', 'purchase', {
"transaction_id": order.code,
"value": order.total_amount,
"currency": order.currency,
"tax": total_tax.toFixed(2),
"shipping": order.shipping_subtotal_amount,
"items": items
});
}
}
catch (err) {
console.error("Failed to invoke Google Tag Manager", err);
}
}
function is_payment_successful(event) {
var result = event.detail.result;
return result === 'success' || result === 'pending' || result === 'invoice';
}
document.addEventListener('voog:checkout:show', function (event) {
if (is_payment_successful(event) && event.detail.order) {
track_gtag_purchase(event.detail.order);
}
else if (is_payment_successful(event) && !event.detail.order) {
console.error('Error: Order is missing', event);
}
});
</script>
gtm.js
, use this code:
<script>
function track_gtm_purchase(order) {
try {
var items = [];
var total_tax = parseFloat(order.items_tax_amount) + parseFloat(order.shipping_tax_amount);
var transactionData = {
"event": "voog-gacommerce-send"
}
if (!typeof dataLayer === 'object') {
throw new Error("Google Analytics has not been loaded yet");
}
else {
order.items.forEach(function (item) {
items.push({
"sku": item.product.sku,
"name": item.product_name,
"price": item.amount,
"quantity": item.quantity
});
});
transactionData.transactionId = order.code;
transactionData.transactionTotal = order.total_amount;
transactionData.transactionTax = total_tax.toFixed(2);
transactionData.transactionShipping = order.shipping_subtotal_amount;
transactionData.transactionProducts = items;
dataLayer.push(transactionData);
}
}
catch (err) {
console.error("Failed to invoke Google Tag Manager", err);
}
}
function is_payment_successful(event) {
var result = event.detail.result;
return result === 'success' || result === 'pending' || result === 'invoice';
}
document.addEventListener('voog:checkout:show', function (event) {
if (is_payment_successful(event) && event.detail.order) {
track_gtm_purchase(event.detail.order);
}
else if (is_payment_successful(event) && !event.detail.order) {
console.error('Error: Order is missing', event);
}
});
</script>
analytics.js
is deprecated from July 1, 2023. Migration steps to gtag.js
and GA4 can be found here.analytics.js
:<script>
function track_ga_purchase(order) {
try {
var total_tax = parseFloat(order.items_tax_amount) + parseFloat(order.shipping_tax_amount);
if (!typeof ga === 'function') {
throw new Error("Google Analytics has not been loaded yet");
}
else {
ga('require', 'ecommerce');
ga('ecommerce:addTransaction', {
'id': order.code,
'revenue': order.total_amount,
'shipping': order.shipping_subtotal_amount,
'tax': total_tax.toFixed(2)
});
order.items.forEach(function (item) {
ga('ecommerce:addItem', {
'id': item.product.id,
'name': item.product.name,
'sku': item.product.sku,
'price': item.amount,
'quantity': item.quantity,
'currency': order.currency
});
});
ga('ecommerce:send');
}
}
catch (err) {
console.error("Failed to invoke Google Analytics", err);
}
}
function is_payment_successful(event) {
var result = event.detail.result;
return result === 'success' || result === 'pending' || result === 'invoice';
}
document.addEventListener('voog:checkout:show', function (event) {
if (is_payment_successful(event) && event.detail.order) {
track_ga_purchase(event.detail.order);
}
else if (is_payment_successful(event) && !event.detail.order) {
console.error('Error: Order is missing', event);
}
});
</script>