jQuery Outbound Link Tracking for Google Analytics

[Jaideemaak]

Can anyone help a novice coder?

I'm trying to set up Google Analytics to track Outbound affiliate links using jQuery.
Standard HTML <a href="example.com" rel="nofollow external"> links work fine and they are appearing in Analytics under Behavior - Events - Overview - Event Label.
However, some links use Javascript src, not href, and they arent being tracked. Example:

<script type="text/javascript">
 ad_client = "example";
 ad_width = example;
 ad_height = example;
</script>
<script type="text/javascript" src="http://example.com" rel="nofollow external"></script>

Here is my jQuery:

 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script>
 function trackOutboundClick(e) {
 var $link = $(e.currentTarget);
 var url = $link.attr('href');
 var target = $link.attr('target');

 if ('ga' in window) {
 ga('send', 'event', 'outbound', 'click', url, {
 'hitCallback': function() {
 if (target !== '_blank') {
 document.location = url;
 }
 }
 });
 } else {
 console.log('Track outbound click: ' + url);
 }
 }

 $(document).ready(function() {
 $('[rel="nofollow external"]').on('click', trackOutboundClick);
 });
 </script>

The variable var url references href, but my coding skills are low and I'm not sure how to change it to track both types of Outbound links - href and src.
Any non-technical easy-to-follow advice would be appreciated.
Thanks!

[Jaideemaak]

I made a hash of explaining this. Perhaps a better explanation will help?
I have two types of affiliate links and wish to send an event to Google Analytics each time someone clicks on a link. The jQuery code that I added now sends the event to GA when it sees "nofollow" specified in the rel part of the link.

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script>
 function trackOutboundClick(e) {
 var $link = $(e.currentTarget);
 var url = $link.attr('href');
 var target = $link.attr('target');

 if ('ga' in window) {
  ga('send', 'event', 'outbound', 'click', url, {
  'hitCallback': function() {
  if (target !== '_blank') {
  document.location = url;
  }
  }
  });
 } else {
  console.log('Track outbound click: ' + url);
 }
 }

 $(document).ready(function() {
 $('[rel="nofollow"]').on('click', trackOutboundClick);
 });
 </script>

With regular 'a href' links it all works fine when I have rel="nofollow".

<a href="example.com" rel="nofollow">Anchor text</a>

The problem is that the other kind of link to my affiliate uses Javascript to dynamically display a banner or search box on my site. When a user clicks on the banner or search box they are taken to the affiliate site and I want to send an event to GA when this happens, but I can't get it to work. I have attempted to add rel="nofollow" to the Javascript, but it doesn't work. How do I trigger this onclick event when the link is created with Javascript?

<script type="text/javascript">
 affiliate_ad_client = "my affiliate id";
 affiliate_ad_width = 200;
 affiliate_ad_height = 200;
</script>
<script type="text/javascript" src="http://example.com/js/show_ads.js" rel="nofollow"></script>

Is this a better explanation?
Can anyone help?

[coopster]

Timing issue? $(document).ready() does not mean that the anchor elements in the external script call have been loaded.

It is most likely that the links being pulled in by the external <script> element are not loaded and therefore not bound at the time your document is ready. The reason you can track your own outbound links is because of the way you have set up your anchor elements with the rel attribute within your code being delivered on the original request.

Now, how to get those post-document-ready-status script-loaded affiliate links to track? Bind them to the body of your HTML and target them via the specific container that your affiliate loads the link in. My preference is to create my own div container with a class surrounding the script element if possible, otherwise you will need to target the code that they are loading because their script may create a brand new containing element outside of your div container.

The bottom line is that your selector is going to need to be extended to capture the external script loaded anchors. Something along these lines (untested, but concept is here) ...

$('body').on('click', '[rel="nofollow"]', trackOutboundClick);
$('body').on('click', '#myAffiliateContainer a[href]', trackOutboundClick);

[api.jquery.com...]

[Jaideemaak]

Thanks coopster, your response is really appreciated. I am not a developer and my coding skills are quite limited, however, I can just about follow your explanation and I will try setting up the div container around the script and making the code change as suggested. As you say, the affiliate script may prevent this from working but it's worth a shot.

[coopster]

No problem. Use a tool like Firebug for Firefox, Chrome Developer Tools, etc. to analyze the code being brought in by your affiliate and you will be able to determine where and how they are injecting their HTML.