Using Event Tracking with links or actions involving Page loads (sending a user off the page without opening a new window) with Google Analytics and JS

Posted on by Farmer

Update – April 16th, 2014: a new article on how to achieve this more efficiently specifically with GA Universal Code was posted. The below idea is still valid in some cases.

Is it possible to use Event tracking with links/forms that redirect to pages in the same browser window?

I used to think that this was not possible, but after realizing Adobe SiteCatalyst/Omniture has a mechanism* to deal with this, I realized that I could replicate similar behaviour in GA (Universal or Classic). To get it to work relies on JavaScript and not the analytics package itself.

That being said, you can generalize this technique with any package that you’re using, but I personally use GA more, so my examples are for this package.

I want to caveat this solution that you should have a decent understand of JS and what we’re doing as it can have repercussions on other aspects of your site/tracking if the techniques are not understood or implemented properly.

Nevertheless, the general idea is:

  1. User executes an action (e.g. clicks a link or submits a form)
  2. JS prevents the default behavior of that click (prevents default event and stops event propagation)
  3. Send an Event request to the package/GA and delay for 500ms – this portion is key so that we can ensure that the request it tracked/sent before pushing a user off the page*
  4. After the timeout, the JS send the user along to what they originally intended

What do I need to do?

I’ve provided a vanilla JS example (the concepts are easily translatable to jQuery or any other JS framework – but for simplicity sake I’m demoing the concept) where I attach an event call with the “onsubmit” or “onclick” handlers in the HTML. The code sample below should be commented and explain what is going on:

  1. <!-- When a user submits the form - delay for 500 MS so the event can be sent in -->
  2. <form name="form1" method="post" action="" onsubmit="return sendGA(this, ['mysubmissioncategory', 'mysubmissionaction', 'mysubmission'])">
  3.   <label for="test"></label>
  4.   <input type="text" name="test" id="test">
  5.   <input type="submit" name="button" id="button" value="Submit">
  6. </form>
  7. <hr />
  8. <!-- When a user click the link - delay for 500 MS so the event can be sent in -->
  9. <p><a href="http://google.com" onclick="return sendGA(this, ['mycategory', 'myaction', 'mylabel'])">Link to track</a></p>
  1. <script>
  2. //first parameter - the element that was clicked/submitted
  3. //array of strings where the first index is the category, second index is the action and the third index is the label
  4. function sendGA(el, gaevent){
  5. 			var newwin = false;
  6. 			//assume/ensure anything that is tracked has a href or an action attribute
  7. 			if(el.hasAttribute("href") || el.hasAttribute("action")){				
  8. 				//simplifying my example to just account for new _blank windows - you may need to modify this according to your needs
  9. 				if(el.hasAttribute("target") && el.getAttribute("target") == "_blank"){
  10. 					newwin = true;
  11. 				}else{
  12. 					//delay the default action for 500 ms - for whatever tag so that the Analytics request can be sent
  13. 					setTimeout(function() {
  14.  
  15. 							//is the originating element a form, if so make it submit
  16. 							if(el.tagName == "FORM"){
  17. 								el.submit();
  18. 							}else{
  19. 								//assume that if it is not a form that it a link
  20. 								window.location = el.getAttribute("href");
  21. 							}
  22.  
  23. 					}, 500);
  24. 				}
  25. 				//send the event!
  26.         ga('send', 'event', gaevent[0], gaevent[1], gaevent[2]);    
  27.         // If you are using the Classic analytics event tracking, just comment the above line out and uncomment one of the lines below
  28.         // depending on the GA code snippet that your site is usinmg
  29.         //_gaq.push(['_trackEvent', gaevent[0], gaevent[1], gaevent[2]]); 
  30.         //pageTracker._trackEvent(gaevent[0], gaevent[1], gaevent[2]])
  31.  
  32. 				return newwin;				
  33. 			}
  34. }
  35.   </script>

 

Leave a Reply

Your email address will not be published.