Shopify Headless Analytics

By now you’ve probably heard the term “headless” or “PWA” when it comes to building a lightning fast Shopify store.

We’ve been implementing (or fixing) analytics on headless implementations for over 2 years.

During these 2 years we’ve experienced the pitfalls that can happen when not implemented the right way. We continue to learn the intricacies with the new headless providers today.

Rothy’s was one of our first Shopify websites we helped navigate the world of headless analytics. We implemented Google Analytics and marketing tags (like Facebook) on their headless PWA back in 2018 working with Anatta.

Since then we’ve worked with dozens of brands on headless Shopify websites. We even built our own headless Gatsby site in 2019 to really understand the future of our industry (see StriVectin and our related “how to learning lesson” articles here and here).

Whether you are working with agencies building headless websites like Anatta, Pack Digital, Scoutside, or Fostr (among others), or using Shogun’s new Frontend or Nacelle, it is critical to get analytics and marketing tracking right *before* launching.

Yes – do this *before* launching.

A fast website does not guarantee an increase in conversion rate.

In fact we’ve seen multiple headless post-launch analytics look like this:

Was the site faster?

Sure was.

But a 42% drop in conversion rate wasn’t expected.

Consider the job you are trying to accomplish when embarking on a headless website.

A higher converting website…that leads to more revenue.

Site speed is just one small part of this equation.

Below I share our top 10 learning lessons when it comes to implementing analytics and marketing tags on headless websites for Shopify.

If you need help implementing this for your own site, then schedule a call with us here.

We’ll ensure your analytics and tagging is one of the last issues you need to worry about post launch.

10 Learning Lessons Implementing Shopify Headless Analytics

These lessons apply whether you are using Gatsby/React or Vue.js/Nuxt. If it’s a single page app – which most headless sites are – then chances are these issues apply to you.

Prefer to listen on the run? Check out our latest podcast episode that dives into these learning lessons and shares how to fix on your own website.

# 1: Ghost Referrals / Attribution Issues

This is one that goes unnoticed most of the time. The symptoms are typically seen from a large drop in paid search, paid social, and even email attributed performance.

The easiest one to spot is a big drop in paid search performance with a simultaneous spike in organic traffic performance.

There are a couple ways to view this inside of Google Analytics.

User Explorer Report

I usually create a user based sequence segment that has paid search as first interaction and then organic search as the 2nd step with revenue > $0.

You can then quickly find a user where their session magically “restarts” in the middle of an event like this:

Top Conversion Paths

This is another report that will tell you if you have an issue.

Just do a week over week comparison from pre and post launch.

Do you have a big spike in this conversion path?

If so then you have a ghost referral issue.

Luckily this is fixable for most sites to get your attribution back to normal.

# 2: myshopify.com Domain on Thank You Page

This is another learning lesson that causes attribution issues.

But instead of going from paid to organic, it usually results in a spike in direct traffic attributed revenue.

There are a few causes of this:

1. When building the checkout you are using the [your-domain].myshopifiy.com URL for API calls (when it should be your real domain)
2. Offsite payment methods – like Paypal – redirecting back to myshopify.com domain due to similar/same issue as ^

Again – very fixable!

# 3: No Enhanced Ecommerce

Or even just missing enhanced ecommerce.

This is usually the result of installing the base plugins for Google Tag Manager or Google Analytics from the repo you are building on.

For example here is Gatsby’s GTM plugin.

It’s up to you to define the dataLayer (i.e. the variable data) and the events (i.e. triggers like product view or add to cart) that these need to execute on.

Here’s an example of one headless site missing most of the ecommerce data required:

When it should look more like this:

# 4: Missing Event Pushes on Page Changes

With headless sites you are only loading the sitewide code and pages once (on initial load).

So every time you change a “page” it is really just a route (i.e. URL) change that has an event push.

When you don’t send an event every time the user changes a page then you are losing out on pageview and/or ecommerce data pushes.

In addition to a sitewide event push every time the user navigates pages, here are other standard events we like to see implemented:

1. Email subscription signups
2. Collection list views
3. Product click on collection list views
4. Product detail view
5. Add to cart (one time and subscription)
6. Mini cart view
7. Add to wishlist
8. Sign up

