• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

UpBuild

Values-Driven Technical Marketing

  • About
    • Mission & Values
    • Meet the Team
    • Be a Builder & Work at UpBuild
    • Offices & Location
  • Expertise & Services
    • SEO
    • Analytics
    • CRO
    • Custom Training & Education
    • Technical Marketing
  • Working With Us
    • Pricing
    • Non-Negotiables
    • Case Study: Zoomdata
    • Case Study: Indow
    • Case Study: Twistlock
  • Blog
  • Contact

How To Run Split Tests on Outbound Links with Google Tag Manager

January 28, 2020 by James McNulty Leave a Comment

It’s been a while since I last used Google Optimize. After logging in recently I was quite impressed to see just how far the platform has come. If you’re not familiar (or haven’t looked at it in a while), I highly recommend checking it out. Here’s an article we wrote a while back that should give you an understanding of how it could be used for various user experience experiments.

Despite the vast customization options that Google Optimize now provides, there are some experiments that Google Optimize still can not perform. When we can’t run the tests we need on Google Optimize, we turn to Google Tag Manager, a tactic I thought I’d share today.

Where A/B Platforms Fail

When an UpBuild client asked us to help them set up a split test, also known as a redirect test, we immediately thought of Google Optimize to run what seemed like a pretty straightforward experiment. A split test involves using different URLs or paths in the customer journey to see how positively or negatively it affects the end objective.

However, the client wanted to understand more about their conversion rates on outbound affiliate links in their articles, and whether they might convert more by sending users to internal pages that reviewed affiliates first.

This presented a problem. In order to run experiments with Google Optimize (and other A/B testing platforms), you are required to install code that allows the respective platforms to function and manipulate the DOM of your website.

It quickly became clear that we couldn’t ask any external affiliate site to install code from Google Optimize, VWO, Optimizely, or any other A/B testing platform. So we turned to the next best cost-effective alternative; JavaScript and Google Tag Manager.

Identifying a Sitewide Element

Our first hurdle was identifying where all of the affiliate links on their site were. The client has thousands of pages. Across these pages, there are specific affiliate links within articles. Our client had asked us to set up this experiment for six unique affiliate links, and there was no way to easily identify which pages contained them. So our first goal was to identify which pages contained our specific affiliate links.

The approach below will help you identify almost any element in the HTML of the page.

First, we set up Google Tag Manager to deploy a Custom HTML Tag that contained a small JavaScript code. This code uses getElementbyId to look within a specific section on the page using its id, in this case <div id='content'>. This was the section of the page that contained the body of the articles and within that, our affiliate links. When one was found, we pushed a value, in our case the specific affiliate URL, into the dataLayer:

<script>
var elem = document.getElementById('content');
var text = '"https://affiliate.com/link/"';
if(elem.innerHTML.indexOf(text) > -1) {
  dataLayer.push({'AffiliateLinkFound': 'https://affiliate.com/link/'});
}
</script>

You could use any value here, but since we knew we were setting this up for six specific URLs we found it easiest to use the affiliate URL as the value.

Here’s how this tag looked when compiled in Google Tag Manager:

We added this script, (again customized for each affiliate URL) using Custom HTML Tags, firing on All Pages (Page View).

With this in place, we were able to leverage each instance of AffiliateLinkFound in the dataLayer to deploy six other Custom HTML Tags that contained our split test JavaScript code. Additionally, this initial identification method helped prevent us from deploying the split test experiment unnecessarily across the entire site.

The Data Layer Variable and Trigger

In order to create our trigger, we first needed to create a Data Layer variable that acknowledged when an affiliate URL was found.

In Google Tag Manager, we selected the Data Layer Variable type and simply added the name designated in the tag, in this case, AffiliateLinkFound. 

From here we were able to set up the trigger using Window Loaded that fired when the dataLayer variable AffiliateLinkFound contained one of our affiliate links:

Now that we were able to identify pages that contained our affiliate URLs and we had a trigger ready to fire, we moved onto setting up the JavaScript code that ran the actual test.

Split URL Test – JavaScript Code

