document.addEventListener(event, function, useCapture)
if (document.addEventListener)
document.addEventListener('click', callback, false);
else
document.attachEvent('onclick', callback);
Note that the attachEvent method is used to create a cross-browser compatible solutuion for browsers that don't support the addEventListener method eg. IE8 and earlier.
function callback(event) {
var evt = window.event || event;
var url;
var linkType;
Now we have our variables, we'll set up the conditional statement flow to process the clicked element. This first part looks at the element name:
switch (evt.target.tagName) {
If the user clicked a text anchor element, we want to set the link type to send to GA and set a reference to the element for later:
case 'A':
linkType = "Out:Text";
element = event.target;
break;
At this point, I'm going to add some debug code so that you can see what's happening in the console window when you run the code. The variable debug allows you to turn off the messages that will be displayed in the console window. Don't forget to remove all the debugging code from your final code. So we now have this:
function callback(e) {
const debug = false;
var event = window. event || event;
var element;
var url;
var linkType;
switch (e.target.tagName) {
case 'A':
if (debug == true) {console.log ("Clicked element is A");}
linkType = "Out:Text";
element = event.target;
break;
Next we need to handle the IMG element. Recall that this will not have an href attribute so we need to look at the parent node and see if it has an A element link:
case 'IMG':
linkType = "Out:Image";
element = event.target.parentNode;
if (element.tagName != "A"){
if (debug == true) {console.log ("Clicked element is IMG but parent is not A");}
return;
}
else {
if (debug == true) {console.log ("Clicked element is IMG and parent is A");}
}
break;
To complete the conditional section, let's add a message if neither text or image links are found:>
default:
if (debug == true) {console.log ("Clicked element is " + element.target.tagName + " so QUIT");}
return;
}
Now we need to add the GA event but we don't of course want to process events for in-site links. So if our site is at http://mydomain.com and there are links to http://mydomain.com/page and http://external.com then we only want to record GA events for the external link. To do this, we are going to use a regular expression to see if our site domain is in the link's href attribute:
if (element.href.indexOf(location.host) == -1 && element.href.match(/^http:\/\//i)){
The location.host will return the domain of our site and the /^http:\/\//i part of the match text says "match if the hyperlink starts with http://" and is case insenstive due to the /i part.
url = element.href.replace(/http:\/\//i,"");
Let's add another console debug message at this point:
if (debug == true) {console.log("Sending event to GA for : " + url);}
Depending on the version of Google Analytics tracking code that you are using, you will need to use one or the other of the following lines. We're using the newer Universal GA script (not shown here) so we use the ga method but you may need to comment that out (or delete it) and use the older _gaq.push method.
//_gaq.push(['_trackEvent', linkType, url, window.location.href]);
ga('send', 'event', linkType, url, window.location.href);
To check which version you need, look the the first line of your GA code:
}
else{
if (debug == true) {console.log ("Didn't process GA event for : " + element.href);}
return;
}
}
<script type="text/javascript">
function callback(e) {
const debug = false;
var e = window.e || e;
var el;
var url;
var lt;
switch (e.target.tagName) {
case 'A':
if (debug == true) {console.log ("Clicked element is A");}
lt = "Out:Text";
el = e.target;
break;
case 'IMG':
lt = "Out:Image";
el = e.target.parentNode;
if (el.tagName != "A"){
if (debug == true) {console.log ("Clicked element is IMG but parent is not A");}
return;
}
else {
if (debug == true) {console.log ("Clicked element is IMG and parent is A");}
}
break;
default:
if (debug == true) {console.log ("Clicked element is " + element.target.tagName + " so QUIT");}
return;
}
if (el.href.indexOf(location.host) == -1 && el.href.match(/^http:\/\//i)){
url = el.href.replace(/http:\/\//i,"");
if (debug == true) {console.log("Sending event to GA for : " + url);}
//_gaq.push(['_trackEvent', lt, url, window.location.href]);
// 'Event Category', 'Event Action', 'Event Label'
ga('send', 'event', lt, url, window.location.href);
}
else{
if (debug == true) {console.log ("Didn't process GA event for : " + element.href);}
return;
}
}
if (document.addEventListener)
document.addEventListener('click', callback, false);
else
document.attachEvent('onclick', callback);
</script>
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (2)
Author
Commented:<a href="http://" target="_blank">
So, as I don't know how it got there I'm not sure how to delete it but I'll give it a go now.
Author
Commented: