Track Affiliate Sales with Google Tag Manager and Google Analytics

In one of my previous blog posts, I’ve shared an idea how to track affiliate link clicks with Google Tag Manager. But that guide is useful if YOU, as an affiliate, promote someone else’s products and just want to track all the outbound affiliate link clicks.

But what if you’re the owner of the affiliate program and you want to measure which partners are driving the most sales of YOUR product?

In this guide, I’ll show how to track affiliate sales with Google Tag Manager and Google Analytics.

Here’s how a typical affiliate (a.k.a. referral) program works: a partner/affiliate promotes a link to your website/product, and that link contains partner’s ID, e.g. https://www.mybusiness.com/?affiliate_id=12345abc. Whenever someone lands on a page with that URL and makes a purchase, the partner receives a commision.

Usually, when a partner’s referred visitor lands, a cookie with that affiliate ID is stored on the visitor’s browser. Thanks to it, a sale can be attributed to the correct affiliate.

There are three main ways how this tracking can be implemented:

• Everything is done by the developer. When the URL of the landing page contains an affiliate_id parameter, then the cookie (with that affiliate ID) is stored in the browser. If a visitor completes a purchase and has an affiliate cookie, the value of the cookie is fetched and stored in the database. At the end of a month (or a quarter), you (or your developer) checks and calculates how much each affiliate earned.
• Using a ready-made 3rd party solution which needs to be integrated with your website/online store.
• The tracking is implemented via GTM with Google Analytics. When a URL contains affiliate_id, a cookie will be stored with GTM (which contains that affiliate ID) and custom dimension (session scope) will be passed to Google Analytics. When a visitor completes a purchase, it will be attributed to that affiliate_id. Later, and in GA reports you will be able to see which affiliates contributed to your sales the most.

Before we continue, keep in mind that the first two solutions are more robust and will not be blocked by particular extensions (most probably), while, on the other hand, Google Tag Manager and Google Analytics might be blocked by extensions, such as Ghostery. Anyway, if you’re not ready to invest a lot (for now), continue reading this guide and you’ll learn something new.

This guide is pretty long, so feel free to bookmark it for the future.

 

 

#1. The plan

Here’s what we’re going to do in order to track affiliate sales with Google Tag Manager and Google Analytics:

1. We’ll check the URL of every page and if at any moment it contains an affiliate ID, we’ll fetch it and store in the cookie.
2. After that, we’ll push cookie’s value to Google Analytics as a session scoped Custom Dimension.
3. Track a successful purchase. If affiliate ID was set during that session, it will be linked to that purchase.
4. See how the affiliate ID is displayed in the custom report within Google Analytics.

 

#2. Getting Things Done

First, you need to decide what kind of query parameter will you be using to differentiate affiliate traffic. In this example, I’llbe using affiliate_id and the sample URL will look like this https://mywebsite.com/?affiliate_id=12345abc.

In order to store the value 12345abc in a cookie, we’ll need to complete 3 steps within GTM:

• A URL variable which fetches the value of an affiliate_id;
• A Custom HTML tag which stores that value in a cookie;
• A trigger which fires that tag.

 

#2.1. URL variable

If you’re new to URL variable, read this guide where I explain ins and outs of parsing URLs (in plain English). In Google Tag Manager, go to Variables > User Defined Variables and create a new variable with the following settings:

If the URL that the visitor is currently on contains a parameter affiliate_id, this variable will return its value.

 

#2.2. Custom HTML Tag that sets the cookie

If you haven’t yet, read this guide which explains the friendship of GTM and cookies more in-depth.

<script>
 var cookieName = "affiliate_id"; 
 var cookieValue = "{{URL - affiliate_id}}"; // Insert the afforementioned URL variable surrounded by curly braces
 var expirationTime = 2592000; // One month in seconds. Feel free to change the time
 expirationTime = expirationTime * 1000;
 var date = new Date(); 
 var dateTimeNow = date.getTime(); 

 date.setTime(dateTimeNow + expirationTime);
 var expirationTime = date.toUTCString();
 document.cookie = cookieName+"="+cookieValue+"; expires="+expirationTime+"; path=/; domain=." + location.hostname.replace(/^www\./i, ""); // Sets cookie for all subdomains
</script>

