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);
}
},
};
Updated about 2 years ago