Shopify Checkout GA Cross Domain Tracking

Life

Grovemade.com has a very odd setup using Shopify. We have our own frontend layer using the Shopify API to populate products, with the rest of the site fully in our control.

This is done by having nginx proxy all requests to our app *except* shopify URLs such as /cart, /checkout

We then use the JS API and proxy requests to Shopify with a few fake headers to allow Shopify to work this way.

The biggest problem thus far has been e-commerce tracking, as Shopify does not let us control the checkout pages. E-commerce data arrives, but is not associated to any visitor session.

 

Shopify has a decorator that sets a _shopify_ga cookie immediately upon direct checkout links or cart submissions being executed. The response from Shopify appends parameters that identify the session on the previous domain to the checkout.shopify.com URL.

If you host pages outside Shopify and want cross domain support for Google Analytics, replicate the linker decorator and add the GA linker string in a cookie called _shopify_ga on click for checkout links or carts.

Any action that ultimately takes you to checkout.myshopify.com should add the _shopify_ga cookie with google linker parameter.

Here’s the relevant function to use on your site.

In our case, we had to modify the form element being looked for to match our environment.

 window.addShopifyLinkerLinks = function() {
  ga('require', 'linker');
  function addListener(element, type, callback) {
    if (element.addEventListener) {
      element.addEventListener(type, callback);
    }
    else if (element.attachEvent) {
      element.attachEvent('on' + type, callback);
    }
  }
  function decorate(event) {
    event = event || window.event;
    var target = event.target || event.srcElement;
    if (target && (target.getAttribute('action') || target.getAttribute('href'))) {
      ga(function (tracker) {
        var linkerParam = tracker.get('linkerParam');
        var cookie = '_shopify_ga=' + linkerParam + '; ' + 'path=/';
        document.cookie = cookie;
      });
    }
  }
  for (var i=0; i < document.forms.length; i++) {
    var action = document.forms[i].getAttribute('action');
    if(action && action.indexOf('/cart') >= 0) {
      addListener(document.forms[i], 'submit', decorate);
    }
  }
  for (var i=0; i < document.links.length; i++) {
    var href = document.links[i].getAttribute('href');
    if(href && href.indexOf('/checkout') >= 0) {
      addListener(document.links[i], 'click', decorate);
    }
  }
}

2 thoughts on “Shopify Checkout GA Cross Domain Tracking

  1. Hi Yuji, I noticed that your Shopify checkout is still a .myshopify domain, is it because there is no way to get around that with a reverse proxy? I am facing that issue too, where my cart and checkout still default to .myshopify, and customer accounts of course do not work as well.

    Thank you in advance for any replies!

    1. @Kelvin,

      Yes that’s exactly why we don’t use the new white label checkout domain. I would have handled this differently at this point, but this particular setup is an almost decade old sunk cost.

      We’ve also seen likely IP based throttling which returns 403s on traffic spikes, and have removed any kind of proxying whatsoever. Our new solution is to build our own ultra basic cart that stores quantities & populate “hard coded shopify checkout links” for the checkout button (intended for campaigns that have straight-to-checkout links.)

      I suspect those issues we ran into (throttling per ip) will apply to any proxy… so working on the customer URLs is unlikely to work. Perhaps using the Shopify subdomain (store.myshopify.com/customer) makes sense for you? It would be like other sites that have different customer portals, blogs, shops, etc.

      Hope any of this helps!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s