Universal Analyitics not tracking links that lead to popups

Question

I recently took over a small school website that was using some really convoluted analytics like a mix of UA and GA. So I stripped out all of the old analytics code, made a new account, and got everything running with UA. I'm only tracking link clicks so the code isn't too complicated. The issue I'm having is that links that lead to pop-ups don't send an event. When I watch the events in real time, links that lead to a new page send events perfectly, but links that just cause a pop-up don't. In the following snippet, the first link leads to another page and tracks, the second one generates a pop-up and doesn't track.

<tr>
<td class="tableCenterBoxes">
	<a href="http://bit.ly/nutritionCalculator"
	   target="_blank"
	   onclick="ga('send', 'event', 'quickLinks', 'nutritionCalculator');">
		Nutrition Calculator
	</a>
</td>
</tr>
<tr>
<td class="tableCenterBoxes">
	<a href="popups/ClubsAndOrganizationsFall2015.pdf"
	   rel="clearbox[gallery=Resources,,width=650,,height=500,,title=Clubs and Organizations]"
	   onclick="ga('send', 'event', 'quickLinks', 'clubsAndOrganizations');">
		Clubs and Organizations
	</a>
</td>
</tr>

I have no idea why this is happening so any help is greatly appreciated. Thank you.

Answer 1

Binding events

I see you use some clearbox plugin and this plugin is setted up by rel parameter. After page load, the script inside clearbox sets up event listeners onto each rel=clearbox param and sets its new behavior. It probably unbind previous onclick elements like your GA code. This is a problem and you can try to solve it in a few different ways.

Quick and dirty

Set up this onclick listener by javascript after page loads with some delay - e.g. 1-2 seconds after onload. This just adds one more onclick event to existing configuration in your pop-up link with ClearBox.

Correct approach

The Clearbox library has some callback functions.

CB_AllowExtFunctLoad='on' calls a function CB_ExternalFunctionLoad(); every time after a new content has loaded. In this function you can have you customized ga("send"...) calls...

CB_AllowExtFunctPageLoad='on' calls a function named CB_ExternalFunctionPageLoad(); after your page has fully loaded. This is right place to set up your customized event listeners globally.

---

You can read more in clearbox documentation in section: Clearbox professional settings: http://kreaturamedia.com/clearbox/index_en.html

---

Update

Event listeners setted by you can looks like (jQuery example):

jQuery

<a href="popups/ClubsAndOrganizationsFall2015.pdf"
 rel="clearbox[gallery=Resources,,width=650,,height=500,,title=Clubs and Organizations]"
 data-description="clubsAndOrganizations">
    Clubs and Organizations
</a> 

<script>
var CB_AllowExtFunctPageLoad = function(){
 $(".tableCenterBoxes a").onclick(function(){
   var desc = $(this).attr("data-description");
   ga('send', 'event', 'quickLinks', desc);
 }); 
}
</script>

Pure Javascript

<script>

function CB_ExternalFunctionLoad() { 

    var classname = document.getElementsByClassName("popup");

    var gaSetter = function() {
        var cat = this.getAttribute("data-category");
        var desc = this.getAttribute("data-description");
        ga('send', 'event', cat, desc);      
    };  

    for(var i=0;i<classname.length;i++){
       classname[i].addEventListener('click', gaSetter, false);
    }

}
</script>