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.

About

German expat living in Switzerland (formerly UK and France). Consultant and member of the Multi-Solutions Group at Adobe, working with the Digital Marketing Suite. Father of 4 girls.

Posted in Javascript, Page Code, Principles
20 comments on “Tracking Links & Actions
  1. […] make use of this functionality, so you’ll ideally want to tag it. This is very similar to tracking actions on a web […]

    Like

  2. […] Search Results Clicks”) should only be sent when a visitor clicks on a search result (see Tracking Links & Actions). It should also only be sent once per search result, so it doesn’t overinflate the […]

    Like

  3. […] parameters for link tracking, pe, pev1 & (optionally) pev2 have to be present, otherwise the system will track this as a […]

    Like

  4. […] use the share or like buttons! These are really good examples of “micro conversions”, actions that visitors do on your site. We need to track them. […]

    Like

  5. […] is highly useful for link tracking, or in situations where your page content is changed dynamically and you are […]

    Like

  6. […] you don’t know what I’m talking about, go and read the article on Tracking Links & Action while I […]

    Like

  7. […] were sending in a prop and an eVar along with an event as payload on a custom link. The numbers for that custom link were a lot higher than the event and the instances on both the […]

    Like

  8. […] to “remember” important activities and send those as Success Events using one or more s.tl() calls once the visitor has logged in — activities like account creation or newsletter sign-ups […]

    Like

  9. […] of the links in the menu. That code must set the Merchandising eVar and then track the click using custom link tracking (yes, […]

    Like

  10. […] You could track it when the user hits the submit button, as described in Tracking Links & Actions. […]

    Like

  11. […] You add code that will help Tracking Links & Actions […]

    Like

  12. […] general concept is the same as on the web. You identify actions and track them. With the Mobile SDKs, you use Context Data “Variables” to do that. […]

    Like

  13. […] will add tracking to Actions (Buttons or links) so you can track what people do in your […]

    Like

  14. […] The naive approach would be to send a tracking request every time the visitor has filled or modified a field in the form using Custom Link Tracking. […]

    Like

  15. […] latter are called Event Based Rules and they are powerful for custom link tracking and for dynamic sites that use a lot of AJAX and DOM […]

    Like

  16. […] third thing is easy, we have done it before many times. But 1 and 2 deserve some more attention. Luckily for us, Javascript comes with two handy methods: […]

    Like

  17. mitchellt2 says:

    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

    • Jan Exner says:

      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

      • mitchellt2 says:

        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

      • Jan Exner says:

        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

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 1,398 other followers

%d bloggers like this: