Tracking Links & Actions

We have introduced the principles behind basic tracking of a web page. We have also discussed how to go further. Today, we will look at tracking “the other things” — links, clicks or any other events or interactions that are not a page load. Common use cases would be:

• Tracking downloads
• Tracking dynamic HTML / AJAX
• Tracking links (external or internal)
• Tracking “things that happen on pages”. Popular examples: share buttons or likes.

Out of the box, if the configuration in the s_code.js file is right, Adobe Analytics will track downloads and exit links. Your marketer can find reports about those in the reports under Site Content > Links.

For a lot of people, this works, but there are two reasons why you can and should go further:

1. You might want to include extra data with the tracking of these links.
2. You might want to track other links and “things that happen on pages”.

Both reasons lead to one solution: add custom Javascript code to the links and/or actions that you want to track.

You might remember how we said data is sent to the Adobe servers using the s.t() method. That is true for tracking pages. Sending data via s.t() will automatically register a Page View.

Most actions on the site are not Page Views, though, and you can therefore use a different method to send data that does not register as a Page View. That method is called s.tl() (for track link).

How to Track Actions

Let’s look at a download link that looks like this:

	<a href="/files/LinkTrackingPrimer.pdf">Link Tracking White Paper</a>

We would ideally like to track a couple of things about this download: a) that it has been clicked, b) its name (“Link Tracking White Paper”), c) its theme (web analytics), d) the origin of the download. We also have a site heavy on information, so we want to know how many downloads visitors usually do and maybe even in which order. All of this can be expressed in Javascript in a small snippet of code:

	<script type="text/javascript">
	var s=s_gi(YOUR_RSID); // replace this with yours!
	s.events="event21,event22";
	s.prop31=s.eVar31="Link Tracking White Paper";
	s.eVar32=page_name;
	s.eVar33="+1";
	s.linkTrackVars="events,prop31,eVar31,eVar32,eVar33";
	s.linkTrackEvents="event21,event22";
	s.tl(this,"d","Link Tracking White Paper");
	</script>

Let’s dissect that.

First we create a local copy of the “s object” which is used for tracking. That is not strictly necessary if the page is tagged and an “s object” has already been created on page load. It is good practice though.

Then we set two events.

Why two?

We would use “event21” as “Download” and set it on every download, and we would use “event22” as “White Paper Download” and only set it when visitors download a white paper.

In the next line, we assign the name of the download to s.prop31 for pathing (this will allow your friendly marketer to see a “download path” report, i.e. which download did visitors do before or after this one) and to s.eVar31 for use with the events we send (your marketer will be able to run a “top downloaded files” and a “top downloaded white papers” report).

We pass the name of the current page into s.eVar32. That will allow your friendly marketer to a) see which pages led to the most downloads and b) for a specific file where most downloads originated.

Next we pass a “+1” into s.eVar33. We will talk about “Counter eVars” later, for now you just need to know that if you do this, the system will keep track of how many downloads a visitor has started, and your marketer will be able to segment his visitors (“heavy downloader” vs “never downloads anything”). If you want to know more about “counter eVars”, take a look at this article by Adam Greco or this article by Ben Gaines.

The s.linkTrackVars and s.linkTrackEvents variables tell the system which variables it should submit when s.tl() is called.

This is different from tracking pages! When you track with s.t(), all “variables” are being sent. With s.tl(), none of them are per default. You have to explicitly tell the system which variables it should send, in our case s.events (more specifically “event21” & “event22”), s.prop31, s.eVar31, s.eVar32 & s.eVar33.

Calling s.tl() on the next line sends it all off.

s.tl()

The s.tl() method has up to 5 parameters:

	s.tl(this,linkType,linkName,variableOverrides,doneAction);

The first parameter should either point to the DOM object that was clicked (e.g. the link to the download) or be true.

Because links sometimes point to other pages and browsers might not allow the tracking to complete before throwing away the current one, s.tl() adds a delay (up to 500ms) before it lets the browser load the next page. To disable that delay, set this parameter to true.

The second parameter tells the system whether this is a download (set it to “d”), an exit link (set it to “e”) or something else (set it to “o”).

The third parameter is the link name. This is what your friendly marketer will see in the “Exit Links”, “File Downloads” or “Other Links” reports. Because of our enhanced tracking, she might not ever use these, of course.

The optional “variableOverrides” parameter lets you assign value to variables in the call, if you want. Not very useful, we think, so we set it to null.

The optional “doneAction” parameter helps work around browser behaviour in Webkit browsers and FF20+. If you use newer code (H.25 and later), you can specify what the browser should do after link tracking right here instead of relying on the normal, built-in flow of control. Most of the times, you would set this to “navigate” and then make sure to “return false;” in the event handler. You can get a bit more information in the official documentation for link tracking.

Notes

Snippets like the code above can be used to track links or any other interactions on your site. That means that code has to be in an onClick handler somewhere. For our tastes, the snippet is too big for that, so let’s put it into a function!

One thing to consider: the first parameter (this versus true). If you call s.tl() in a function, make sure you add an argument to your function and pass this into that argument so you can use it in the s.tl() call.

If you put all of this together, the link will look like this:

	<a href="/files/LinkTrackingPrimer.pdf" onclick="trackWPDownload(this,pageName,"Link Tracking White Paper"); return false;">Link Tracking White Paper</a>

And the function should look something like this:

	function trackWPDownload(sourceObject,pageName,whitepaperName) {
		var s=s_gi(YOUR_RSID); // replace this with yours!
		s.events="event21,event22";
		s.prop31=s.eVar31=whitepaperName;
		s.eVar32=pageName;
		s.eVar33="+1";
		s.linkTrackVars="events,prop31,eVar31,eVar32,eVar33";
		s.linkTrackEvents="event21,event22";
		s.tl(sourceObject,"d",whitepaperName);
	}

And that’s it.