Integrating Shopify into your Custom Website, and Keeping Google Analytics Happy

Have you integrated Shopify into a website you’ve built? It’s super easy to do with Shopify’s excellent documentation, support and infrastructure. Here at VIA Studio, we use Shopify primarily for sites that don’t need a lot of custom functionality, but need to function flawlessly and look good.

But – we’ve also used it for some unique, custom projects – like firstbuild.com. They are a makerspace and a co-creation community that incubates product ideas until they are ready for purchase. We’ve built firstbuild.com to support their own brand of crowdfunding, but also to directly purchase their products and parts. For the crowdfunding part – we built that functionality custom on top of WordPress, but for the standard e-commerce functionality, we utilize Shopify.

This works perfectly for FirstBuild’s needs, but the mesh between the two can be a bit complicated – and one of the complications is accurately tracking traffic from firstbuild.com through the Shopify checkout process in Google Analytics. It’s critical for us to not lose track of users when they purchase a product – which is the major goal for FirstBuild.

Here’s what we custom developed:

• FirstBuild brand and identity
• firstbuild.com content and product display / crowdfunding system
• Cart display

Here’s what we use Shopify for:

• Cart creation and management (via Shopify API)
• Checkout (entirely hosted on Shopify)

We utility Google Analytics (via Google Tag Manager) on both firstbuild.com and our Shopify instance.

You can see this flow, and where we flip from firstbuild.com over to shopify.com during the Checkout process:

The Problem

The problem is is that we were losing track of the user’s sessions between firstbuild.com and Shopify (firstbuild-shop.myshopify.com) – right after the “Checkout” click. This is super-critical to FirstBuild as we have a lot of advertising efforts, referrals and campaigns that we need to attribute purchases to, and if we lose the sessions, we lose that information.

Normally, you’d address this with a Google Tag Linker, or other basic cross-domain tracking setup – BUT since we are using the Shopify API to create and manage the carts on firstbuild.com and using Javascript to create a Cart URL and redirect the user when the user clicks Checkout, we couldn’t go those routes.

Hot Tip: DigitalDarts.au’s “The Finest Google Analytics Setup In Shopify For Splendid Data” guide is probably the best all-encompassing

The Solution

In the end, we ended up rolling out own Google Analytics Link Decoration scheme.

1. When the user clicks CHECKOUT, we create our CART URL as normal
2. But then we also add a Google Analytics Session ID (called the linkerParam in Google’s documentation) to the URL

Pretty simple, and looks something like this:

$('body').on('click', '#checkout', (e) => { var url = this.cart.webUrl; //Adds google analytics tracking code to cart URL for tracking of session var client_id = ga.getAll()[0].get('linkerParam'); if (client_id.length > 0) { url += '&_ga=' + client_id; } window.open(url, '_self'); });

The Results

This now allows us to see WHERE a purchase comes from (email, digital ad, organic search), etc while maintaining our custom ecommerce integration.