How to A/B Test Shopify’s Checkout with Google Optimize

Learn how to a/b test your Shopify checkout in 6 easy steps.

How to A/B Test Shopify’s Checkout with Google Optimize

The ability to customize Shopify’s checkout is quite limited (as you are probably well aware of!).

It would be nice to fine-tune the checkout where I see friction points through continual a/b testing.

Now you can!

With our guide on installing GTM that works across every page (yes, including checkout) for Shopify and Shopify Plus stores, you can now take advantage of using Google Optimize to test your own checkout too.

Here’s how to a/b test your Shopify checkout in 6 steps:

Step 1: Install Google Tag Manager

This is a required step because we implement the Google Optimize page flickering tag via GTM. We also have more potential tests to run if we have the functionality that GTM provides us in each step of the checkout process.

The short version is: copy your GTM Javascript tag, without the opening and closing <script> tags (<== very important), in your Google Analytics additional script setting here:

shopify gtm

If you haven’t already, read our guide on implementing GTM in your own store that supports checkout pages as well.

Step 2: Install Google Optimize

If you haven’t signed up for Google Optimize yet then you can sign up here.

Once you’ve signed up, you’ll need to deploy Google Optimize to your store in two steps:

a) Include the required ga(‘require’, ‘GTM-ABC123’) snippet that is in step 1 of the setup process here (you’ll notice this is just below the GTM snippet from Step 1 above):

shopify-optimize-snippet

b) Implement the page flickering snippet in Google Optimize step 2 via GTM custom HTML tag. Once you copy this snippet from Google Optimize, head on over to GTM and here is what the tag looks like in GTM.

optimize-page-flicker

note: change out the GTM-xxxxxx to be YOUR OWN GTM CONTAINER ID (I’m not yelling, promise ? ). By default this is your Optimize ID, but this needs to be your GTM ID.

Read our complete guide on implementing Google Optimize on Shopify.

Step 3: Analyze your Checkout Funnel

We’re looking to find out what your overall checkout to checkout success rate is and more specifically your step by step progression success rate.

For example: let’s say you’ve had 2,000 conversions in the last month and 4,000 unique users enter your checkout. This means your checkout success rate is 50% (x=2,000 / 4,000).

There’s a lot of potential revenue there if you get this up to a 60% success rate!

This step can be accomplished in one of many ways:

  1. Google Analytics > Conversions > eCommerce > Checkout Behavior (not likely to have)
  2. Google Analytics > Conversion > Goals > Funnel Visualization (you might have if you’ve set up a checkout success goal)
  3. Google Analytics > Behavior > Events > Event Action contains “Viewed Checkout” (you’ll definitely have access to this)

Unless you’ve customized the Checkout Labeling steps as part of your Enhanced Ecommerce analytics (not common) then option 1 probably won’t give you anything other than checkouts started and checkouts completed.

If you’ve configured a checkout funnel Google Analytics goal (see how here) then you should have a funnel view as part of option 2. This report gives you % of sessions that continued through each step of the checkout.

Finally, the last option is to use your native custom event data. Inside of GA > Behavior > Events > Filter by “Viewed Checkout” which should end up looking something like this:

ga-events-viewed-checkout

You can then determine which steps have the highest drop off of sessions to help in hypothesizing what tests you should be running…

Step 4: Create Test Hypothesis

This is the fun part! Utilizing GA data + existing customer feedback + your own innovative/gut feeling on what would help your checkout perform better.

While this email won’t go into too much detail on analyzing data in GA or how to evaluate qualitative feedback from customers, you may want to start by asking yourself what friction points are causing users to exit:

  • Lack of shipping and return details  (so users exit in search of this)
  • Lack of live chat or other customer support options
  • No customer confidence builders reinforcing security and privacy
  • Customers leaving in search for coupons

In the example below, I’m going to hypothesize that there are too many users exiting step 1 for alternative payment options (Paypal, Amazon) that result in their own exits prior to completing the transaction. Additionally, based on my persona types I’m going to include a Norton Trust confidence badge near my order total block in the right column.

Step 5: Create A/B Test Variant(s)

I’m going to make an assumption that you have some familiarity with Google Optimize (or have reviewed our guide linked above in step 2).

This step will show you how to create a variant targeting changes to your checkout.

Once logged into Google Optimize then > Create a New Experiment > Create New Variant.

Be sure to navigate to your own checkout in another tab and copy the URL to be used in the editor page URL shown here:

editor-page

Here is my variant before making any changes:

baseline-test

Now you’ll want to use your cursor to find the area(s) that you want to edit.

This screen shows me selecting the area where alternate payment options exist and then clicking “Remove” in the content editor seen in the bottom right corner of the page.

remove-paypal-option

In this next step I’m going to select the subtotals block where I want to include my Norton badge and click “Insert HTML”:

insert-html

Then I select “After” in the Insert HTML modal:

select-after-option

And then I include my Norton badge image (that I uploaded to my store’s image files) with an <img> tag that is wrapped in a <div>:

append-confidence-builder

And now I see my final variant that is hiding additional payment options and displaying the Norton badge:

variant-final

In this example test, the Norton badge will repeat on every step without any further edits needed. If you are testing different changes on each step then you’ll have to navigate through the checkout steps to make similar updates.

Step 6: Complete Required Google Optimize Steps

Now you’ll need to set your Objectives for the experiment and finalize the targeting URLs.

For page Objectives, I suggest utilizing the built-in Transactions and Revenue along with any other custom goals you might have specific to your test:

google optimize objectives

For targeting URLs, you’ll want to create a regex matching rule for your checkout like this:

google optimize url targeting

The pattern is:  .*\/checkouts\/.*

Step 7: Start Experiment & Monitor Results

Now you’re ready to launch your test!

Depending on your traffic, you will want to wait for at least 1-2 weeks for your test to run before making any conclusions.

Happy testing!

If you have any questions just leave a comment below!

Visit DataVinci Home page to know more about our services.

Check out all the blogs at https://blogs.datavinci.in/

Best, Sanmeet Walia.

DataVinci Signature

Need help with Digital Analytics? Get in touch:

Leave a comment