Google Optimize Video Tutorial – A/B Testing [CRO]

Google Optimize is the newest addition to the Google Analytics tool set. You can quickly and easily build A/B Tests with a point-and-click editor. Of course it integrates perfectly into Google Analytics as well. In this video, we are going to show you how to install and use it.

Google Optimize: https://optimize.google.com
Google Optimize Help: https://support.google.com/360suite/optimize/?hl=en#topic=6314903
GTM Ressource Guide: https://old.measureschool.com/guide
Free GTM Beginner course: https://old.measureschool.com/emailcourse
Courses: https://old.measureschool.com/products

?Looking to kick-start your data journey? Hire us: https://old.measureschool.com/services/

RECOMMENDED MEASURE BOOKS: https://kit.com/Measureschool/recommended-measure-books

GEAR WE USED TO PRODUCE THIS VIDEO: https://kit.com/Measureschool/measureschool-youtube-gear

In this video you’re gonna learn how to use a new A/B testing tool set of Google titled Optimize. I’m gonna show you how you can set up a test, run it and analyze your results. All and more coming up right after this.

Hi there and welcome to another video of MeasureSchool.com where we teach you the data-driven way of digital marketing. My name is Julian and on this channel we do tutorials, how-to videos and take a look at the latest marketing tech, just like this one. So if you haven’t yet, consider subscribing. Now, if you are into the world of conversion rate optimization, or CRO, you’re probably familiar with tools like Visual Website Optimizer or Optimizely. They make it super easy to put together an A/B test and run it on your website. Until 2012 Google provided their own tool called Website Optimizer to run A/B tests, but then they integrated it into the Google Analytics Suite as Content Experiments. But it was never that powerful, it really wasn’t really able to manipulate your variation with a drag and drop editor, like VWO or Optimizely is able to do. So now they came up with a completely new product called Optimize. Previously it was only available for Google 360 customers, but now made accessible for free, as well. So it’s time to take a look at this new tool. We’ve got lots to cover, so let’s dive in.

