Categories
Guides

How to use the Google Optimize a b testing tool?

Google optimize a b testing can be very rewarding for your company or business if you master the tool. Getting the tool to work for you can be difficult for beginners because it offers so many options.

This article is a beginner’s guide for people that want to get into a b testing for no start-up costs at all! I personally use Google Optimize in my everyday job and recommend it to small company’s that have no experience with a b testing. Check out Google Optimize!

Google Optimize Dashboard
Google Optimize Dashboard – 2020

What is the Google Optimize a b testing tool?

Before we start with the actual guide it is important to know what the tool is intended for because this helps you while using it. A lot of users might be coming to your website. Most of your users will be actual people with individual needs and character traits.

How can you possibly make a website that meets everyone’s needs? This is not possible because you can’t get into someone’s head. Then how do I know what works better for my website? You make sure that the target group that sees the adjustment has a positive experience that increases your website goals.

When testing with Google Optimize you will be able to analyze you’re a b test by segmenting for device, age, gender & more. You can use this knowledge to implement personalized adjustments to your website to specific types of users. Imagine that every age group has a different call-to-action because this might be better for your e-commerce conversion rate.

Google Optimize a b testing data in Google Analytics
Google Optimize data in Google Analytics – 2020

Don’t overcomplicate things

Google Optimize is just a simple tool for setting up tests that allow you to personalize your website for your visitors. Sometimes this is for a segment of your visitors when your test is only significant for that group. But it can also happen that the adjustment made by your a b test will be better for your entire user base.

I think this tool is also a stepping stone for beginning CRO specialists because you will be able to set up, evaluate & implements ab tests with Google Optimize on your own without having to pay for anything.

Just follow the steps described here and you should be well on your way of setting up your first a b test with Google Optimize. If you need some inspiration for where to start testing check out my other post about fifteen places to start with conversion rate optimization.


Over 250+ professionals have already signed up!

Join GrowthPenguin to receive the latest blogs in your inbox every week!

Processing…
Success! You're on the list.


How to set up Google Optimize a b testing?

In this section, I will try to guide you step by step through the process of setting up Google Optimize for your website. I will assume you have already set up Google Analytics for your website because this is needed before you can start the guide. If you haven’t installed Google Analytics you can go here to get this set up first.

Next up is the browser you are using. I recommend using Google Chrome because this will probably be the most up to date browser considering it’s a Google Product. They will most definitely make sure that the product works on their own browser.

Google chrome also supports the Google Optimize extension. This extension makes it possible to edit your experiences visually and is recommended for every user that isn’t just analyzing reports.

Installing Google Chrome

You can skip this step if you already have Google Chrome installed.

Step #1: Downloading the installer

To install Google Chrome go to https://www.google.com/chrome/ and press the download button.

Google Chrome download page
Google Chrome download page – 2020

Step #2: Running the executable

Run the program by clicking on ChromeSetup.exe in your downloads bar at the bottom of your screen.

Chrome installation executable
Chrome installation executable – 2020

Step #3: Security warning

When the executable runs you can press run to install Google Chrome. Don’t worry, Google won’t give you any malicious software.

Security warning Google Chrome
Security warning Google Chrome – 2020

Step #4: Finishing the installation

The program should now install on its own and will be ready in a minute or two. Just keep pressing yes and confirm until the browser opens.

Security warning Google Chrome
Google Chrome installing – 2020

Installing Google Optimize Chrome extension

Step #1: Chrome web store

Go to this page and press the install button, the extension should install automatically. If you don’t have a Google Account yet go here first and make an account that you can use for all Google software.

Google Optimize Extension download page
Google Optimize extension download page – 2020

Step #2: Optimize extension

When you installed the extension you can open Google Optimize by clicking on the purple arrow icon in the toolbar and then clicking on the link to go to the website.

Google Optimize Extension
Google Optimize Extension – 2020

Creating a Google Optimize account for a b testing

Step #1: Create an account

When you finished all the previous steps you can need to set up an account for Google Optimize. When logging in for the first time you will need to click the blue “create account” button to create an account. This account can be used to connect multiple websites.

Google Optimize create account screen
Google Optimize create account screen – 2020

Step #2: Account name and policies

Fill in your account name, choose your country, and accept the policies to be able to click next.

Step #3: Setting up a container

Next up is your container. Every container you add will be a website so fill in the domain name like this “www.yourwebsite.com” without the quotation marks and click create.

