- 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.
(upbeat music)
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!