Add Google Analytics Click (event) tracking code t

Question

I have the following Javascript in my head :

// Google Analytics code required for EventTracking <script type="text/javascript"> function trackOutboundLink(link, category, action) { try { _gaq.push(['_trackEvent', category , action]); } catch(err){} setTimeout(function() {document.location.href = link.href; }, 100); } 

And the following in my body:

// required to activate social bookmarks
$(".btn_fb").click(function() {
    window.open("");
    return false;
});    
$(".btn_tw").click(function() {
    window.open("http://twitter.com/home?status=Webpage Title"+document.URL+"", "Twitter", "width=660,height=400,scrollbars=no;resizable=no");
    return false;
});    
$(".btn_li").click(function() {
    window.open("http://www.linkedin.com/shareArticle?mini=true&url="+document.URL+"&title=Webpage Title;summary=Webpage summary", "LinkedIn", "width=660,height=400,scrollbars=no;resizable=no");
    return false;
});         $('.btn_go').click(function() {
    window.open("http://plus.google.com/share?url="+document.URL, 'GooglePlus', 'width=660,height=500,scrollbars=no,resizable=no');
    return false;
}); 
$(".btn_ma").attr("href", "mailto:?subject=Webpage Subject&body=Webpage summary" + window.location);  </script>

//GA Code
    <script type="text/javascript">
          var _gaq = _gaq || [];
          _gaq.push(['_setAccount', 'UA-NNNNNN-1']);
          _gaq.push(['_trackPageview']);
          (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
          })();
        </script>

And the following in my HTML:

      <div class="btn_fb"></div>
      <div class="btn_tw"></div>
      <div class="btn_li"></div>
      <a class="btn_ma"></a>
      <div class="btn_go"></div>

The links function correctly but as they are not tags (except for .btn_ma) I cannot add Google Analytics Event Tracking as per documentation: https://support.google.com/analytics/answer/1136920?hl=en-GB.

Any advice about best approach here?

Answer 1

You can add the event tracking to the jQuery click events.

// required to activate social bookmarks
$(".btn_fb").click(function() {
    window.open("");
    try { 
    _gaq.push(['_trackEvent', "{category}", "{action}"]); 
    } catch(err){}
    return false;
});  

$(".btn_tw").click(function() {
    window.open("http://twitter.com/home?status=Webpage Title"+document.URL+"", "Twitter", "width=660,height=400,scrollbars=no;resizable=no");
    try { 
    _gaq.push(['_trackEvent', "{category}", "{action}"]); 
    } catch(err){}
    return false;
});

$(".btn_li").click(function() {
    window.open("http://www.linkedin.com/shareArticle?mini=true&url="+document.URL+"&title=Webpage Title;summary=Webpage summary", "LinkedIn", "width=660,height=400,scrollbars=no;resizable=no");
    try { 
    _gaq.push(['_trackEvent', "{category}", "{action}"]); 
    } catch(err){}
    return false;
});         

$('.btn_go').click(function() {
    window.open("http://plus.google.com/share?url="+document.URL, 'GooglePlus', 'width=660,height=500,scrollbars=no,resizable=no');
    try { 
    _gaq.push(['_trackEvent', "{category}", "{action}"]); 
    } catch(err){}
    return false;
}); 

$(".btn_ma").click(function() {
    window.location = "mailto:?subject=Webpage Subject&body=Webpage summary" + window.location
    try { 
    _gaq.push(['_trackEvent', "{category}", "{action}"]); 
    } catch(err){}
    return false;
});

You'll notice I've added the click event tracking to each click event, so when the user clicks on the div, the action is taken, and then the analytics are tracked. I also edited your mailing click event so it can be tracked as well. Another idea is using a service like Share This or AddThis which have analytics built in and can link to Google Analytics as well