Cookie’s name will be affiliate_id ((line 2) and its value will be inserted with help of the URL – affiliate_id variable (line 3).

Important: this tag must be fired before the Google Analytics Pageview tag so make sure that you set a higher Tag firing priority value in the Custom HTML tag.

 

#2.3. Trigger

Now, we do not want to have false positives and fire a cookie-setting tag even if there is no affiliate ID present in the URL, therefore a particular trigger is needed. In GTM, go to Triggers > New and create a Pageview-type trigger with the following rule:

The condition of this trigger is: URL – affiliate_id variable does not match RegEx (ignore case) ^(undefined|null|0|false|NaN|)$ 

This means that if an affiliate_id parameter exists in the URL, this trigger will be activated.

Link this trigger to the Custom HTML tag which creates a cookie.

#2.4. Test the cookie

Enable GTM Preview and Debug mode. Open any page of a website you’re currently working on, add the following query parameter to the URL: ?affiliate_id=12345abc, and hit ENTER. The page will refresh and a custom HTML tag will fire (you can check that in the Preview and Debug console).

Now, let’s check whether a cookie is set correctly. There are two main ways to check cookies – browser’s built-in feature (developer tools) or a plugin.

Personally, I am using Chrome plugin called EditThisCookie (also available for Opera users). This really simple and intuitive extension enables me to quickly check which cookies are currently in use, what data do they contain, when do they expire, etc.

If you haven’t already installed, download it here. If you’re using a different browser, here are some similar plugins:

• Firefox – Cookies Manager+
• For Internet Explorer users, it’s recommended to use built-in features of developer tools.

Anyway, let’s get back to EditThisCookie. Once you have installed this extension, a cookie icon will appear next to the Menu icon (in Chrome).

Go to the website you’re currently working on, click EditThisCookie icon and you’ll see an expanded list of all cookies that are currently in use on that website. Look for a cookie named affiliate_id. This little piece of data will help us do some magic.

 

#3. Create a custom dimension in Google Analytics

In order to track affiliate sales with Google Tag Manager and GA, we need to create a custom dimension Affiliate ID which will be later linked to a visitor session. Log in to your Google Analytics account, go to the Admin section, and in the Property level go to Custom Definitions > Custom Dimensions.

Once you see a list with a large red button NEW CUSTOM DIMENSION, click it and create the following dimension:

Hit Create button and you’ll see a page with some codes. Memorize the number next to the “dimension”. In the screenshot below, that number is 1.

 

#4. Let’s read a cookie

GTM has a pretty easy feature which enables you to read cookies, 1st-party cookie variable. In order to make it work, all you have to do is set cookie’s name, like this:

 

#5. Update Google Analytics Settings Variable

If you still haven’t started using Google Analytics Settings Variable, you should. It’s a real time-saver. Instead of having to modify multiple tags, you just can edit one GA variable which is used in all GA tags.

In your GTM container, locate Google Analytics Settings Variable and edit it. What we’ll do here is add the custom dimension we’ve created a couple of chapters ago. If the affiliate_id cookie contains any value, it will be passed to Google Analytics. If it’s undefined, Google will handle that and automatically skip such values, so no additional configuration is needed.

Remember how I told you to memorize the number of the dimension in the chapter #3 of this guide? Time to shine. Enter that number in the Index field of GA Settings Variable.

 

#6. Checkpoint

Let’s do a quick summary of what we’ve done so far in order to track affiliate sales with Google Tag Manager and GA:

• First, we created a URL variable affiliate_id which fetches the value of the URL query parameter with a similar name (for those who don’t know, query parameters can be spotted in the web address after the question mark, e.g. https://www.mywebsite.com/?affiliate_id=12345abc).
• Then we took the value of URL variable and stored it in the cookie, thanks to a Custom HTML tag.
• In order to read the value of that cookie, we created a 1st-party cookie variable. It’ll be needed in the next bullet point.
• In Google Analytics, we created a Custom Dimension Affiliate ID and entered its index in the Google Analytics Settings Variable. Also, inserted the aforementioned 1st-party cookie there.

 

 

To sum up, when a visitor lands on a page of your website and the URL contains affiliate_id, GTM will fetch its value and store it in the cookie. Immediately after that, the value of that cookie is inserted in the GA Settings Variable as a custom dimension, so when a visitor will complete a purchase during that session, it will be attributed to the particular affiliate partner.

If a visitor leaves the site without a purchase and returns later (say, after a day) with the same device and browser, a cookie will still be active, therefore its value will be pushed to GA Settings Variable again, therefore Google Analytics sessions will get the Affiliate ID once again.

 

#7. Sales Tracking: General Stuff

When someone is talking about sales tracking in Google Analytics, they have Ecommerce reports in mind. There are two options how you can implement them:

• With Standard Ecommerce reports
• Or Enhanced Ecommerce reports

If you want to track just sales, products purchased, and all other data that is related to the final stage of purchase, then go with the Standard Ecommerce tracking (I’ll explain it a bit in this guide).

If you want to track the entire visitor’s journey toward the purchase, including stages like Added to cart, Initiated Checkout, etc., go with the Enhanced Ecommerce functionality. You can read more about the implementation here (prepare LOTS of coffee for this one).

Just remember, the more data you want to track, the more time you (or your developer) will have to invest. No wonder that the implementation of Enhanced Ecommerce is considered as one of the most difficult GA integrations.

#8. Standard Ecommerce Tracking

Let’s assume that all we want to see is the Affiliate ID and how much orders did it generate for us. Standard Ecommerce tracking is perfect for this task.

In order to make this tracking work, we have to complete the following steps:

1. Enable this feature in Google Analytics reports.
2. Define the exact moment when the purchase is complete.
3. Ask a developer to send the transaction data to the Data Layer.
4. We’ll create a Google Analytics Transaction tag which fetches the information from the Data Layer and sends it to Google’s servers.

 

#8.1. Enable Ecommerce Reports in GA

I won’t go much into details. Just follow this guide.

 

#8.2. Define the moment of a purchase

By saying “we need to define the moment of a purchase”, I mean that we need to create a trigger. Usually, after the order is complete, a customer is redirected to a Thank you page. In such case, a trigger should be of Page view type when URL contains /thank-you, /order-successful, or something similar. Read more about Thank you page tracking here.

If the page does not reload when the order is successfully completed, you should either try tracking an AJAX form or ask a developer to send a custom event to the Data Layer (with dataLayer.push) with purchase data (the latter option is recommended). You can read more about the Data Layer here and here.

#8.3. chapter of this guide is dedicated for those, who chose to go with developer’s help and dataLayer.push.

 

#8.3. Purchase data must be sent to the data layer

When the purchase data (order ID, total amount, etc.) is sent to the Data Layer, it is very important that the data structure is exactly as it is required by Google’s documentation. Names of all parameters must be exactly as Google requires it (e.g. transactionId cannot be renamed to orderID, etc.).

Here’s a sample code snippet taken from those docs:

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
 'event' : 'purchase',
 'transactionId': '1234', // the id 1234 should be dynamically replaced by the developer with actual order ID.
 'transactionAffiliation': 'Acme Clothing', //this should be replaced by the developer. The same applies to all other fields
 'transactionTotal': 38.26,
 'transactionTax': 1.29,
 'transactionShipping': 5,
 'transactionProducts': [{
   'sku': 'DD44',
   'name': 'T-Shirt',
   'category': 'Apparel',
   'price': 11.99,
   'quantity': 1
 },{
   'sku': 'AA1243544',
   'name': 'Socks',
   'category': 'Apparel',
   'price': 9.99,
   'quantity': 2
 }]
});
</script>

