Tracking Exit links without jQuery

[Christopher_M]

I have a large number of subdomains and sites to administer that are based on different platforms and use different templates. As I don't have much control over them (and can't realistically code up individual links) I would like to set up automatic link tracking for file downloads and exit links - however the sites involved don't all have jQuery, and I cant force this to be loaded.

I had a play around with the Link Tracking extension (even though it's deprecated), but can't get the Internal Link Filter to work at all. Has anyone written a vanilla JS version of something like the jQuery solution outlined here (and that incorporates download links as well)?  My JS isn't up to that!

https://community.tealiumiq.com/t5/DataAccess/What-is-the-recommended-way-to-track-exit-links-in-Omn...

[meng_lim]

@Christopher_M,

You can add the "jQuery" tag from the Tealium Marketplace.  It will automatically inject the jQuery library on all pages.  

Just click on the "Tags" tab, click "+ Add", then search for "jquery".

[Christopher_M]

Thanks Meng - it's not just that.  There is a philosophical objection to loading jQuery - developers here won't allow loading 'unnecessary' libraries.

[steve_lake]

Hi, 

Without using jQuery (or similar) you have several options

1) Manually add an "onClick" event, calling the utag.link function, to each link that you want to track. If it's just one or two links, this would be ok. 

2) If all the links have the same class you could do add a Javascript extension scoped to DOM Ready with something like:

document.getElementByClass('classname').onclick=function(){/* utag link code */}

The drawback with getElementByClass is that pre-IE9 browsers don't support it correctly. 

3) Otherwise, if you don't mind it picking up all links, you could do something like

var links = document.getElementsByTagName('a');
for(var i = 0, len = links.length; i < len; i++) {
    links[i].onclick = function () {
        /* utag link code */
    }
}

This is supported all the way back to IE6, but it is fairly inefficient if there are a lot of links on the page. 

I hope that helps. If you still have problems, let us know. 

[craig_rouse]

A solution that will allow you to use the link tracking extension (it's actually a pretty decent extension, just fiddly to set up) is:

* Set a condition in the extension that will never be true
* Add some custom javascript code in the "Custom Handler" field

See attached screenshot for a currently working setup doing exactly what you describe.

Steve's solution is actually more elegant than this, but this allows you to use the pre-built link tracker extension.

[Christopher_M · Accepted solution]

Hi @craig_rouse,

I've taken your code and extended it - the following seems to work :) 

I forgot, of course, that I'd need to set up mapping between the extension and the GA tag for the variables created - once I'd figured that out, it was fairly simple.

I've tried to automate the population of subdomains, have incorporated some tracking for subdomains that use hash values for navigation, and have added timeouts to ensure that GA returns a 200 response before the link is followed.  

Does this look OK to you?

(function () {
  // Collect internal URLS only
    var int_urls = new RegExp(window.location.host);
    if ((int_urls.test(obj.link_url)) && window.location.hash.length > 0 && obj.link_type != "download link") {
  // Record virtual Page View for hash tabs on same subdomain
              utag.view({
                ga_virtual_page: obj.link_obj.pathname+obj.link_obj.hash
            });
    } 
    else if (!int_urls.test(obj.link_url)) {
  // Record exit link clicks
              utag.link({
                ga_EventAction: 'Clicks',
                ga_EventCategory: 'Outbound links',
                ga_EventLabel: obj.link_url
            });
    } else if (obj.link_type === "download link") {
  // Otherwise record file downloads
              utag.link({
                ga_EventAction: obj.link_type,
                ga_EventCategory: 'Downloads',
                ga_EventLabel: obj.link_text
            });
    }
}());

[craig_rouse]

This looks great @Christopher_M. I'm glad you found my solution useful.

I'm not 100% sure that the timeouts are achieving anything here. All you are doing is delaying the tracking (GA hasn't even been called at the point where the timeout kicks in). The way to use timeouts to ensure a 200 response is to cancel the navigation event and store the URL for later use, then do your utag.link call, then in your setTimeout, redirect the page to the URL that the link was originally directed to.

The sequence of events in your above code is: Click Button -> Wait 300ms -> Call utag.link => this will in turn call GA. While your setTimeout is running, the browser is trying to navigate to the next page as fast as possible.

In short, there is no really safe way to guarantee that tracking will complete without jeopardising the user experience, and potentially (if you're not extremely careful) breaking the site's navigation altogether. Chrome in particular has improved a lot recently, and seems to mostly allow analytics beacons to fire before navigation is complete, but Firefox is a bit more strict. It's unfortunately a fact of life that some exit links will not be tracked, unless you're willing to implement a potentially unsafe solution.

I hope this is useful input.

[Christopher_M]

Thanks, @craig_rouse - good point. I've edited the code to reflect this, and removed the timeouts. Works well. Thanks for your help.