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.

[Screenshot]
Built-in File Downloads Report
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.

20 thoughts on “Tracking Links & Actions

  1. Pingback: App Tracking – Part II | Web Analytics for Developers

  2. Pingback: Tracking Internal Search | Web Analytics for Developers

  3. Pingback: Redirect Tracking | Web Analytics for Developers

  4. Pingback: How to track the ‘Like’ button | Web Analytics for Developers

  5. Pingback: Migrating from H-code to AppMeasurement | Web Analytics for Developers

  6. Pingback: s_gi() and Tracking Links | Web Analytics for Developers

  7. Pingback: Processing Rules – Positive or Precise | Web Analytics for Developers

  8. Pingback: Cross-Device Linking – what Adam said | Web Analytics for Developers

  9. Pingback: How to Use Merchandising Variables | Web Analytics for Developers

  10. Pingback: KPIs and Success Events | Web Analytics for Developers

  11. Pingback: A Short History of Processing a Hit | Web Analytics for Developers

  12. Pingback: Analysing Mobile Apps – Tagging | Web Analytics for Developers

  13. Pingback: Analysing Mobile Apps – Debugging | Web Analytics for Developers

  14. Pingback: Tagging Forms (w/o Losing Money) | Web Analytics for Developers

  15. Pingback: With DTM you don’t need Data Elements | Web Analytics for Developers

  16. Pingback: Quick Tip: Delayed Tracking with DTM | Web Analytics for Developers

  17. Jan, thanks as always for this blog and for your excellent posts and observations! I know this particular post isn’t a DTM post, but my question is related. DTM has made link tracking a breeeze, but sometimes I find that I need to wrap some logic around a variable I need to set, so I use the Custom Code area for Adobe Analytics in my event rule. My question is… do I need to add these three lines of code (or any part of them) so my Custom Code will fire along with any variables I’ve set in DTM’s interface for this event rule?

    Those famous lines for link tracking:
    s.linkTrackVars=”events,props,eVars”;
    s.linkTrackEvents=”eventxx,eventxx”;
    s.tl(linkObject,”d”,linkname);

    I ask this because in the console, I don’t see all the vars I want to track being listed.

    Thanks for any discussion you could provide!

    Liked by 1 person

    1. Hiya,

      If you set variables in the custom code, you will indeed have to add them to linkTrackVars and linkTrackEvents.

      DTM does that automatically for all variables that are set via the UI, but not the ones in your Javascript code. It simply doesn’t know about them…

      Like

      1. Excellent, thanks. So if I track some variables configured using the DTM interface and also add variables to track in custom code on the same rule, I’ll have two server calls, yes?

        All these little caveats may not be so obvious to all – maybe they’ll make it into a doc file someday!? 🙂

        Like

      2. You won’t have two server calls, unless you explicitly call s.t() or s.tl() in a “third party Javascript” section in the rule!

        But if your rule uses s.tl() – meaning linkTrackVars / linkTrackEvents must be set – the rule will only set them for those variables that are set via the UI of the rule.

        Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s