How to: Manually send Mixpanel button events

Sending Mixpanel CheckoutButtonExpose and CheckoutButtonClick events manually

As part of using v1.03 arrow-button.js, these events are already automatically fired with the Mixpanel distinct_id attached. However, if merchant has opted to use his original checkout button instead of the generic Arrow checkout button, we would have to fire the checkout button expose and click events manually, so that we continue to track those events happening/originating from the merchant's online store.

1. Initialize Mixpanel and store mixpanel.get_distinct_id value as cookie

Mixpanel is an analytics tool that tracks events and provide ease in maintaining identity across events tracked, so that user's journey across the platform can be stringed together and analysed. We initialize Mixpanel on your store and obtain the distinct_id that Mixpanel generates for the user, so that this same ID can be used for event firing from online store, and passed on to Arrow Checkout and have the subsequent events associated back to the same user.

Paste the below code at the section:

JavaScript

<script type="text/javascript">
(function(f,b){if(!b.__SV){var e,g,i,h;window.mixpanel=b;b._i=[];b.init=function(e,f,c){function g(a,d){var b=d.split(".");2==b.length&&(a=a[b[0]],d=b[1]);a[d]=function(){a.push([d].concat(Array.prototype.slice.call(arguments,0)))}}var a=b;"undefined"!==typeof c?a=b[c]=[]:c="mixpanel";a.people=a.people||[];a.toString=function(a){var d="mixpanel";"mixpanel"!==c&&(d+="."+c);a||(d+=" (stub)");return d};a.people.toString=function(){return a.toString(1)+".people (stub)"};i="disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(" ");
for(h=0;h<i.length;h++)g(a,i[h]);var j="set set_once union unset remove delete".split(" ");a.get_group=function(){function b(c){d[c]=function(){call2_args=arguments;call2=[c].concat(Array.prototype.slice.call(call2_args,0));a.push([e,call2])}}for(var d={},e=["get_group"].concat(Array.prototype.slice.call(arguments,0)),c=0;c<j.length;c++)b(j[c]);return d};b._i.push([e,f,c])};b.__SV=1.2;e=f.createElement("script");e.type="text/javascript";e.async=!0;e.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?
MIXPANEL_CUSTOM_LIB_URL:"file:"===f.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";g=f.getElementsByTagName("script")[0];g.parentNode.insertBefore(e,g)}})(document,window.mixpanel||[]);

// initiate mixpanel function and store distinct id as cookie
  mixpanel.init("a2d5963837cd2c484c39cc1b294ee9a3", {
    loaded: function(mixpanel) {
        distinct_id = mixpanel.get_distinct_id();
        setCookie('mx_distinct_id', distinct_id, 90);
    }
  });

</script>

2. Fire the Mixpanel CheckoutButtonExpose event

Add the below function to section so that it can be called whenever the original checkout button appears (product page/side cart/cart page):

JavaScript

function mxAfterAjax(eventName, mx_distinct_id){
  var interval = setInterval(function () {
    if (mx_distinct_id.length > 0) {
      mixpanel.track(eventName, {
        'MerchantID': 6,
        'Origin' : 'E-Store',
      }); 
      clearInterval(interval);
    }
  }, 300);
}

mxAfterAjax('CheckoutButtonExpose', mx_distinct_id);

3. Ensure the Mixpanel CheckoutButtonClick event is fired with the right distinct_id

Have the distinct_id passed via arrowOrder.extraData so that the CheckoutButtonClick event that is fired server-side will bring with it the correct Mixpanel ID (and that all subsequent checkout stage events fired to Mixpanel will have the same ID too).

Have the below "if statement" added to wherever the arrowOrder is prepared (usually product page/mini cart/cart page):

JavaScript

if (mx_distinct_id.length > 0) {
  arrowOrder.extraData["mx_distinct_id"] = mx_distinct_id;
}