Google Optimize container
Google Optimize container – 2020

Good job, you already set up Google Optimize for your website. It’s not linked to Google Analytics yet but we will worry about that later. Let’s start setting up your first ab test with Google Optimize!

Google Optimize Dashboard after creating an account
Google Optimize dashboard after creating an account – 2020

How to setup your ab test?

Step #1: Your first experience

Press the let’s go button on the Google Optimize dashboard to get started with making your first test. On this screen, you will be able to give your test a name and choose what kind of test you want. For simplicity’s sake, we will just start with a simple a b test.

You will also need to fill in your editor page. URL This is de literal URL you can use for editing the website. This does not mean you will only change something at this particular URL. More on that later.

I will be changing the text of the footer’s recent post section to recent articles. This simple change won’t require any coding and will probably yield no results but this is just for demonstrative purposes.

Creating an experience in Google Optimize for a b testing
Creating an experience in Google Optimize – 2020

Step #2: Creating a new variant

Once you created your test you will need to follow a few steps to make sure your test is set up properly. Let’s start by clicking the blue button “add variant” to create a new variant of the test.

Google Optimize test in draft
Google Optimize test in draft – 2020

Step #3: Naming the variant

Give the variant a name that describes the change properly so you can easily identify it later on. I will name my variant “Variant – Recent articles”.

Google Optimize adding a variant
Google Optimize adding a variant – 2020

Step #4: Editing the variant

The variant should now be added to your dashboard. Note that weight percentages next to the variant and the original symbolize the traffic distribution for your test. These will change for every variant you add. This means that for every variant you will add it will take a lot longer to reach significance.

Significance basically means that the effect you measured is most definitely because of the change you made. I will make a long article about this in the future. You can leave this for now and click on the blue “edit” button.

Google Optimize dashboard with added variant
Google Optimize dashboard with added variant – 2020

Step #5: Visual editor

This will start the visual editor. The visual editor will show your editor page and multiple tools to start changing your variant.

Google Optimize visual editor
Google Optimize visual editor – 2020

On the top left section of the page, you can see the name of the variant which can be clicked on to reveal a navigation menu for quickly switching between the variants and creating new variants. Just stay on this variant for now.

Visual editor dropdown
Visual editor dropdown – 2020

On the top of the page, you will see “standard” which is also a dropdown menu. Here you can edit the visual editor’s resolution to see if your test still looks good of different devices. This can also be useful for websites where you can only see particular elements on mobile, tablet, or desktop individually.

Device dropdown in Google Optimize
Device dropdown in Google Optimize – 2020

On the top left of the page, you can see the number of changes you made to the page and an info button that notifies you if there are problems with your page. Remember to always check your tests in a live environment to see if they are not creating issues on the website.

A friendly warning!

This tool can break your website if you are not careful. I will show you how to do that later. You can also see the done button which you cannot click yet because we are not done.

Changes, info and done button in Google Optimize
Changes, info and done button in Google Optimize – 2020

On the top left underneath the variant name, you can see the element selection menu and the dropdown. The breadcrumbs show the depth of the HTML element that is selected with the visual editor.

Breadcrumbs in Google Optimize
Breadcrumbs in Google Optimize – 2020

When you click on the arrow next to the box it will open the selection menu. Here you can see the CSS selector that is used to target the selected element. You will also be able to manually add changes when clicking on add chance.

This option is for advanced users only. You will be able to change many different attributes on your website. This is where I personally make all changes using JavaScript. But this is not necessary for most basic tests that you want to start out with.

Element selection menu in Google Optimize
Element selection menu in Google Optimize – 2020
Interactive mode

On the top left underneath the done button, there are a few more options to explore. The <> icon can be clicked to make CSS changes to the website. The arrow with the box opens interactive mode.

This way you test out hover mechanics because they will not work in the visual editors by default. And the cogwheel is the settings reordering content. I don’t recommend using this because it can really screw up your website.

Settings underneath the done button
Settings underneath the done button – 2020

Then there is the element editor hovering over your website in the bottom right corner. Here you will be able to make changes to the website in a basic way. Giving you immediate visual feedback.

Settings underneath the done button
Element editor in Google Optimize – 2020

Step #6: Edit your first element

Let’s edit our first element on the website! For this test, you can simply click on the element you want to edit on your website. When you have selected the element you want to edit you can click the blue button “Edit element”.

