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

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.

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

You might still be wondering how you’re going to be able to get this report to work?

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!


Brad Redding

Brad, co-founder of Elevar, has lived in eCommerce for over 12 years. He's helped design, build, and optimize over 100 websites in his career. From new retail startups to well-known brands like Le Creuset, Signature Hardware, Rebecca Minkoff, Char-Broil and more, he specializes in data analytics and conversion optimization to help achieve business goals.

  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!

Leave a Reply

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

Related Articles

Talk with Us

Please complete the form to request a demo, discuss our solutions, or to just say hi!



Some of our clients