How To Conduct A/B Testing with Google Optimize for PageFly

In this article, you will learn how to use Google Optimize to create and conduct A/B testing on PageFly. 

What Is A/B Testing? 

Just in case you are new to eCommerce or business in general, an A/B test is a randomized experiment using two or more variants of the same web page (variant A and variant B). Version A is the original page, while version B and so on contains at least one modified element. 

The modified element is firstly hypothesized to have a certain positive impact on your conversion rate. Usually you need to make such an educated guess after you identify a problem and you want to try out solutions to improve it. 

How To Create an A/B Test 

Step 0: Create your Optimize account and an Optimize container

You can click here to create your Google Optimize account.

This is actually step 0 because you should already have at least one container and one account when you set up your Optimize account. All you need to do is select the container you want to use for this. 

But just in case you don’t already have one, go to Main menu > Accounts and click on Create account, then click on the Plus icon to add a new container. 

Create experience

Step 1: Set up Google Optimize

Enable Google Analytics

You need to first and foremost connect your Google Analytics account to Shopify. You can find out how to do so through Shopify’s instructions here

Enable Google Optimize 

Click on a container of your choice, then choose Settings. 

Enable Google Optimize

You will be directed to a panel, which contains 2 set up requirements: Install the Optimize snippet (in your Shopify store) and Install the Chrome extension. We’ll only need to talk about the Optimize snippet since Google already has the other covered. 

Setup requirements

Copy the line of code then head to your Shopify admin dashboard > Online store > Themes > Actions, and choose Edit code

Choose the file theme.liquid, find <head>, which should be in the first few code lines, and paste the copied code right beneath it like so: 

Edit theme code

Step 3: Set up Google Analytics in your editor 

To give you context, what we are going to do with our sample product page is check the impact of the banner below the product details element. 

Hypothesis: Banner's impact

So we will create a variant of the page without the banner. And since we are tracking conversion rate, we will enable tracking on our Add to Cart button. Go to Styling > Tracking > Google Analytics, we will set it up as follows: 

Set up Google Analytics tracking

The reason we have to set it up like this is because Google Optimize tracks events – the actions your customers take. Google Optimize measures the number of times (or duration) the event takes place to create reports for you.

Step 4: Create the A/B Test

Create experience

In your Google Optimize container of choice, click Create experience. Give it a name and paste the URL of the page being tested in the box below – this will be called your Editor page. After that, click Create.

Create A/B Testing

Add variant

In your experience interface, click on Add variant and give it a name. In our case, we named it “Variant 1 – Without banner”. 

Add variant for A/B testing

Next, click on Edit to enter the variant editor. As you are probably familiar with PageFly right now, you should have no problem getting used to its interface. 

Enter variant editor

In our case, we simply need to remove the banner (specifically its container), and we have already successfully made a new variant for the web page.

Edit variant for A/B Testing

Note that you can distribute the proportion of traffic amongst variants by clicking on weight percentage, and you can even customize which audience type gets to see the new variant by clicking on Customize

Customize audience for A/B testing

Choose the objective

Depending on what your hypothesis is, you might need to measure and analyze a few different things, thus you will need to set specific objectives for your A/B testing campaign. 

To do so, scroll down to Measurement and objectives and click on Add experiment objective. Depending on your objective, you will need to either choose Choose from list or Create custom. The default list includes Bounces, Pageviews, and Sessions duration; custom objectives will let you choose between Events and Pageviews where you can set them up to your liking.

Set up measurement and objectives

You have to set up the objective so that it matches the GA event you set up earlier in the PageFly editor. For example, we set the GA event category as “AB Testing” and the event action as “Add to Cart”. So we will set up our Custom Event like this: 

Set up A/B Testing objectives

After that, all you have to do is to Start the experiment. You can choose to end it anytime you want.

Start A/B Testing

Step 5: Wrap up and check the results 

And now your website is ready to go! Use another browser or use Incognito mode to check your site and see if the variant shows up. 

You can find reports for the experiment in your Google Analytics dashboard at Behavior > Experiments.

View A/B Testing reports

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
PageFly Languagues

PageFly Help Center is now available in Chinese. Please check the flags on the page header.

I got it!
Join PageFly Facebook Group to get Bearie Coin JOIN US NOW