One Page Checkout Funnel Tracking with Google Tag Manager

More granularity within our e-commerce funnel data is a beautiful thing. It allows us to pinpoint friction points without nearly as many assumptions and as much guesswork. Unfortunately, while one page checkouts are great for usability, we run into an issue of not being able to see more than ‘Added Item to Cart’, ‘Checkout Page’, and ‘Checkout Success’ in Google Analytics funnel tracking, since the funnel only updates when our URL actually changes. Shouldn’t funnel tracking be able to tell us more about the funnel than whether a customer did or did not check out?

Yes! Yes it should, and yes it can. I don’t even think you’re going to be able to handle how simple it is to track one page checkout funnels with Google Tag Manager. All we need is a little help from virtual pageviews.

Virtual Pageviews

What are virtual pageviews you ask? Virtual pageviews are site hits that mimic real pageviews, and show up in analytics data as actual pageviews, without actually loading a new page. In our step by step instructions below, we’ll be sure to distinguish between the two types within our data to keep things clean and tidy.

It is important to note that using virtual pageviews will inflate your pageview count slightly per checkout, which may not be an issue for small sites but can become one for big sites. Before you implement virtual pageviews, take a moment to estimate how many extra page views that will mean and factor that in to your reporting. You’ll also want to annotate this change in Google Analytics.

These nifty little features will help us bridge the gap between our Google Analytics Funnel Tracking web page URL requirements and our lack of individual web pages that our one page checkout pages embody. With this enhanced funnel tracking, we can more readily identify friction points within our checkout page and begin to remedy them.

In order to make this happen, here’s what we need:

Google Tag Manager

• Virtual Page View Tags
• Triggers

Google Analytics

• Goals

Your Website

• Your Website

Google Tag Manager Steps

GTM Trigger Set-Up Steps

1. 1. 1. Create a new Workspace in Google Tag Manager to help keep things clean and tidy.
      2. Fire up GTM Preview Mode.
      3. Hop on over to your website and add a product to your cart and navigate to the one page checkout.
      4. Click within the entry field for the first step in the checkout page funnel.
      5. Select the gtm.click that got tracked into the GTM Preview Mode Dialogue and open up the Data Layer tab.
         • For this example, we see that the gtm.elementId is billing:firstname, which I’ll copy, then head back to Google Tag Manager
      6. Create a new Trigger.
         • Let’s call it “Step 1 – Billing”
           • Trigger type: Click – All Elements
           • This trigger fires on: Some Clicks
             • Let’s select that element id from the drop-down menu which matches our above identifier and paste in billing:firstname
      7. Repeat the Steps 4-6 to create the Triggers for our other Funnel steps, so we’ll have a trigger for:
         • Billing
         • Shipping
         • Payment
         • Checkout

GTM Virtual Pageview Tag Set-Up Steps

1. Once we’ve have our Triggers wrapped up, let’s create our virtual pageview tag
   • Name: VPV – Billing
   • Tag type: Universal Analytics
   • Track Type: Page View
   • Select “Enable overriding settings in this tag”
   • Fill in your UA Tracking ID
   • More Settings > Fields to Set
   • Field Name: page
   • Value: /vpv/billing
2. Once again let’s repeat the creation of our virtual pageview tags and name them accordingly, wrapping up our Google Tag Manager

Google Analytics Steps

Now that we’ve got our virtual pageview tags and triggers firing, we’re ready to configure our Goal Funnel in Google Analytics.

1. Navigate to Admin
2. View > Goals
3. Create a new custom goal for your One Step Checkout
   • Goal setup: Custom
   • Goal type: Destination
   • Destination: Equals to {{/your-onepage-checkout-success/}}
   • Funnel: On
     • This is where we’ll connect the dots to complete our funnel tracking by aligning our checkout steps with the virtual pageview URLs we are firing via Google Tag Manager

There you have it: super simple one page e-commerce funnel tracking. Time to improve your tracking, your insights, and your checkout page.

Written by Laura McDougall
A strategic leader on the UpBuild team, Laura’s career includes 10+ years of agency experience working on everything from SEO and the semantic web to analytics and CRO.