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

Event

Description

Magic Checkout callbacks

Magic Checkout start

When customer clicks Magic Checkout button, and starts to checkout

onCheckoutStart

Shipping address change

When customer changes shipping address

onShippingAddressChange

Shipping method change

When customer changes shipping method

onShippingMethodChange

Payment submit

When customer clicks pay button to submit payment

onPaymentSubmit

Checkout complete

When checkout is successfully completed

onCheckoutComplete

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);
    }
  },
};