Blog

How to Bind onClick Events to Links

As marketers, we like tracking onClick events, such as downloads or clicks on external links. When using Google Analytics to track onClick events, we need Google Analytics event tracking code added to each link. This usually involves sending a list of links and instructions to your front-end developer for implementation. It also means that every time you wish to modify something or add something new, you rely on your front-end coder. Here's a trick that might liberate you from this dependency. Say hello to the "bind" method.

Let's say you have the following link to a PDF that you wish to track as a virtual Pageview:

<a class="pdf_download_awesome" href="/files/uploads/2012/8/10/wsa.pdf">We're So Awesome PDF</a>

  • Here is the common way to append an onClick event:

<a class="pdf_download_awesome" 

onClick="_gaq.push(['_trackPageview', '/pdfs/we-so-awesome.pdf']);" 

href="/files/uploads/2012/8/10/wsa.pdf" >We're So Awesome PDF</a>

This requires a front-end coder to go in and add the onClick events to each link separately or for a back-end developer to add it to the page template.

  • Here is the way to add the onClick event with less dependency on developers:

<a class="pdf_download_awesome" id="wsa-pdf-download"

href="/files/uploads/2012/8/10/wsa.pdf">We're So Awesome PDF</a>

<!--OTHER PAGE CONTENT CAN GO HERE-->

<script type="text/javascript">

$('a#wsa-pdf-download').bind("click", function(){
_gaq.push(['_trackPageview', '/pdfs/we-so-awesome.pdf']);
});

</script>

The second way, which uses the bind method in javascript, might look like more work, but here's what's great about it: all of your onClick events can be grouped into one area at the footer of your page, and if made editable to you, can be managed without a developer getting involved.  What this means is that all you need at the end of the day is an editable area at the footer your pages where you can control the code. Some content management systems have this capability built-in, and in some cases, you might have to request it to be added to the admin panel.

What the bind method needs, however, is for there to be a unique link ID or class given to the link to which you wish to add an onClick event. Note that classes tend to be used multiple times on a page if the same type of link comes up, so be wary of using a class as a selector for appending your onClick event. In the example above, the link ID is "wsa-pdf-download" and the bind method uses that to append the onclick event: $('a#wsa-pdf-download'.bind("click",function(){

To append the onClick event to links of the class "pdf_download_awesome", then use this:

 $('a.pdf_download_awesome'.bind("click",function(){

Got any other time-saving, developer-dependency reducing tips to share? Let me know in the comments!

Share this post

Comment on this post

*
*

Ready to discuss your project? Work With Us
Blue Fountain Media is recognized as a
Top Digital Agency by
Ranked #1 Interactive
Agency by top interactive agencies example
Ranked Top 10 Digital
Agency by awwwards logo
Ranked Top 10 Agency
Worldwide by IMA logo
Featured Blog Article
Download our Free Whitepapers
Our Locations
New York Headquarters
New York Headquarters
102 Madison Avenue - Second Floor
New York, NY 10016
Chicago Office
Chicago Office
222 Merchandise Mart Plaza, Suite 1212
Chicago, IL 60654
Seattle Office
Seattle Office
14980 NE 31st Way, Suite 120
Redmond, WA 98052