How to organize ABn testing through Tag Manager

In fact, the title of this article “ABn testing via Tag Manager” is not fully deployed, because we will actually listen to Google Analytics events from Tag Manager and pull them up as ABn testing targets in Google Optimizer. In other words, we will do multiple ABn testing via Tag Manager without touching the site code.

So, imagine this situation:

Problem 1 You are a new employee of a large bureaucratic organization, such as a Bank. You’ve been hired as an Internet marketer to pull up the Internet, and you’ve been tasked with improving the site, and applications through it.

Naturally you decided to improve the site by means of facts and figures, that is, with the help of ABn testing through Google Optimize. And here, of course, the second problem arises.

Problem 2 You do not have direct access to edit the code of the site. Writing a request to change the code is very long and resource-consuming. But luckily you have access to Google Tag Manager (GTM).

Problem 3 You’re starting to realize that organizing ABn testing, with Google Optimize and loading targets from Google Analytics with your own events, is difficult to say the least. Especially when you keep in mind that they are both in the GTM container, and that you don’t have direct access to edit the site code to put onclick events on the elements you want. ABn testing should start this week.

So. Generally speaking — we will create ABn testing through Tag Manager.

The final behavioral factor for our user is two actions: entering an amount and pressing the “transfer” button. These two actions will be taken into account by us as key metrics for ABn testing.

Step 1: Create your own events in Google Analytics

Create a goal with your own event

In the target settings, set the template to “Custom”

We name our goal so that it will be clear to us in the future. Because it will be located in the Optimizer reports.

In the event conditions, be sure to specify the Category and Action, the rest is up to you. This is done so that our target will count events of a certain category and a certain action, which we will specify below in the code of sending information about the triggered event.

Step 2: Create a sending code

The code to send information about the triggered event to Google Analytics looks like this:

_gaq.push(['_trackEvent', 'category', 'action', 'opt_label', 'opt_value', 'opt_noninteraction']);

It needs to be added to the code that will turn it on (to make it send). For example, if we want to track a button press, in the tag of this button we write the event

onclick

and paste the code above into this event. And this is what you get…

<button id="my_btn" onclick="_gaq.push(['_trackEvent', 'category', 'action', 'opt_label', 'opt_value', 'opt_noninteraction']);">My Button</button>

Here we remember that we do not have direct access to edit the code of the site. That’s why we can’t add our code to the button tag. But there are scripts that can listen to the whole body of the site for triggering events, and they are placed in the header of the site — so we can add these scripts to the container GTM.

Let’s make our listening script:

var TransferBtn = document.getElementById("transfer");
  TransferBtn.onclick = (function() {
        _gaq.push(['_trackEvent', 'category', 'action', 'opt_label', 'opt_value', 'opt_noninteraction'])
  })();

From this script we can see that there is some element with id=”transfer”, when you click on it our code is triggered, which sends the data to GA. Well, in order to send our data to our category, which we created earlier, and be accounted as a conversion, we specify instead of:

1. category
2. action
3. opt_label
4. opt_value

Everything is taken from the now-created goal

But again, in our case, since Google Analytics is in the GTM container, the above code, which is also located in the GTM container and is supposed to send data to Google Analytics, just can’t reach it.

This was the hitch that led to the writing of this article. Because there is only one article on the Internet that indirectly talks about this situation, which can happen to any employee who gets a job to “fix the Internet” in a huge company.

There is a GTM layer through which you can learn how to send data for any tag in a container. And it is called dataLayer.

Step 3: How to send data to GA through the dataLayer

Go to the “Variables” section in GTM, and in the “User Variables” field create 4 dataLayer variables there (dataLayer). I have them: eventCategory, eventAction, eventLabel, eventValue.

This is where you can create custom variables.

When selecting the type of variable, select: Data level variable

In the Data Level Variable Name field, specify the names that will correlate with the conditions of the targets from GA, so: eventCategory, eventAction, eventLabel, eventValue.

Now let’s create that tumbler, the bridge to transfer our data.

1. Go to the “Triggers” section and create a trigger with the “Custom event” type there.
2. In the name of the event we write any name. This name will be the activation condition for our script, which will send data through the dataLayer.

Now we create the event itself.

1. Use as category, action, label, and value our previously created custom variables: eventCategory, eventAction, eventLabel, eventValue.
2. Activate the event by the trigger we created (user event) — event-to-ga.

Step 4: Complete the listening code and publish it in the Google Tag Manager container

Almost everything is ready. It remains to add the code to the event listening script to send about the triggered event.

Let me remind you that previously it looked like this:

var TransferBtn = document.getElementById("transfer");
  TransferBtn.onclick = (function() {
        _gaq.push(['_trackEvent', 'category', 'action', 'opt_label', 'opt_value', 'opt_noninteraction'])
  })();

Event triggered listening script, inside which is the code to send information to GA. But we already found out earlier that this one will not reach GA if GA is in the GTM container, and therefore we need to use the dataLayer. Therefore, our code to send information to GA will change to:

dataLayer.push({‘event’: ‘event-to-ga‘, ‘eventCategory’ : ‘category_value’, ‘eventAction’ : ‘action_value’, ‘eventLabel’ : ‘label_value’, ‘eventValue’ : ‘value_value’ });

where event-to-ga is our bridge. We need to mark up the full event-triggered code in the body of the site (which we don’t have edit access to) in the GTM container as Custom HTML.

Go to Tags and create a tag with the type Custom HTML, and set it for all pages as shown in the screenshot below.

Step 5: Checking that the code works

We publish our container. And then right away we need to check if everything is working properly. So we go to Google Analytics and open the Real-time section, subsection Events. If the traffic on your site is high enough, the window that opens should have numbers greater than zero, and floating charts in the “by seconds” block.

Вот так выглядят работающие собственные события

That’s it! We’ve literally performed a miracle! Without touching the site code, we’re tapping it for events and sending them to Google Analytics as targets with their own events, which we then hook into Google Optimize for more specific, customized and in-depth AB testing.

To make it clearer, I drew a diagram of the logic of what we did

How to organize ABn testing through Tag Manager