Google Optimize has become a popular tools for A/B Testing and Conversion Rate optimization – Here is how to set it up. First we will discover the account creation, then we’ll see how to install the snippet with Google Tag Manager or the other hardcoded versions of the Tracking code (analytics.js or gtag.js) and lastly we’ll install the Page Hiding Snippet.
🎓 Learn more from Measureschool: http://measureschool.com/products
🆓 Correct Google Analytics Setup Course: https://measureschool.com/products/google-analytics-course/
🆓 GTM Resource Guide: http://measureschool.com/guide
🆓 Email course: Course: http://measureschool.com/emailcourse
🚀Looking to kick-start your data journey? Hire us: https://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
Hi there, welcome back to another video of measureschool.com teaching you the data driven way of digital marketing. My name is Julian and today we want to talk about how we can set up and install Google Optimize to run experiments on our website.
Now if you have signed up to Google Optimize, you obviously need a Google account to do this. You will be greeted with this interface where you can set up your account. Now like in Google Analytics or Google Tag Manager, there is an account structure, that is nested from Account to Container and then New Experiment. I would recommend as the account is to choose your company name, beneath the company you might have different websites. We’ll put this into one account. Now you can optionally tick these boxes and then right here, you need to acknowledge terms of service. Let’s click on next and then you’ll be greeted with the container setup. Now the container right beneath the account. So here you can enter your website, just like this and create your container. Like I said, we have all accounts and we have our company account and then beneath that we have our container so you could have multiple containers in one account if you choose so. From here, we need to get into the setup of Google Optimize on your page.
Now I have a demo shop here, running on WordPress, where I’m gonna demonstrate the installation of Google Optimize. The first thing that we see here is that says create experiment. I would skip this step and go right to Link to Google Analytics, because this is actually the setups that we need to undertake. Now we go with link property and here you need to choose your Google Analytics property that your Google account that you’re logged in with has access too. So here are different accounts, and I’m gonna go with our demo shop right here. Optionally take the view that you have enabled. And then link this to your account. This will open up a new popup here, where we can now add the Optimize Snippet to our site. Let’s get the Snippet. Here we have some implementation instructions.
Now in order to install this, there are actually different methods, because Google Optimize heavily works together with Google Analytics and Google Analytics has over the past year experienced different changes to their tracking code. Therefore we might go through different methods here in order to get this installed. What you definitely need in order to make this work is access to the backend of your website, where you can change the HTML page. This might be different for your website, depending on how you have installed Google Analytics, but in the end, you should be able to get to the html code later in the background, and be able to edit your Google Analytics code. Now my website is running on WordPress so I’m gonna go in into the Admin and access my Editor and appearance right here. I can edit the theme files. I have my Google Analytics code installed in the header PHP. Now again this might differ for your implementation of Google Analytics, and here we find our Google Analytics code right here. This Google Analytics code has changed over the past year so maybe you have a different version here. We are right now looking at the analytics JS version. So if you find it as analytics JS in your code, then you can follow these steps. Now all we need to do is look at our code here again, in this popup and add this one line. Require and then gtm desk code right here. This has nothing to do with your Google Tag Manager, if you have Google Tag Manager installed. This is something that is required to load the Optimize plugin with Google Analytics. So let’s go back here and implement this in our page. So that should be it. Update the file. And we should be all set.
Let’s open up our page. And then check with our tag assistant whether Google Optimize is installed correctly. So we have now installed Google Optimize on our page. Now what if your Google Analytics code looks a bit different from this one, and you don’t have analytics JS running? Then the second option that might be the case is actually that you have already the new gtag installed. So let’s take a look at this. I’m just gonna cut this here and put this under my comment. And take the second code out. So what if your code looks like this? This is the new gtag that actually gets recommended if you go into Google Analytics and install your tracking code. You’re not getting the old analytics JS anymore but the new gtag.js.
We did another video on that, if you want to find out more about this, and if you have a complete new installation of Google Analytics, then you might as well take the gtag.js. If you have still the old version running, that’s all fine. There’s actually no new functionality here and analytics JS is still supported. So you don’t have to change over your tracking code, but this is just a newer version of an analytics implementation. And here we also have the capability of installing our Optimize Container. All we need to do is follow the syntax here in the HAP section, where we add our code right here. We need to have a comma after the tracking ID. And then this code bit. So let’s copy this, go back to the page, and again after our tracking code, just gonna replace this. We have a comma and then our optimize ID. That would be this ID right here. Let’s put that in. And you now have Optimize implemented with the gtag. Let’s update this. Try this out again. And we see we have our global site tag installed and also Google Optimize and Google Analytics.
So this is the way how to install this little tracking code with the global site tag. Now the last case that might be how you have Google Analytics installed is actually via Google Tag Manager. So you might have the script of Google Tag Manager installed on your page, that deploys your container. Now you might be aware that within Google Tag Manager, you’re actually able to use a predefined tag. That is called Google Optimize right here. Where you can install your Google Analytics ID and your Optimize ID but when I read through the documentation and how to install Optimize with Google Tag Manager, they actually said that it’s not recommended to do the implementation through Google Tag Manager, but rather load the library directly on your page. So the recommended implementation is to actually install your Google Analytics script right here, before your Google Tag Manager snippet, exactly again with the required function of your Google Optimize container, but since you might have Google Analytics and Google Analytics pageview tag, deployed through Google Tag Manager, you don’t want to double this, and that’s why we’ll take out this pageview functionality, and so this code is only here to install Optimize on your page. Again notice this code is the Optimize container. This has nothing to do with Google Tag Manager. This is your container ID for your Google Tag Manager. When we update this, it should deploy it on our page. Let’s refresh. Again we see we have now Google Tag Manager installed, which deploys our Google Analytics pageview tag, and we have our Google Optimize installed. So these are the three cases, that you might encounter when you install Google Optimize on your page. At this point, we have Google Optimize installed correctly on our page, and can start running experiments.
There’s an optional step that is highly recommended to install them. And this is the page hiding snippet. So when we go to next here on our popup, we actually get a new snippet that is called the page hiding snippet. This hiding snippet reduces the page flickering. This is an effect that your users would encounter when they come to a page when an experiment is running and maybe you have change for example the color, of the web page. The user would first see the control version and then your variation essentially flicking from one version to the next, which is obviously something that’s not desirable and could screw your numbers in your test results. And therefore this hiding snippet actually loads your experiment first and then releases that version on the screen through the user so there’s no flickering effect once the user comes to your test page.
Now in order to install this, you simply need to copy this and place it before your analytics tracking code. So in our case, here’s our analytics tracking code. You want to place this beforehand and then we have this page flickering code installed. Now I know some people might think you could install this through Google Tag Manager because you have Google Tag Manager already installed, but this is not recommended because you can’t control when a Google Tag Manager code gets deployed and this page hiding snippet would not work in that instant. So now that we have it installed, let’s reload the page. See if there are any errors again. Everything is fine. We don’t have a tag for a page hiding snippet, but it’s installed on our page. We can also see this in our viewsource. So right here, we have our page hiding snippet, and that should be working fine. Now we have set up Google Optimize on the page correctly and can go to the next step. We finished this. We have linked our Google Analytics account. The last step that is actually required is to install a Chrome Extension to your browser. You’ll get this once you start building an experiment, so let’s just go into a new experiment.
You can choose if it’s in B test. We will have another tutorial on this. And the specific page that you want to run this on. Let’s create this. And then we can create our variant. And here it then ask us to install our Chrome extension, which you can do right through this menu. It’s now installed. You will have this little icon up here. And your website will load with Google Optimize installed and the browser plugin will let you build your variation. So this is how you can install and set up Google Optimize on your website.
Just to recap. You need to set up an account in a container. Link that all to your Google Analytics account. Then install Google Optimize plugin into your analytics code. Depending on which codes we showed you the different methods and add the hiding snippet before your analytics code loads. And in order to build your variations, you need to install the Google Optimizer extension fulcrum.
And this is how you can set up Google Optimize on your website. Alright, so did you like this video? Then don’t hesitate. Give us a thumbs up, and if you want to see more then you can go over to the next video over there, or subscribe to our channel right over there because we will bring you new videos just like this one every week. Now my name is Juliann, see you in the next one.