Categories
Unbounce

Tracking Unbounce AB tests in Google Analytics the right way.

One of the reasons you might want to add your Unbounce AB tests to Google Analytics is because you want to attach it to a bigger goal down the funnel. e.g. Your AB test may be on a lead gen page with just an optin but you may want to also know down the road, how many people that came from Variant A purchased the product eventually as compared to Variant B.

Or you may have your own reasons to push Unbounce AB test results to Google Analytics.

Either way, this is a short post on how to do that.

Before we start off, one of the things that I highly recommend is creating a report visual i.e. how would you like these results to appear in your reports. This depends on your marketing team generally or whoever wants to make decisions based off of these reports. However, a simple way to do that would be to add the results as “Events”.

So, lets define our events.

Category: AB test
Label: Page Name (Variant ID/Name)
Action: View / Form Submission

So what I am doing here is that I am assigning a category of AB test, so all my test results in the future will be included here. There are just 2 possible actions on a lead gen page and those are either a user will “View” the variant OR they will “View” and “Submit” your optin form. So we are using those 2 actions under “Event Action”. Therefore for a form submission we will have 2 actions always – View and Submit because a form cannot be submitted if it is not viewed.

Lastly, we want to know which variant was viewed or submitted. Thats the whole point of this exercise, right? Right. So we do that under Event label.

So lets say the page I am testing is called “My Amazing Service”. Finally, your report would look like this:

CategoryActionLabelUnique Events
AB TestViewMy Amazing Service (Variant A)45
AB TestViewMy Amazing Service (Variant B)20
AB TestForm SubmitsMy Amazing Service (Variant A)18
AB TestForm SubmitsMy Amazing Service (Variant B)10

Note that adding the page name to the label adds an identifier to recognise which AB Test are we talking about unless you have just 1 AB test and you always know which one it is. But if you are doing countless AB tests, or maybe even a handful, I think adding page name is a great way to make this thing more sensible when you look at the reports. This page name is basically the name you assign to your landing page in Unbounce. Like here:

Its easy to see the conversion rate for each variant. As well as compare the two.

Once you have this information in your events reports, you can view them as you like.

I could do

LabelActionUnique Events
My Amazing Service (Variant A)View45
My Amazing Service (Variant A)Form Submits10
My Amazing Service (Variant B)View20
My Amazing Service (Variant B)Form Submits18

This is how we will do.

Set up in Unbounce

Not much to do here. Just make sure that your conversion goal is set to Form Submissions. As shown here:

When using Google Tag Manager

For this to work in Google Tag Manager. we’ll be creating the following 2 variables:

  1. Unbounce Page Name
  2. Unbounce Variant ID

We are creating this variables in our GTM container to use them in various tags. There is at least one tag, I’ll show in this example but having these variables will give you the freedom and flexibility to use them according to your data needs.

What if you could make Variants more recognizable? Instead of IDs, have names.

Its not humane to understand the IDs. Unfortunately, Unbounce does not let us pull the name of the variant. There was a hack suggested in a community post around 7 yrs ago 🙂 but its still not in place which kind of sucks.

So how can we make it more human-friendly so our brain can process it better. The only solution I could think of is pretty manual unfortunately and has to be done for every AB test you do. Which means you have to manually go in and give a name to the variant.

Lets suppose you are testing between “Get free consultation” and “Download a whitepaper” and would like your variants to be named accordingly. So this is what we’ll do:

In your Get a free consultation variant, add the following Javascript in Head section.

<script>
var variantName = "Get free consultation"
</script>

In the other variant, add this

<script>
var variantName = "Download whitepaper"
</script>

Create Variables

The first variable we’ll create is Unbounce Page Name

Create a Custom Javascript variable and copy the following code.

function() {
	var pageName = ub.page.name;
	return pageName;
}

Next is another custom Javascript variable called Unbounce Variant ID. For this, use the below code.

function() {
	var variantId = ub.page.variantId;
	return variantId;
}

Now the last variable that comes from Unbounce Variant Name for which we manually added the code

