Target = _blank does not work with GA outbound link tracking

Question

I want to track clicks on outgoing links and implement the following code:

GA code

var trackOutboundLink = function(url) { ga('send', 'event', 'outbound', 'click', url, {'hitCallback': function () { document.location = url; } }); } 

References

 <a class="postLinks" href="<?php if (get_field('source_link')) echo get_field('source_link'); ?>" onclick="trackOutboundLink('<?php if (get_field("source_link")) echo get_field("source_link"); ?>'); return false;"><?php the_title(); ?></a> 

target = _blank

I add the target=_blank attribute via jQuery depending on whether the visitor on the website is checked or not (the choice is then saved in a cookie). However, if I decide to open the outbound link in a new window, this will not work. When I check the box, it correctly adds the target attribute to the link, but when I click on the link, it opens it in the same window.

Target attribute links

 <a class="postLinks" href="<?php if (get_field('source_link')) echo get_field('source_link'); ?>" onclick="trackOutboundLink('<?php if (get_field("source_link")) echo get_field("source_link"); ?>'); return false;" target="_blank"><?php the_title(); ?></a> 

Any idea?

Answer 1

If target = "_ blank" in the link will not do anything if you change the page URL using JavaScript by changing document.location.

However, you need to use hitCallback when you track the internal link. If you have an external link and, therefore, target = "_ blank", the original tab remains open and the ga tracking event is completed as usual - you do not need to worry about completing it before loading a new page.

So, I think you want to change the click handler this way:

 var trackOutboundLink = function(url, isExternal) { var params = {}; if (!isExternal) { params.hitCallback = function () { document.location = url; } } ga('send', 'event', 'outbound', 'click', url, params); return isExternal; } 

And when you attach it as a click handler

 onclick="return trackOutboundLink(urlGoesHere, isExternalGoesHere)" 

More specific examples:

 <a href="/" onclick="return trackOutboundLink('/', false)">An internal link</a> <a href="http://www.example.com/" onclick="return trackOutboundLink('http://www.example.com', true)">An external link</a> 

Answer 2

This will make all links open in a new window:

  var trackOutboundLink = function(url) { ga('send', 'event', 'outbound', 'click', url, { 'transport': 'beacon', 'hitCallback': function(){window.open(url);} }); } 

I just change the code document.location = url; on window.open(url); from https://support.google.com/analytics/answer/1136920

You can also change the name of the function, as well as one for new window links and one for identical window links. This will change the 1st line to something like:

 var trackOutboundNewWindow = function(url) { 

And then the link will be

 <a href="http://www.example.com" onclick="trackOutboundNewWindow('http://www.example.com'); return false;">Check out example.com</a> 

Answer 3

I just want to support some of the guys in Winnipeg. I won’t let me comment, but his solution works!

Recommended Google code (doesn't work to open the link in a new tab):

 var trackOutboundLink = function(url) { ga('send', 'event', 'outbound', 'click', url, { 'transport': 'beacon', 'hitCallback': function(){document.location = url;} }); } 

:

 <a href="http://www.example.com" onclick="trackOutboundLink('http://www.example.com'); return false;">Check out example.com</a> 

However, if you change "document.location = url;" to "document.location = href;" and in the link tag change "return false"; "return the truth"; and add "target =" _ blank ", the link will open in a new tab and will track the outgoing link.

So, the code that works:

 var trackOutboundLink = function(url) { ga('send', 'event', 'outbound', 'click', url, { 'transport': 'beacon', 'hitCallback': function(){document.location = href;} }); } 

:

 <a href="http://www.example.com" onclick="trackOutboundLink('http://www.example.com'); return true;" target="_blank;">Check out example.com</a> 

Answer 4

Solution found (as of February 6, 2016)

 <script> var trackOutboundLink = function(url) { ga('send', 'event', 'outbound', 'click', url, { 'transport': 'beacon', 'hitCallback': function(){document.location = href;} }); } </script> 

Then make the link this way ...

 <a href="http://www.example.com" onclick="trackOutboundLink('label name'); return true;" target="_blank">text</a> 

Answer 5

DRY - track all bindings with the class' tracked . Please note that this code is sensitive to pop-up blockers. The window.open call should be outside the ga call.

 /** * Function that tracks a click on an outbound link in Analytics. */ $(function() { //only create event tracking if ga has loaded ga(function(){ $("a.tracked").click(function(e) { var url = $(this).attr("href"); var newWindow = ($(this)[0].target || '').toLowerCase() === '_blank'; if(newWindow) { window.open(url, '_blank'); } ga("send", "event", "outbound", "click", url, { "hitCallback": function () { if(!newWindow) document.location = url; } }); e.preventDefault(); }); }); }); 

Answer 6

it works:

 hitCallback': function(){window.open(url);} 

I hope that event tracking will not affect in any way.