Your developer needs to push this code whenever a purchase is completed successfully. Of course, values (in your case) will be different, depending on the actual order, products, their price, etc.

If you’re thoroughly comparing the code above with Google’s documentation, you might have noticed one discrepancy, this line:

'event' : 'purchase',

I’ve added it intentionally. It will not break the implementation and, in addition to that, you’ll be able to create a trigger called “purchase” which will be used to fire our GA Transaction tag.

One more thing regarding that dataLayer.push with purchase information: not all fields are required. You can find a full list of requirements of Standard Ecommerce fields here. The smallest possible code snippet looks like this:

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
 'event' : 'purchase',
 'transactionId': '1234', // the id 1234 should be dynamically replaced by the developer with actual order ID.
 'transactionTotal': 38.26 // developer should also replace this price with the actual order total
});
</script>

What we’ve done so far is we “asked” a developer to push transaction data to the Data Layer when the order is actually completed.

Additionally, with that data, we’ll get a Data Layer event called “purchase” which will be used as a trigger to fire GA Transaction tag. I’ll explain that in the next chapter.

The best way to test if a developer has done everything correctly is to enable GTM Preview and Debug mode and complete a purchase. If everything was done properly by the developer, a purchase event should have appeared in the event stream.

Click it and go to the Data Layer tab. With that event, a developer must pass the transaction data which should look like this:

If the event did not appear, double check with developer whether he published the code to the public version of the website/online store.

 

