Tracking shopping cart events in Voog

The default Facebook Pixel and Google Analytics code, that you can add to your website, can only track page views. In order to also track purchase events in the shopping cart, you need to add the corresponding code to the header code area of your website. To do this, go to your website and make sure it is in Edit mode. Then, go to Settings > Site and paste the code into the header code area.

Voog's shopping cart events are described here. Information about our checkout flow can be found here.

Facebook Pixel

Before implementing your Pixel, the base code of the Pixel must be added.

Check out our guide to adding Facebook Pixel here: Adding Facebook Pixel to your website

<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>

Google Analytics

You can check whether you're using 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.

Check out our guide on adding Google Analytics to your website: Adding Google Analytics to your website

If you are using 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>

If you are using 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>

Please note that analytics.js is deprecated from July 1, 2023. Migration steps to gtag.js and GA4 can be found here.

Deprecated code for 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>