Configuring Magic Checkout Analytics

Magic Checkout supports pixel tracking by sending customer triggered events to your Google, Facebook and other analytics platforms.

Magic Checkout steps must be mapped to Google Analytics and Facebook using Magic Checkout Events Callbacks.

Checkout Steps

Implementation

Customized wrapper class MagicCheckoutEvents, which is called upon by Magic Checkout when above events happen in Magic Checkout, is required to be provided and embeded to merchant's site by merchant's team.

📘

Implemetation notes

Please make sure the wrapper class is named exactly as MagicCheckoutEvents, and the names of callback functions match the Magic Checkout callbacks listed above.

Please embed customized wrapper class into website globally and make sure it is before the magic widget CDN.

The following example wrapper class and functions are provided to demonstrate how to fire checkout events to Google Analytics and facebook. Wrapper functions can be fully customized by merchant to fire events to other analytics platforms.

🚧

Analytics platform

In order for analytics platforms to be able to pick up events fired in the wrapper functions, merchant will need to embed script and corresponding api keys required by analytics platform in website.

var MagicCheckoutEvents = {
  onCheckoutStart: () => {
    MagicCheckoutEvents.fireAnalyticsEvent('onCheckoutStart');
  },
  onShippingAddressChange: () => {
    MagicCheckoutEvents.fireAnalyticsEvent('onShippingAddressChange');
  },
  onShippingMethodChange: () => {
    MagicCheckoutEvents.fireAnalyticsEvent('onShippingMethodChange');
  },
  onPaymentSubmit: () => {
    MagicCheckoutEvents.fireAnalyticsEvent('onPaymentSubmit');
  },
  onCheckoutComplete: () => {
    MagicCheckoutEvents.fireAnalyticsEvent('onCheckoutComplete');
  },
  fireAnalyticsEvent: (eventName) => {
    console.log(eventName);
    if (typeof dataLayer !== 'undefined') {
      dataLayer.push({ event: eventName });
    }
    if (typeof fbq !== 'undefined') {
      fbq('track', eventName);
    }
  },
};