1

Having an Issue With recording outbound link events in my google analytics. This is such a simple task I cannot understand where it can go wrong. Can any one notice any issues with my code. The google functions are being executed upon my onclick events, The issue is that no event is being logged on my google analytics dashboard In Behaviour > Events > Overview

google_analytics.php

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-86854644-1', 'auto');
  ga('send', 'pageview');


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



function handleOutboundLinkClicks(event) {

  ga('send', 'event', {
    eventCategory: 'Outbound Link',
    eventAction: 'click',
    eventLabel: event,
    transport: 'beacon'
  });
}

</script>

Click Event

onclick=\"handleOutboundLinkClicks(this);\"

header.php

include_once("/includes/google_analytics.php");
chris85
  • 23,846
  • 7
  • 34
  • 51
Jimmy Jammmy
  • 11
  • 2
  • I think the browser is redirecting the user to the link before tracking is done. You have to stop browser's action of opening the link with [`event.preventDefault`](https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault), so your code on `hitCallback` is actually called after the event is sent. – danguilherme Nov 25 '16 at 16:16
  • I thought this may have been the case two. I have tried the following be still no log of the call back onclick=\"trackOutboundLink('$hreflink',event);\" var trackOutboundLink = function(url,event) { alert(event); event.preventDefault(); – Jimmy Jammmy Nov 25 '16 at 16:27

2 Answers2

0

You can send the event as parameter, but it's not this. There's no such thing as '$hreflink'. Avoid using the onclick! (See below.)

When you send this, you're sending the element itself (the <a> element in your case). So in your case I would do something like in this JSFiddle:

theAnchor.addEventListener('click', function (event) {
    // avoid browser from following the href
    event.preventDefault();

    // call google analytics, and on hitCallback, follow the url:
    document.location = this.href; // `this` is the own element
});

Avoid using the onclick attribute!

Don't mix HTML and JavaScript; don't use the onclick attribute (and similars). They are not good for event management and, as your application grows, they get more difficult to maintain.

That said, use EventTarget.addEventListener to add events to an element (as seen in the examples above).

danguilherme
  • 642
  • 8
  • 23
  • Sounds Possible, I am away from my PC ATM, will try as soon as back. BTW '$hreflink' is the link of the external page that is being navigated to, its a php var. Will let you know if Event Listener works. THANKS – Jimmy Jammmy Nov 25 '16 at 17:07
0

Thanks For the help, I agree that Event Listeners are a better approach especially with multiple event but my initial function and click event worked, Turns out it just took some time for google analytics to present it on my dashboard. Thanks

Jimmy Jammmy
  • 11
  • 2