The JavaScript code below accomplishes the following:

  1. In HTML of the page, find all instances of
    a href="https://affiliate.com/link/"
  2. For each instance that exactly matched (i.e. did not contain any other query string parameters – another factor we had to take into account), use the replace function (outlined below as replaceFn).
  3. Then replace each instance on the page (of which there could be three or four of the same affiliate link) at random with either an internal link to a review of the affiliate (https://my-site.com/affiliate-review/?test=true) or just keep the link the same (i.e. https://affiliate.com/link/).
    • You will notice that the internal link below also contains a query string parameter (?test=true) this allowed us to keep track of the experiment via Google Analytics.

Here’s how the whole code looks (view the full JavaScript code here):

Here’s how it looks compiled in Google Tag Manager with the trigger we set up earlier:

To recap, once published, we should expect this tag to accomplish the following:

  • Find all pages on the site that contain a specific element, in this case, all instances of a href="https://affiliate.com/link/".
    • When found, a dataLayer value is generated.
  • Then our custom split URL JavaScript tag is deployed on all pages that contain the dataLayer value as defined in the trigger.
  • Lastly, all instances of the element (i.e affiliate URLs) on the pages that contain them will be altered at random to one of the two URLs we defined in the replace function.

The Results

From here we were able to open up Google Analytics to compare and contrast the conversion rates alongside data provided from the client’s affiliates, to understand whether an endorsement in the format of a review from our client, as opposed to simply sending users directly to affiliate sites from in-article links, helped to increase conversion rates with affiliates.

More Ways to Experiment

While this method originally set out to solve a specific issue, you could use this code for other experiments if you didn’t want to install Google Optimize or another testing platform.

  • Replace All – You could also modify this script to simply replace all of the affiliate links (or another element) with one choice, instead of choosing from two or more. To do that you would simply modify the replace function to return a single item. That would look something like this:

The following suggestions may cause element flashing for users. In other words, they may see a noticeable change if the original element has loaded before the script is able to change it for the experiment. This would be especially noticeable over slower connections and is also often a concern with other A/B testing tools. With that in mind, you may want to experiment with elements below the viewport for these particular methods to see how they perform.

  • Experiment with Images – Change the source URL for an image on a page, or perhaps a global image across multiple pages with another image.
    • Since there is no query string parameter attached to the image URLs, you will want to make sure you know which version of an image may have performed better. We recommend leveraging the code at the beginning of this article that identifies an element on the page and pushes values into the dataLayer for each image. From there you can set up an event in Google Analytics for each respective image URL to correlate with conversion data.

  • Experiment with Calls to Action – Perhaps you want to understand whether a certain color or phrase works better for a button. You can leverage this code to switch out different CSS classes or phrases of text.

With Google Tag Manager you can deploy tags based on a seemingly endless number of factors. For example, you can limit your experiments to specific pages, users and even actions.

Again, while we don’t think this method should be a replacement for A/B testing platforms, it did help us solve a unique problem that other services did not seemingly provide a solution for in perhaps the most performance-friendly (and cost-effective) way possible.

If you use this code, we’d love to hear how you applied it.

Related

Filed Under: CRO

About James McNulty

James McNulty was born in Sidcup, Kent England in 1985. James now lives in North Richland Hills, Texas with his wife Megan, and two dogs Colin and Davey. James has been building websites since 1999 and is currently a Senior Marketing Strategist at UpBuild.

Keep up with James on Twitter

Stay in the Know

Reader Interactions

Leave a Reply Cancel reply

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

Primary Sidebar

Get Our Weekly Newsletter

Technical marketing news made simple, from UpBuild's expert team straight to your inbox.

* indicates required

Browse previous newsletters. It's good stuff.

Recent Thoughts

A 5-Step Process for Dealing with Duplicate Content

January 21, 2021 By Gaby Gebo

Onward Into 2021

January 12, 2021 By Mike Arnesen

Google Analytics 4: Crawl Before You Walk

January 5, 2021 By Will Hattman

How to Solve Challenging Technical Problems in 8 Steps

November 20, 2020 By Mike Arnesen

Why Privacy-Focused Analytics Tools Aren’t Used More

November 13, 2020 By Alex Ramadan

In the Spotlight

Engagements

You don't have time to worry about technical marketing and SEO. We do, and what's more, we love doing it. If … [keep reading] about Engagements

Stay Connected

  • Facebook
  • LinkedIn
  • Twitter

Footer

Who We Are

We're geeks. Unashamed and idealistic. We're here to do innovative work that gets results for clients we're proud to partner with.

Learn more about us

Featured Blog Posts

A 5-Step Process for Dealing with Duplicate Content

Onward Into 2021

Google Analytics 4: Crawl Before You Walk

Newsletter

Sign up for our updates.

  • Home
  • About
  • Contact
  • Offices & Location
  • Certifications & Associations

© Copyright 2021 UpBuild, LLC · All Rights Reserved · Proudly powered by WordPress