Also a custom javascript variable. We’ll call it Unbounce Variant Name. Use the following code

function() {
	var variantName = window.variantName;
	return variantName;
}

Create Triggers

We will create 2 triggers:
1. Unbounce AB Test Pageviews
2. Unbounce AB Test Form Submissions

We create these triggers to differentiate between pageviews and form submissions of pages that have an AB Test running versus the ones that do not. This is important to save hits and to only fire tags when its needed.

Unbounce AB Test Pageviews

This is a simple trigger. All you have do is create a new trigger of pageview, click “some pageviews” and choose the variable Unbounce Variant Name does not equal undefined

Unbounce AB Test Form Submissions

Another simple trigger that uses the same settings as the one above. Only this time, instead of choosing a pageview trigger, you will choose the Form Submissions trigger and set it to fire on Some form submissions where Unbounce Variant Name does not equal undefined.

Note these triggers will not work if you have not added the Variant Name code manually to each variant.

Create Tags

Now is the time to add your Event Tag. Its all coming to fruition! Whoo.. 😉

We will be creating 2 tags. One for a pageview action and another for form submission action to fire on each of the triggers we created above. Here is how:

Choose an event tag
Event Category: AB Test
Event Action: View
Event Label: {{Unbounce Page Name}} ({{Unbounce Variant ID}})

Note that if you copy the above exactly as is, you have to make sure your variables are named that way, otherwise you wont get data. Use the right variable names in braces. This shouldnt be a problem for you if you have created even 1 variable ever.

Choose the triggers Unbounce AB Test Pageview.

Create the second tag. Same as before, choose an event tag
Event Category: AB Test
Event Action: Form Submit
Event Label: {{Unbounce Page Name}} ({{Unbounce Variant ID}})

This time, you will choose the trigger Unbounce AB Test Form Submissions

The Good News!

Once you have set these tags, triggers and variables, you will not have to do it again for any of your AB test. This is a one-time activity and you’ll always have AB test results in your GA account.

Now, you are ready to run your tests and see the results in Google Analytics!

When using Google Analytics

You may always not be using Google Tag Manager. So here is how to do it in Google Analytics.

Add this script right below your Google Analytics code. Note, you cannot add this script before your GA tracker is set.

This script will show you only the Variant ID (not the variant name) in your events.

<script>
  ga('send', 'event', 'AB Test', "View", ub.page.name+" ("+ub.page.variantId+")");
  window.ub.hooks.afterFormSubmit.push(function() {
    ga('send', 'event', 'AB Test', "Form Submit", ub.page.name+" ("+ub.page.variantId+")");
  });
</script>

This is one of the features that I love about Unbounce forms – the hooks. Basically what we did in the code above is first pass a simple GA event on a pageview i.e. Views. And on form submit, pass a GA event for form submissions. The Hook feature of Unbounce allows us to bind any sort of events after a form is successfully submitted. More details on Hooks are given in this Unbounce community post.

To see the Unbounce Variant Name in your events, use the following script

<script>
  ga('send', 'event', 'AB Test', "View", ub.page.name+" ("+window.variantName+")");
  window.ub.hooks.afterFormSubmit.push(function() {
    ga('send', 'event', 'AB Test', "Form Submit", ub.page.name+" ("+window.variantName+")");
  });
</script>

Note that the above script is additional to defining the variant name. So, if you want the Variant Names to appear in your event reports, you are going to use 3 scripts:
Script 1 – will define your variant name. Will be different on each variant.

<script>
var variantName = "Download whitepaper"
</script>
<script>
var variantName = "Get free consultation"
</script>

Script 2 – Right below this little script shall be your GA tracking code script. Will be same in both variants.

Script 3 – And right below that you will have the GA event script given above. Also same for both variants.

End Result

I hope this post relieved some stress you maybe having about analyzing Unbounce AB test results with the rest of your website stats.

If you’re using any other methods, please feel free to comment below and let the community know what they are.

Leave a Reply

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