Special

Affiliate marketing toolkit: Analytics event tracking and much more

In this article I will show you my affiliations tool kit, for tracking the affiliates click, and all the events in Google Analytics.

Also you’ll see many other things that will be certainly useful in the management of your online business.

Let’s look at what we can learn today and what we can get from the method.

What you will learn:

  • How to track every event with Google Analytics
  • How to set the Javascript code that will track all events for you
  • How to set up a plugin Shortcode to create a list of links ready to use
  • How to hide your affiliate link and track individual clicks with pretty links or Thirsty Affiliate
  • How to check if your code is really working
  • Which alternatives there are for the methods explained


Unlock the box sharing it on your social network to reveal the code to use in the project.

Also download and install in your analytics my special report for this tutorial, that I personally use inside my Google Analytics

[sociallocker id=”532″]

Thanks for Sharing!

Thank to people like you LifestyleUltimatum is growing every day! Thank you!

This is the Javascript code to automatize all the tracking. You can copy it including all the comments. The first two lines you just need to copy  once.

The second part of the code you can copy as many times as you have class to track, and change for each copy the .affiliate class with the class to track.

<!– Begin Analytics Event Tracking Code put this code only once –> <script src=”jquery.js”></script> <script> // Affiliate class Link Tracking – copy the following code as many time as the class you want to track jQuery(document).ready(function ($) {

// In the code line below you can change the Class replacing the affiliate word $(‘.affiliate’).on(‘click’, function() {

var el = jQuery(this); var href = (typeof(el.attr(‘href’)) != ‘undefined’ ) ? el.attr(‘href’) : ”; var actionlab = href.split(‘/’).reverse()[0] ? href.split(‘/’).reverse()[0] : href.split(‘/’).reverse()[1] ; var pathname = window.location.pathname;

ga(‘send’, ‘event’, ‘Affiliate’ , actionlab , pathname);

}); });

</script>

// End Tracking code

Download the special report, click the link below:

http://www.lifestyleultimatum.com/affiliate-template-analytics

[/sociallocker]

 

Thanks to Matthew Woodward to inspired me for this idea.

The final result will be to track every affiliate link with Google Analytics separating them by Label and understanding wich is the origin page in order to know what pages are converting better and how to improve our conversion.

Tracked Affiliate links screenshot

Let’s begin with some theory to understand how the analytics Event Tracking works.

This is the complete code used to track the event in Universal Analytics:

 <a href=”http://www.yoururltotrack.com” onClick=”ga(‘send’, ‘event’, ‘affiliate’, ‘productname’, ‘pageurl’, 1);”>Anchor Text</a>

The code is made by a normal link code:

 <a href=”http://www.yoururltotrack.com” >Anchor Text</a>

With this code we obtain a classic link. We can add the tag rel=”nofollow” if need be to tell google not to consider the link as important.

But if we add to the code the onclick part, every time the link is clicked, it sends to Google Analytics some paramenters like in the slides below:

Google Analytics Event Tracking Affiliate Toolkit from Lifestyleultimatum
  1. The affiliate tag to let us know that it is a click on an affiliate link
  2. The product name
  3. And the Page Url where this link has been clicked

By doing this in Analytics we can know which is the page that converts more and understand what works and what doesn’t.

Page conversion analisys

Everything is managed by a Javascript code that generates the tracking code automatically by linking it to a specific class.

In the daily activities you don’t need to remember special codes to create the link because every affiliate link or event you want to track will be managed by our Shortcoder plugin or the Thirsty affiliate plugin if you prefer.

Shorcoder Plugin

 

How to setup the Event Tracking Code in Google Analytics

Where to insert the Javascript code?

You can insert the Javascript code in the header and also in the footer of your theme. You can do it by editing the files Header.php or Footer.php like you see in the image here, or you can insert the code directly in the Google analytics field of your Theme, if the theme has the setting.

Let’s copy the code and paste it in the header or footer of your theme.

header-footer

If you prefer, you can copy it directly in the theme settings if your theme has a specific field.

I prefer to copy it in the specific field in the theme settings, because in case I update the theme, I don’t lose any customization like this:

theme-setting-analytics-code

The code it is made to work with the “affiliate” class, this means that it will track every link that has a class named “affiliate”.

If you want to change the name of the class to track other kind of links, like banners, you just need to paste a second code like the first one, but with a different class name inside, as I have done.

When doing this, I can track all the different kinds of banners I have in Lifestyle Ultimatum.

Then I cloak the affiliate link using pretty link, that allows me to have in the pro version another interesting feature, such as the Pretty Bar and the Tracking pixel, that help me to track the conversion, and also with the external pages not hosted on my website, it is a useful feature that is very helpful.

Download Pretty Link for Free!

Download the Amazing Pretty link Plugin that will allow you to cloak your link and offer many more feature!

To create a cloaked link you just need to go under Pretty Link. Begin by adding a pretty link and then insert the destination link, and the link you want to appear in your website.

Set the no-follow to the link and click add.

This will create a link cloaked that is branded to your website. It is very useful because it also allows you to track the total clicks on the link.

Create a pretty link

At the end you need to create the link code completed with the class, inside the Shortcoder plugin.

Go under Settings -→ Shorcoder

shortcoder

Here you will see a mask where to paste the code you want to use in the shortcode inside the posts.

To create a shortcode with the affiliate link you will need to fill in the field like this:

Setup shortcoder tracking link

Like you can see this code also has the class in it.

 <a class=”affiliate” href=”http://www.yourwebsite.com/theproduct” target=”_blank”>%%anchor%%</a>

In the class, insert the “affiliate” class, or if you have changed it, insert the class you put in the Javascript code you have.