Editing an element in Google Optimize
Editing an element in Google Optimize – 2020

Step #7: Editing the text

When you clicked the button a dropdown will appear with several options. Choose the option “edit text”.

Dropdown after clicking edit element button
Dropdown after clicking edit element button – 2020

Step #8: Making the change

You can now change the text as you can do in any other regular text editor. I changed the text to “Recent articles” instead of “Recents posts”. Afterward, you can click the blue “Done” button in the bottom right corner. In Google Optimize a b testing you can also add multiple variants if you want. I decided to go for one variant.

Change made in the visual editor
Change made in the visual editor – 2020

Note that on the top of the page you can see that you now have 1 change. If you click on this text you will get a menu with all the changes. Make sure you only have 1 change otherwise you might have accidentally changed something.

Changes on top bar of Google Optimize
Changes on top bar of Google Optimize – 2020

Step #9: Saving the changes

When you are finished with making the changes press the blue “save” and done button on the top right navigation bar. This will bring you back to the test overview page.

Done button on the top bar in Google Optimize
Done button on the top bar in Google Optimize – 2020

Step #10: Page targeting

Next up is setting up the page targeting. This will decide on what pages the experiment will be shown. This must be done by making rules for the matching URL. This first standard rule will already be set and will be based on the editor page you have added in the previous step. Depending on where you want to show it, you might need to adjust this rule.

Page targeting in Google Optimize
Page targeting in Google Optimize – 2020

I will delete the existing rule and add a regular expression to target all pages on the website. A regular expression is a special kind of rule that is a subject in itself. In the future, I will write an article on how to use regular expressions for page targeting in your a b test for Google Optimize. For now, I will add the regular expression “.*” without quotation marks to target all pages on the website.

Page targeting settings for all page using regular expression in Google Optimize
Page targeting settings for all pages using regular expression in Google Optimize – 2020

Step #11: Checking your URL

Now that you added the information you need to make sure the URLs you have targeted match your rule. Just copy the URL you want to check in the bottom text field and press the “check” link. This will show if your links match or not. You will see that anything will match “.*”. When you have checked your rule you can press the blue “Add” button in the top right corner.

URL checker in Google Optimize
URL checker in Google Optimize – 2020

Step #12: Audience targeting

Great job! You have added the page targeting. Next up is audience targeting. You can segment the people you want to show the test on many different factors. For demonstrative purposes, we will choose to limit our test to desktop visitors. Click on Device category to continue.

Rule type in Google Optimize
Rule type in Google Optimize – 2020

Step #13: Device category

Similar to the page targeting you need to change the rule to set up your segmentation. Set the rule to “Device category equals Desktop”. When you click in the input field you will see a set of predetermined drop-down options that can be used in this field. Click on the blue “Add” button to add the rule.

Choosing a device category in Google Optimize
Choosing a device category in Google Optimize – 2020

Step #14: Experience description

Scroll down and add a description by clicking on the pencil icon in the description section. I usually just add the hypothesis I want to test in here and keep all the related information in a spreadsheet. But feel free to add any text you want and press done.

A hypothesis in Google Optimize that will probably not yield any results
A hypothesis in Google Optimize that will probably not yield any results – 2020

Step #15: Linking Google Analytics

Google Optimize will need to be able to measure the traffic and other metrics while running the test. You will need to link Google Analytics for that. Don’t worry I’ll run you through all the necessary steps. To begin you need to click on the blue “Link to Analytics” button.

Measurement and objectives tab in Google Optimize
Measurement and objectives tab in Google Optimize – 2020

Step #16: Linking your property

You will now see a side menu in which you can connect your Google Analytics property that is connected to your website. Click the property that is connected to your website and press link. This step will require that you have set up Google Analytics for your website. If you haven’t set up Google Analytics or don’t see a property go to this link the fix that.

Linking a property in Google Optimize
Linking a property in Google Optimize – 2020

Step #17: Google Optimize snippet for a b testing

You will now see a pop-up with your personal Google Optimize snippet that needs to be added in the <HEAD> tag of your website to be able to make Google Optimize run.

This can be done in different ways by using Google Tag Manager on injecting it manually. You can change the Google Analytics tag in the main template for your website so it’s activated on all your pages. This will be different for everyone else so I will just show how to add it to your WordPress theme.

Google Optimize snipped installation pop-up
Google Optimize snipped installation pop-up – 2020

Step #18: Editing your WordPress theme

