Google Analytics – How to manually Track Clicks on Outbound Links
You can use Google Analytics to track clicks on links that lead away from your site. Because links that lead away from your site are not automatically tracked, you will need to manually tag all outbound links you want to track. To do this, you’ll add some JavaScript customizations to your page and to the links you want to track.
- Set up Event Tracking in your Analytics Tracking code. This is a simple matter of adding the following line to the tracking code for your pages after the page tracking object is set up:
var pageTracker = _gat._getTracker('UA-XXXXX-X'); pageTracker._trackPageview(); -
Add a JavaScript method in the head of your document to delay the outbound click by a fraction of a second.
This delay will hardly be noticeable by the user, but it will provide the browser more time load the tracking code. Without this method, it’s possible that a user can click on the outbound link before the tracking code loads, in which case the event will not be recorded. Here’s what the JavaScript code in the section should look like (assuming you will use your own tracking code ID):
<script type="text/javascript"> function recordOutboundLink(link, category, action) { try { var pageTracker=_gat._getTracker("UA-XXXXX-X"); pageTracker._trackEvent(category, action); setTimeout('document.location = "' + link.href + '"', 100) }catch(err){} } </script> -
Update your outbound links to call the new function without first following the link. For example, to log every click on a particular link to www.example.com, you would use the _trackEvent() method in the link’s tag:
<a href="http://www.example.com" onClick="recordOutboundLink(this, 'Outbound Links', 'example.com');return false;">Trackable Link</a>
The example above uses the category label Outbound Links. This is a useful way to categorize all outbound links in the Event Tracking reports. It sets the specific name of the website as the second parameter in the call. With this structure in place, you could then see Outbound Links as one of the event categories and drill down to see which particular outbound links are the most popular. Be sure to use return false for the onClick handler, because without that statement the browser will follow the link before the recordOutboundLink method has a chance to execute.
For more information on using event tracking, see the Event Tracking Guide on Google Code.
Article Reference URL:
http://www.google.com/support/googleanalytics/bin/answer.py?answer=55527&cbid=-wlhzojb6oodb&src=cb&lev=index
Drupal – Adding Javascript to your module
When creating your own Drupal module, you may need to add some styling or Javascript to improve the usability of your module. Here is how to do it.
drupal_add_js(drupal_get_path('module', 'MODULE_NAME') . '/common.js');
Similarly you can add CSS to your module as well
drupal_add_css(drupal_get_path('module', 'MODULE_NAME') . '/styles.css');
Prototype JS – Determine if an object exists in the page loaded
I’m so use to using jQuery that I usually don’t have to look up documentation on how to use certain functions. They almost come naturally because it’s so English-like! Unfortunately Magento uses Prototype as it’s native choice of Javascript Frameworks. I sure wish they would have chosen jQuery! I think they would have more people jumping on their platform. I’m sure they have a good choice for it. Anyway, here’s how to check:
if($('id_of_element') != undefined) {
alert('Object exists.');
}
Javascript – Passing Multiple Parameters through setTimeout
One of the problems that I’ve faced with Javascript is passing multiple parameters through the setTimeout function. I found this little snippet on the internet a few months ago and would like to share it with you. I don’t know who the original author is so I could not give him/her proper credit. Thanks!
var _st = window.setTimeout;
window.setTimeout = function(fRef, mDelay) {
if(typeof fRef == "function") {
var argu = Array.prototype.slice.call(arguments,2);
var f = (function(){ fRef.apply(null, argu); });
return _st(f, mDelay);
}
return _st(fRef,mDelay);
}
Define your function to call with setTimeout:
function alertMe(message, name) {
alert(message + name);
}
Now, just call the function.
var message = 'Hello, '; var name = 'Richard'; setTimeout(alertMe, 2000, message, name);
Hope this helps someone!
How to define your own JavaScript class
There are several ways to define a class in Javascript. I will be listing my favorite method below (JSON Method). It’s important to note that there are no real classes in JavaScript. Everything is considered an object. So below is our class definition:
<script type="text/javascript">
var Person = {
age: "25",
sex: "Male",
location: "New York",
getASL: function () {
return 'Age: ' + this.age + ', Sex: ' + this.sex + ', Location: ' + this.location;
}
};
</script>
So you can start using the class like this:
<script type="text/javascript"> Person.age = "29"; alert(Person.getASL()); </script>
J-Crop – the jQuery image cropping plugin
Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.
Feature Overview- Attaches unobtrusively to any image
- Supports aspect ratio locking
- Supports minSize/maxSize setting
- Callbacks for selection done, or while moving
- Keyboard support for nudging selection
- API features to create interactivity, including animation
- Support for CSS styling
Cross-platform Compatibility
- Firefox 2+
- Safari 3+
- Opera 9.5+
- Google Chrome 0.2+
- Internet Explorer 6+
Simple to implement.
$(function(){ $('#jcrop_target').Jcrop(); });
MooTools – Free Syntax Highlighting Class
Lighter.js is a free syntax highlighting class developed with MooTools. It was created with the MooTools developer in mind and takes advantage of many of the Framework’s features. Using it can be as simple as adding a single script to your webpage, selecting the elements you wish to highlight, and Lighter.js takes care of the rest.
All browsers supported by MooTools are compatible with Lighter.js. It’s possible that it may work with earlier/other browsers but these are unofficially supported. The official list is:
- Safari 2+
- Internet Explorer 6+
- Firefox 2+
- Opera 9+
-
Beware the heat-seeking Nerf machine-gun coming to a cubicle near you http://om.ly/svHF #fb
- Follow me
Last Tweet
-
Archives
Categories
My Favorites
- 37 Signals
- Andrew Warner
- Chris Coyier
- Chris Shiflett
- Collis Ta'eed
- Development Seed
- Drupal
- HubSpot
- James Padolsey
- Joel On Software
- John Resig
- jQuery
- Kevin Rose
- Life Hacker
- Magento
- Mashable
- Matt Cutts
- Matt Ryan
- MySQL
- NetTuts
- Noupe
- Photoshop Tutorials
- PHP
- Smashing Magazine
- Tech Crunch
- WoorkUp
- Wordpress