Then under the Href insert the cloaked link that was just created.

Set the target as blank if you want the link to open in a new window, or leave it if you want the link to open in the same window.

In the Anchor text you can insert this code %%anchor%% (all in lower case). It is the identifier used to set a variable parameter in the shortcode.

You will need it when you will insert the shortcode in the article, so we can choose every time a new anchor text.

If you prefer you can use a fixed Anchor Text and not a variable one when writing it directly in the code, or you can decide to make the variable each other parameter, if you like.

If you use the given code you can customize the Anchor Text every time you use the shortcode in the post field.

Then give it a name, better all in lower case without spaces so you don’t have errors when you use it.

Once done, update the Shorcode and let’s see how it works.

click-update-shorcode

Let’s create a new post and click on the shortcoder Icon. Here you will see the list of shortcode we created.

insert-shortcode-in-the-post

Choose the one you want to use.

choose-shorcode-from-list

Personalize the Anchor Text, and then click “insert shortcode”.

personliza-anchor

After you insert the shortcode it will appear like this:

shortcode-inserted

If you preview the article you will see that the shortcode has been replaced with the link. This link will be tracked by our system automatically.

link-ready

Now you need to verify if our tracking system works.

How to verify if the Analytics code is working without waiting until the next day

To be sure that our tracking system is working properly usually the only way to do it is to wait until, after someone clicks on our affiliate links. Then google Analytics will show you the results. Also we can use the Live preview to see the that the click appear.

But there is a faster and simple method that we can use immediately, with a chrome extension.

First you need to install the Google Analytics Debugger Extension.

To do this you have to go under preferences, Chrome extensions and search for the Analytics Debugger.

When the extension is installed you will see a new icon in the interface of chrome, It is in the upper right corner.

download-extension

Click it to activate it

Once you click it, chrome will reload the page. To be ready the icon must have the words ON in a red square on it.

activate-extension

Now you are ready to check the code.

Right click on the link and select inspect element from the menu.

It will appear on a new screen with the code of the link.

Click on console

console

Then click the icon to clean the console.

clearconsole

Click the link and it will open the url in a new window.

Go back to the article and look for tracking code in the console.

Review how the tracking code works on my Inspectlet tutorial.

Here I have 2 different link classes.

The normal Affiliate link and the Banner Affiliate button.

Right click on the normal link first, and again inspect element.

Return to the console and clean it again.

If I click on the link, the tracking code will appear again.

clik-on-link

If you read the tracking code it will show you the heatmap which is the last part of the link created in Pretty link.

Then in Affiliate, which is the class to help us remember which kind of link it is.

And finally the URL of the page where the link has been clicked.

If you see that there is more than one data block sent for each click, you are probably using a plugin to integrate google analytics that already has his event sending for external link. If it happen deactivate the plugin and copy the analytics code directly in the header of the theme.

You can try to do it again on the offer box where I have set a new class.

Clean the console

Click the button on the offer box, and the tracking code appear again.

click-offer-box

If you go and read it, everything is still the same but it changes the class to you know that this click is coming from and offer box and not from a normal link.

Also remeber to check if the links have worked correctly.

Obviously, with the same information, you will find them, again inside Google Analytics the very next day, because remember that in analytics we see only the data of the previous day.

Special Analytics Affiliate Report

Let’s see now how to import my special Custom Analytics Report.

I have created a special report where clicking inside every voice menu it directly gives you the connected information.

Here you can see what has been clicked through banner.

And from which pages the clicks arrived.

analytics-report

You can download the same report in your analytics account.

First Be sure to be logged into Your analytics account and visit the link I posted here in the article under the locked box below the video.

When the page is loaded the system will ask you to give a name to the Special Report.

give-name-report

Give it a name and hit save.

If you want you can add a shortcut to the report in the sidebar by clicking in the shortcut button.

add-custom-analytics-report

In conclusion, remember that if you want to use Thirsty affiliate as plugin instead of pretty link it is a good solution. It will create the shortcode all in one directly in the post editor, but I prefer with my method because I can create really a lot of different kinds of affiliate links with box and other things. I also love the Pretty link feature.

Setup the Event Tracking in universal analytics with Google Tag Manager

There are many different solution to implement the Event Tracking in Google universal Analytics.

Thirtsy Affiliate for example already has a plugin you can buy to add the feature, and it is much more cost effective.

Also another option is to use the Google Tag Manager.

Here you can see a video from KissMetrics that will help you to understand how to do the job.

I have experimented with all of these options and the two I prefer are the system I explain here in this article that is the most simple and versatile in my opinion, and allow me to track really everything, or the Thirsty Affiliate Method for who want to implement this Amazing Plugin.

Honestly the Google Tag Manager I still find it a bit complicated and I also don’t feel as if I have mastered it. Here you can find the offical Google Video and Instructions on how to do it:

http://analytics.blogspot.com/2013/10/no-code-required-auto-event-tracking.html

https://support.google.com/tagmanager/answer/3420054?hl=en&ref_topic=3002579

https://support.google.com/tagmanager/answer/3415369?hl=en

And Finally if you don’t know how to exclude your own visits from Google analytics you should use this browser add-on:
https://tools.google.com/dlpage/gaoptout

So I hope you love the tutorial, and please don’t forget to subscribe to Lifestyle Ultimatum to stay updated with new and amazing tutorialslike this one.

Get in touch with me!
Claim your Ultimatum
1 Comment
  1. Reply Bart Houtman August 31, 2015 at 5:21 pm

    Thanks for your full description! I use Ivanhoe to also push all my sales/leads commissions to my google analytics. It works like a charm > check http://ivanhoe.io.

Leave a reply