#8.4. Trigger + Google Analytics Transaction Tag

A tag in Google Tag Manager fires only when a certain trigger is activated. And the best moment to fire transaction tag is to use the aforementioned purchase event. In order to do so, we’ll need to create a trigger of Custom Event type.

To to GTM > Triggers > New and choose type Custom. Enter the following settings:

Keep in mind that event name is case-sensitive. If a developer pushed Purchase event to the Data Layer, then enter the same title (with uppercase P) in trigger’s settings, Purchase.

Now, let’s create a Google Analytics Transaction tag. Go to Tags > New > Universal Analytics and enter the following settings:

When GA Tag’s tracking type is Transaction, it automatically checks the Data Layer and is looking for data, such as transactionId, transactionTotal, etc. That’s why a developer had to push the transcation data exactly as Google’s documentation required.

 

#8.4. Testing

Unfortunately, Google Analytics Real-time reports cannot help you debug Ecommerce tracking. But that’s not the end of the world as there are other options.

1. Install GA debugger browser extension;
2. Click its icon (it will start displaying ON);
3. Go the page where you want to test Ecommerce tracking;
4. Open browser’s JavaScript console. If you’re new to it, follow this tutorial;
5. Refresh browser’s tab and complete a new purchase once again.

Once you complete these step the following data will be printed in the console (P.S. values might (and probably will) be different):

If you also sent some product data, you’ll see even more lines in the console. I’ve marked the most important fields with blue rectangle:

• hitType: the type of GA Tag
• dimension1: that’s our Affiliate ID
• ec:id: transaction ID
• ec:revenue: transaction total
• ec:tax: transaction tax.

 

#9. Building an affiliate Sales report in Google Analytics

The final step of affiliate sales tracking with Google Tag Manager is building a report. In Google Analytics, go to Customization > Custom Reports.

Click NEW CUSTOM REPORT and choose the following metrics + dimension.

Click Save. In the report, you’ll be able to see which affiliates are driving the most sales and revenue.

 

#10. An alternative way to send Affiliate ID

There’s also another way how can you send the affiliate ID. But I chose the longer method in order to demonstrate the power of mixing cookies, custom dimensions, standard ecommerce, and custom reports.

Let’s go back to the Standard Ecommerce dataLayer.push snippet:

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
 'event' : 'purchase',
 'transactionId': '1234', // the id 1234 should be dynamically replaced by the developer with actual order ID.
 'transactionAffiliation': 'Acme Clothing', //this should be replaced by the developer. The same applies to all other fields
 'transactionTotal': 38.26,
 'transactionTax': 1.29,
 'transactionShipping': 5,
 'transactionProducts': [{
   'sku': 'DD44',
   'name': 'T-Shirt',
   'category': 'Apparel',
   'price': 11.99,
   'quantity': 1
 },{
   'sku': 'AA1243544',
   'name': 'Socks',
   'category': 'Apparel',
   'price': 9.99,
   'quantity': 2
 }]
});
</script>

See the transactionAffiliation field? You could have asked a developer to read the affiliate_id cookie that you previously stored and place that ID in the transactionAffiliation field whenever a push to the Data Layer is initiated.

That field will be transferred to Google Analytics and will become available in the Ecommerce reports. Sometimes businesses choose to pass a discount code or a store name in that field. If that’s the case, then the custom dimension is a way to go in order to pass the Affiliate ID.

 

Track Affiliate Sales with Google Tag Manager: final words

For me, this is an unexpectedly lengthy blog post. Originally, I was planning to publish totally another guide which would have also included the affiliate sales tracking with GTM, however, this chapter grew so big that it became a standalone blog post.

In this extended guide, I’ve shown you how to mix several tracking techniques into one solution:

• When a visitor lands on a page and the URL contains an affiliate ID, that ID is fetched and stored in the cookie.
• Value of that cookie is then fetched and passed to Google Analytics as a custom dimension (session scope). If the value of the dimension changes several times during a single session, the latest value will be applied.
• Then, I’ve explained how to implement a Standard Ecommerce Tracking (Google Analytics) with help of developer and Data Layer.
• When the purchase is successfully completed, a custom GTM trigger fires a Google Analytics Transaction.

So as long as a visitor has an affiliate cookie, its value is sent to Google Analytics, therefore you’ll be able to see which affiliates are driving the most sales. You can view that data with a simple custom report.

Got any ideas/suggestions regarding how to track affiliate sales with Google Tag Manager and Google Analytics? Let me know in the comments below.