Javascript: Google Analytics Track Outbound Page Views I've researched this morning how to use Google Analytics to track outbound page views. However, I think the implementation might be a bit difficult on our website (as we have hundreds of outbound links)

Here's what google recommends. 



/**
* Function that tracks a click on an outbound link in Analytics.
* This function takes a valid URL string as an argument, and uses that URL string
* as the event label. Setting the transport method to 'beacon' lets the hit be sent
* using 'navigator.sendBeacon' in browser that support it.
*/
var trackOutboundLink = function(url) {
   ga('send', 'event', 'outbound', 'click', url, {
     'transport': 'beacon',
     'hitCallback': function(){document.location = url;}
   });
}
&lt;a href="http://www.example.com" onclick="trackOutboundLink('http://www.example.com'); return false;"&gt;Check out example.com&lt;/a&gt;




As you can see, attaching an onClick attribute to every single anchor tag you want to track is fine, IF YOU ARE JUST NOW DEVELOPING A WEBSITE!

To remedy this issue, I have written some code to loop through every anchor tag on the page, and determine if the anchor is external or not. In this script, *.pdf need to be included. Here my custom script:



var anchors = document.getElementsByTagName("a");
  
  for (i = (anchors.length - 1); i &gt; -1; i--) {
   var anchorHREF = anchors[i].getAttribute("href");
   if (anchorHREF != "" &amp;&amp; anchorHREF != null) {
    var doSetOnClick = false;
    
    if (anchors[i].hostname != document.location.hostname) {
     doSetOnClick = true;
    }
    
    if (anchorHREF.indexOf(".pdf") &gt; -1) {
     doSetOnClick = true;
    }
    
    if (doSetOnClick) {
     anchors[i].setAttribute("onClick", "javascript: trackOutboundLink('" + anchorHREF + "');")
    }   
   }
  }




Note: This code fires on DOM Ready.

I am not asking for code review on the google part, just my custom loop. Do you feel as though my loop is going to have good browser support? >IE8? How could I Improve this code?
I would write this code like:

Array.prototype
  .slice
  .call(document.getElementsByTagName("a")) // Get all links from the page
  .forEach(function (link) { // Loop through them
    const isExternal = link.hostname != document.location.hostname;  // Check if is external
    const isPDF = link.href.indexOf(".pdf") &gt; -1; // Check is is PDF
    if(isExternal || isPDF){
      link.setAttribute("onClick", "javascript: trackOutboundLink('" + link.href + "');"); // set onClick attribute
    }
  })


Update #1

Using ES6, you can do something like this:

// Get all the links from the page
const links = [...document.getElementsByTagName('a')];

// "Explain what a pdf link is"
const isPDF = link =&gt; link.href.endsWith('.pdf');

// "Explain what an external is"
const isExternal = link =&gt; link.hostname != document.location.hostname;

// "Explain what links you want to target"
const target = link =&gt; isPDF(link) || isExternal(link);

// "Explain what should be done to those links"
const onClick = link =&gt; link.setAttribute('onClick', `javascript: trackOutboundLink('${link.href}');`);

// Filter and do the work
links.filter(target).map(onClick);


I would suggest the second method, because it's much more clear, pure and very easy to test.