Today our journey starts at optimize.google.com, which the home of Google Optimize. Now, you might not be able to access this page just yet, because currently Google Optimize is in private beta at least for the free version. But you can sign up to a waiting list and get emailed when an access is available. Once you’ve signed up, you are greeted with this dashboard here, which will give you an overview on your running tests. Before we can actually start using it we need to go through some setup steps. The first step being creating your account and container. Now, same as Google Tag Manager or Google Analytics, you have a hierarchy of your account and then separate containers for the different websites you’re running your tests on. Unfortunately right now you are only able to build one container for one account. I don’t know if this is gonna change later, but this is probably a restriction of the free version. Now, you might notice that the container ID features a GTM here, but the ID really doesn’t have anything to do with Google Tag Manager at this point, it is simply the ID of this container. You can name your container, as well. In order to keep the overview I have called this Demoshop. Once this is done, you need to link up your Google Analytics account. That means you need to have Google Analytics installed on your web page and your Google account needs to access to this Google Analytics property. Then you can link it up by choosing your account and the view. Next step is implementing the Optimize snippet. Now, the snippet consists of two parts. One part is the extra requirement of the Optimize plugin, and yes, it’s a Google Analytics plugin that needs to be loaded with your current Google Analytics code that is installed on your website. And there’s a page hiding snippet. Let’s talk about this plugin snippet first. If you have Google Analytics hardcoded on your website, you simply need to add this line to your Google Analytics code on your website. You can also do this through Google Tag Manager. Let’s try this out really quickly. Go over to Google Tag Manager, click on New Tag, and there is actually already a tag template available. Right here, it’s called Google Optimize. Simply click on that, and then you need to define the Google Analytics Tracking ID that this plugin belongs to. I have fortunately saved this already in a constant variable right here. And then we need to input our Optimize Container ID. Where can we find container ID? That’s this code with GTM in front of it right here. Let’s copy that, go over to Google Tag Manager, input that here. Now again, this has nothing to do with your Google Tag Manager ID that you might have from Google Tag Manager itself. This is a Optimize Container ID and has nothing to do with Google Tag Manager. Before we continue let’s give this all a name and choose our trigger. Now, you can use the Ald Pages trigger or define a more narrow trigger to only apply this on the pages you actually run an A/B test on. But this doesn’t generate any overhead, so I’ll just go with All Pages here. Save this. Let’s go into our preview and debug mode, see on our page. And again, we already have Google Analytics running, now our Optimize tag has been added, as well. So this seems to work. Let’s go over to Google Tag Manager and publish this as a version. And Google Optimize is now installed on our web page. Now, what is this second snippet for? This is actually a page hiding snippet. Now, this is totally optional to install but it will basically take care of these little flickers that you sometimes see with A/B tests. So what does that mean? Once the test that we’re gonna configure in a second loads, our Optimize snippet will take care of the changes that are happening to this website. You might have seen on not-so-well-setup A/B tests that the page loads and then suddenly an element changes, which is not desirable because the user might have seen the control before he saw the variation. So we want to make sure that only the variation or the control are shown, and therefore we need to take care of the changes first before we show anything to the user, and this is what this snippet is for. Unfortunately we cannot install this by Google Tag Manager, because Google Tag Manager loads codes asynchronously and we cannot ensure that this is loaded before anything on a web page loads. So we will need to install this manually on our page if you want to run an A/B test on this page. So let’s grab this code here and implement it onto our HTML which means we need to place it before Google Analytics starts running, which is the earliest point of our Google Tag Manager code. So we need to implement it above that right here. Now, you might need to ask your developer to do this for you. We are running here on WordPress so I can easily go in and edit the themes and add my code to the appropriate place here. Update this all. Reload our page here. And we should see our page hiding snippet above all Google Tag Manager code. This is recommended to do in order for your users to only see the variation or the control and not a flicker effect when it switches over to the variation. Let’s click on Done here, and we have installed the Optimize snippet. Now we can go over to creating our experiment. All we need to do is create experiment here, give our experiment a name, choose the URL we want to run this on, and now we can build an A/B test, a multivariate test, or a redirect test which means that we will give Google Optimize two URLs and it decides where to send a user based on which variation should be shown. I will go with a simple A/B test here and see how to set this up. Let’s create this. We are entering the test details screen. Now, on this screen, you can set up a new variation. Let’s do this by clicking here New Variation, give it a name, add this, and now we need to start making changes. How do we do this? We will simply go to Editor here, save our last changes, and in order to do this we actually need to install a Chrome extension. So you need to be running on Chrome in order to do this actually. Let’s click on this Chrome extension and install this to our browser. And it will give us this little new tool, which is the Optimize extension. What will this do? We can go back to our page here. Let’s actually leave our preview and debug mode first so we have a bit more screen. Reload this. Nothing happens. That’s because we actually need to go through the interface of Optimize. And it takes us to the screen, and now loads with the help of the plugin our editor where we can make changes. So this is pretty powerful because we can now point and click and edit our elements to our testing needs. It’s advisable that you come up with a strong hypothesis before you start changing stuff around here that actually are worth testing and not do what I am about to do and just change the button color of this button here. But this is just for demonstration so let’s go with this easy A/B test. You see we have a very extensive set of things that we can change. If you are more on the technical side, you can even edit HTML, insert HTML, or run custom JavaScript to change the elements on a page and build the variant that you have defined beforehand. Alright, let’s change the color here with the editor. This is actually the text color, we should go for the background, and here we can change text color to green. That should do it. Let’s go ahead and look at the other elements here. We could change stuff around but our green A/B test here should do the trick. Some other features of this editor is actually you can change the screen size to see how your A/B test changes if you have a mobile-responsive page. You can also edit the CSS of the element directly, and you have other settings to use this editor more effectively. Once you have done all the changes that you wanted to do, you can save your variation, click on Done. Now we need to go ahead and choose an objective for our test. These are defined by the goals that you have already configured within your Google Analytics account. So if you don’t have any goals implemented, you should definitely do that, and you can even define a secondary objective and even more objectives to run this test against. In order to keep track of your changes and why you did this test, you can enter a description, or your hypothesis, and save this all. And you are ready to start your experiment. Now your experiment is running and is generating data. What does that actually mean? So let’s go back to our page. Reload this page. We get shown one or the other variation, so in this case it’s our variation and not our control. Once we reload this page, we actually always get shown our variation. Why is that? Because Google Optimize actually builds a cookie into our browser. We can check this in our developer tools by going into the Application tab. We can look at our cookies that were set on our Demoshop here, and we see a new cookie called gaexperiment which tells Google Optimize which variation should be shown. It also connects us to declined ID that we see here in our ga cookie, and this ensures that the user always sees the variation that he has seen first. So it doesn’t skew the results once the website is reloaded or the user navigates away and comes back. Just to demonstrate this here, let’s get rid of these cookies and reload our page. You still get the green button here. Let’s do this again. And again. And this time we see we are getting our normal button here, our control version. That means that the A/B test is already running correctly and data should now be generated within our Optimize account. So once we go over to Reporting here, we should have data coming in. This can take a while so right now we don’t see anything here. Let’s go over to a test that I have already run. This is our button test here and we have a 50/50 split between the users who see the original and our green button version. We have a Sign Up goal that is running on our website and we have some data that is already reporting. This was tested on 323 sessions, has been running for six days. Obviously it’s not a very great sample size. Google Optimize then tells us how much better the variation is performing, in this case minus 60% right now, against our conversion goal that we have defined. And we can see this familiar chart where we can look at the probability that our variation will beat our original version. Down here another chart. Obviously this is also connected to Google Analytics, so we can always view these numbers in Google Analytics itself. Once we click here, it opens up a special report where we see our button test, and we can segment with our custom segments here, and also we see our original and green button. This is kind of like the report that we have seen for the Google Content Experiments already. It gives us a bit more variety to play with the data and actually look into other goals that this might be running against in order to slice and dice the data even more and see whether our data is performing well or not. But all in all you can see that Google Optimize works really well with Google Tag Manager and Google Analytics together, and is therefore a very affordable and cool little addition to the Analytics Suite, and lets us run A/B tests or multivariate tests really easily on our website through this point and click editor. There you have it. This is how you can set up an A/B test with the help of Google Optimize. Pretty sweet, huh? I’d love to hear from you. What are your experiences with Google Optimize? Or do you prefer Optimizely or Visual Website Optimizer? I’m looking forward to hearing from you in the comments below. And as always, if you like this video, please share it with your friend or colleague and subscribe to our channel to get more of these videos every Wednesday. My name is Julian. Till next time!

About the author: Julian Juenemann

Julian started and grew venture-backed startups with his unique 'data first' approach to Online Marketing. He then founded MeasureSchool.com to help marketers, like him, the data-driven way of digital marketing.

Inline Feedbacks
View all comments