Analytics

How to Setup Google Analytics Checkout Behavior Funnel on Shopify

Use our GTM container to save you time and unlock the full checkout funnel in GA. Works for all Shopify stores.

How to Setup Google Analytics Checkout Behavior Funnel on Shopify

Brad Redding

Brad Redding is the Founder & CEO of Elevar. Specializing in analytics, tracking, GTM, and conversion optimization.

Last updated on 5/4/2019

Do you struggle with an empty Checkout Behavior Enhanced eCommerce report in Google Analytics?

If you’re like most Shopify stores then your report probably looks something like this:

checkout behavior reporti in ga

Where are the contact information, shipping method, and payment details steps ??

Maybe you’re using Goals to track this, however you’ve probably already noticed pitfalls with using goals (I showed how to fill in these gaps in this eCommerce funnel article).

This super simple guide is going to show you how to unlock your own Checkout Behavior funnel in Google Analytics!

Here are the steps:

  1. Setup Funnel Steps in Google Analytics
  2. Ensure GTM is Implemented on Checkout
  3. Import Elevar’s GTM Container
  4. Test & Publish

How to Setup Your Checkout Behavior Tracking

Step 1: Setup Funnel Steps in GA

Go to Google Analytics > Admin > View (you can setup on all of your views) > eCommerce Settings

Then you’ll want to setup your funnel steps like this:

checkout labeling settings in ga

That’s it.

If you have a custom checkout with additional steps then there might be small variations to this but this is the setup for majority of Shopify stores.

What is important for GA to recognize this data is you need to send an enhanced ecommerce event for funnels steps “1”, “2”, and “3”.

I often see people configure this in GA and think it will automagically match to Shopify checkout steps. Unfortunately this isn’t the case!

Step 2: Ensure GTM is Implemented on Checkout

If you are on Shopify Plus, then you have two options:

  1. Use our GTM Suite Shopify app to implement GTM across your site, including checkout.liquid (if you don’t have access to checkout.liquid then you’ll need to request from your merchant success manager)
  2. If you already have GTM implemented in another manner then ensure that the GTM global scripts are implemented on checkout.liquid.

If you are on Shopify standard plans, then you have three options:

  1. If you’re using our GTM Shopify app (linked above) and still have Google Analytics setup natively in Shopify then you just need to inject GTM into the checkout pages using the additional GA Javascript setting (shown below).
  2. If you are not using our app (GASP!) and you have GTM setup in your theme then you will need to follow the same step as # 1 shown below.
  3. If you are using option 1 in our how to install GTM on Shopify guide then you don’t need any additional updates.

Here’s what you need to do if you fall under 1 or 2 for the Shopify standard plans:

Warning: this is a risk and can’t be guaranteed it will work forever if Shopify shuts this off. This change should also be reviewed with your developer. This is injecting GTM on checkout pages ONLY. As of April, 2019 Shopify started rolling out updates to restrict “hacking” this GA scripts setting. 

Go to Preferences > Google Analytics and copy this block and update the GTM-YOURIDHERE with your own GTM code.

/* Custom JS for GTM on Checkout Only */
if(typeof Checkout === 'object'){
if(typeof Checkout.$ === 'function'){
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-YOURIDHERE'); }
}
/* END Custom JS for GTM on Checkout Only */

Here is what it would look like:

insert-gtm-via-additonal-scripts-setting

Once you SAVE then you are good to go.

Step 3: Import Elevar’s GTM Container

NEW FOR MAY 2019!! Shopify’s checkout changes to title tags recently affected step 2 below that was in our container. We’ve updated it and should work for most stores.

1. I’m triggering a custom HTML tag that is pushing an event to the dataLayer on all checkout pages by using the page title via a DOM variable (page title == contact information, shipping details, payment information). So this will fire on each step of the checkout process updating the dataLayer with the step the user is on.

checkout behavior gtm datalayer

2. I’m using a regex lookup table variable (to cut down on # of tags) to translate the page title into the steps that Google Analytics needs.

lookup table for checkout behavior event

3. Finally I’m sending a GA enhanced ecommerce event hit using the event trigger that I created and triggered in step 1. above. This event is set to trigger on each step of the checkout. Since this tag is configured to use the dataLayer then the checkout step (1, 2, or 3) updates and fires on every checkout step for the user.

ga checkout behavior event

In this tag ^ be sure to update the tracking ID with your own Google Analytics property ID. 

That’s it! Download this container here:

Download GTM Container

Click to download this container to import into your own GTM Account.

Step 4: Test & Publish

Once you’ve downloaded and imported into your own account then put your GTM container into preview mode > navigate to your site and add an item to cart > proceed to checkout.

If you are using the GA Debugger you can enable this to verify the hits are sent to GA.

And you will also see the GTM console popup which you can verify fire on every step of the checkout process.

testing-checkout-behavior-funnel

If all is good then publish and start watching out for your checkout funnel report in GA :).

Screen Shot 2018-12-04 at 3.14.53 PM

Download GTM Container

Click to download this container to import into your own GTM Account.

Questions? Leave a comment below!

  1. Hi Brad,

    Thanks for the guide. I’m following your instruction to set up check out funnel – however, it seems the GTM container in the article is tracking Apply Coupon event rather than Check out step.

    Is there any chance I can get a link to the GTM container for Check out steps?

    Many thanks!

  2. Is this still a working solution? I followed the steps but I only get data for steps 1 and 4 in the Checkout Report in GA.

    1. Hi Jeff for some stores it does still work, yes. It depends if Shopify has cut off your use of custom scripts in the additional scripts setting. If you’ve followed each step and it still doesn’t work then we’re pretty much stuck (if you are not on Plus).

  3. Interesting. Thanks for the reply. I was able to get all of the events to fire so I’m able to see the dropoff using a custom report. It will have to do for now until we upgrade to Plus.

  4. It blows my mind that Shopify decided to prevent users from being able to edit the additional scripts setting by default.

  5. hey Brad thanks for this guide its great!

    Can I ask why you need the event tag (enhanced ecommerce checkout event) instead of just using the datalayer push you created to track the checkout behaviour?

  6. I don’t have any shipping portion as I am selling digital products on site. How can I make step 2 as my payment information step? rather than step 4

  7. Howdy are using WordPress for your site platform?
    I’m new to the blog world but I’m trying to get started and set up
    my own. Do you require any coding knowledge to make your own blog?
    Any help would be greatly appreciated!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may also like