The checkout events are usually handled automatically by our GTM Suite app and don’t need to be accounted for in your headless site.

#5: Page Titles Don’t Match Page Path

This is one that is very easy to overlook.

Here’s the issue:

• User lands on homepage and the page title is “Homepage”
• User navigates to the “Handbags” category
• The page URL is /handbags
• The page title recorded and sent to GA is “Homepage”

This is fixed with our implementation that also addresses the ghost referral.

#6: Product ID Mismatches on Facebook Tags

Most Facebook events require a unique product ID – like a view content or add to cart event.

And this ID needs to match the product ID you upload with your catalog in Facebook.

The problem usually surfaces when you are using different IDs for different channels, like:

• SKU for AdWords
• Variant ID for Facebook
• Product ID for Snapchat

So unless you have all three of these product IDs with your event data sent with your dataLayer then these channels will have mismatch errors.

And you get this:

So you either fix with your catalog feed or fix with the dataLayer.

This video shows how to test tags from GTM including the data sent through the Network panel in Chrome which is the safest way to validate for headless sites:

# 7: Setting Tags to Trigger on Pageview Instead of Route Change or Vice Versa

This is an easy mistake to make (we have made it!).

All of the tags have been updated with the proper events and route changes.

Site launches.

But then pageviews go missing from the checkout.

But how does that happen?

Since your Shopify checkout is not part of your headless website, it does not have the event changes (like “gatsby-route-change”) that is used for triggering pageviews.

Your Shopify checkout functions like normal pageviews do.

So the fix for this is to ensure you have your headless event trigger in addition to your subdomain/checkout triggers like this:

Again – our GTM suite app can help mitigate this lost data for you.

# 8: Cross-Domain Tracking

This typically surfaces when you have separate domains (not just subdomains) for your headless and Shopify checkout websites.

Or if you have international sites on different top level domains.

Or if you still have myshopify.com domains that are making their way into your account pages or checkout process.

The best way to validate the domains that you are tracking is to create a report inside of Google Analytics that shows the total sessions by hostname.

Then try to get them all on the same top level domain (if they are on myshopify.com) or ensure that you configure cross domain tracking with your Google Analytics variable inside of GTM.

# 9: Not Delaying Unnecessary Scripts on Pageload

Developers (even our own!) mostly hate GTM because of the perceived bloat that “GTM” causes.

It’s not GTM per se. It’s the way that scripts are managed inside of GTM.

Ideal world for speed: features like Yotpo or other third parties are implemented through an API vs embedded Javascript on the site.

Real world for marketers: most third party marketing platforms have not built API-enabled implementations. So the only way to implement their solution is through their sitewide JS.

A little used event in GTM is a Timer…which can then be used to create a delayed trigger to execute a third party tag.

For example – Zendesk chat or even an Attentive tag – you don’t need this on pageview.

So instead of assigning the trigger of “All Pages” or your global event change, create a custom trigger that fires 3 seconds after pageload.

This gets the third party script on site but it’s delayed and not acting as a blocker for the perceived site speed performance.

Here’s a video that goes over all of the native triggers in GTM – including a timer example.

# 10: Loss of Shopify Analytics & Shopify Cart Scripts

This can be jarring if you rely heavily on Shopify’s storefront analytics for your funnel, attribution, etc.

The only data you will get will be purchase data but you won’t be able to use for attribution purposes.

You’ll need to rely on Google Analytics (and ensure you get the setup right!) or build a custom report in Data Studio, Databox, etc.

You can also use Elevar for a more granular breakdown of your enhanced ecommerce steps and even create a custom funnel like this:

The inability to use Shopify Scripts on the cart page is another native Shopify feature loss with going headless.

Yes, it will work on checkout but if you rely on any complex cart rules then you’ll have to customize this.

More lessons…

There are many more learning lessons not listed here.

Like Segment.io feasibility, inability of referral program auto add to carts, international stores, tag assistants, etc.

If you have any questions or would like your own headless analytics implementation that comes with built in error monitoring and expert support – book a call with us here.

• GTM
• Shopify