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:
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-->
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:
To append the onClick event to links of the class "pdf_download_awesome", then use this:
Got any other time-saving, developer-dependency reducing tips to share? Let me know in the comments!