When adding this to your WordPress website you need to go to your dashboard and go to Appearance > Theme editor. Make sure you are using a child theme otherwise the change will be deleted with every WordPress update. You can learn to set up a child theme right here. You can also just skip this step for your first time testing the software and add the Optimize snipped underneath the <Head> tag of the header.php file and pressing the blue “update file” button.

WordPress theme editor
WordPress theme editor – 2020

I have added the snipped that you need to add for Google Analytics and Google optimize here. Change the variables with capitalized letters to make it work for your website.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=VARIABLE"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'VARIABLE',{ 'optimize_id': 'VARIABLE'});
</script>

Step #19: Verifying your installation

The next step is verifying your installation! This can be done by going back to the Google Optimize dashboard and pressing the “run diagnostics link.

Google Optimize installed diagnostics
Google Optimize installed diagnostics – 2020

This will send you to your website where a script will check your installation and tell if you have succeeded or not. If it doesn’t work make sure your tag is implemented correctly!

Optimize is correctly installed
Optimize is correctly installed – 2020

Step #20: Setting up a b testing goals

Almost there! Hang on in there. We need to set up our goals for the experiment we want to run. These goals will be used in test evaluation and send to Google Analytics for further analysis. To start, click on the blue link “add experiment objective” to open a dropdown. Pick “choose from list” in the drop-down menu.

Objectives in Google Optimize
Objectives in Google Optimize – 2020

Step #21: Metrics in Optimize

You will probably see three goals if you are not an e-commerce platform. There are ways to add more goals but this will not be discussed in this guide. I will make an article about that in the future. We will just choose the “vanity metric” bounces. You also add the other two additional metrics if you want.

Choosing an objective in Google Optimize
Choosing an objective in Google Optimize – 2020

Step #22: Final settings in Optimize

Let’s set up the last few settings before we start the experiment on your website. You can enable email notifications if you want to receive important updates. Just leave the traffic allocation on 100% for now.

But you can choose to only run the test on a part of your users. But I strongly recommend not changing this because this pollutes your test data. Finally, you can set-up when you want the change to be triggered. Just leave this on page load for now.

Settings in Google Optimize
Settings in Google Optimize – 2020

Step #23: Checking your variants

We are ready to start the experiment! Good job for hanging in there. This will be a lot easier the next time. Be sure to check your variant by clicking on preview next to the variant and check every device. You have to make sure your test works before you put it online off course.

Preview buttons for variant and control
Preview buttons for variant and control – 2020

Step #24: Setting up your test duration in Optimize

Now you to set up how long you want to run the test for. You can do that by pressing on the clock icon and setting up the desired date. I have set up my test for two weeks. You press the blue “Done” button to save the date.

Schedule for running the test
Schedule for running the test – 2020

Step #25: Press start to begin a b testing with Optimize!

Now press that big start button and start again, the test will run with the date your set-up! I usually set it a couple of minutes after right now so I can check if it went online.

Schedule for running the test
Google Optimize starting button and planning – 2020

Step #26: Check if your test is offline

Go to your website and see what variant you got! You are already Google Optimize a/b testing! You might be seeing the control but don’t worry we can manually change it so you will see the variant.

Variant on the website
Variant on the website – 2020

If you want to change the variant you need to open the element inspector by right-clicking on the web page and clicking inspect (ctrl – shift – I). Then on the top right click on the double arrow and click on Application.

Variant on the website
Element inspector in Google Chrome – 2020

You can enlarge some of your windows by sliding the window to the left. Then click on cookies and look for the cookie _gaexp. This is where the variant of your test is stored on a device.

Google Optimize experiment ID

You will see a string that represents variant id followed by .0 or .1. You guessed it right, 0 is the control, and 1 is the variant. By changing the value behind that string you can refresh the page and get the different versions of your test.

Google Optimize cookie that is the variant
Google Optimize cookie that is the variant – 2020

You might have seen this value before in the Google Optimize experiment dashboard and that’s correct. The id can be found here and can be used in Google Analytics to segment your data.

Google Optimize experiment ID
Google Optimize experiment ID – 2020

Conclusion

Congratulations! You are now able to use the Google Optimize a b testing tool. You can start testing call-actions on all of your pages now. Be aware the anything above the fold might have a visible change that will need an additional snippet. Good luck with your first tests! My next article will be on analyzing a test in Google Analytics and Optimize so watch out for that!

Leave a Reply

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