jQuery Track Everything is a jQuery plugin that makes tracking events with Google Analytics extremely easy. Not only can it be used by developers, designers, and marketers on the sites they create and manage, but it can easily be written into plugins for CMSs, like WordPress.
The plugin requires minimal configuration as it intelligently names and tracks events. It also allows users to easily track non-standard events, allowing the user to truly track everything.
However, jQuery Track Everything does not aim to do advanced tracking (e.g. event values and advanced interactions). In more advanced settings it can be used in conjunction with custom code to create deep tracking.
jQuery Track Everything works with both ga.js (the traditional _gaq interface) and analytics.js (Universal Analytics).
To use jQuery Track Everything, simply include the script, and call the jQuery method track. The plugin will default to tracking a number of previously untracked events that occur within the selected jQuery object.
$("body").track({ /* Optional Configuration */ });jQuery Track Everything is highly configurable, to allow for tracking and naming many irregular events. You may track the children of any jQuery object, (e.g. body, #content, aside:first div:eq(2)) by selecting it and calling the track method. To configure the plugin pass it a configuration object.
// Default Configuration
$("body").track({
options: {
forms: true,
outbound: true,
email: true,
phone: true,
anchor: true,
universal: false,
debug: false
},
dictionary: [],
additional: []
});The options parameter sets a number of booleans controlling jQuery Track Everything's default behavior.
| option | description |
|---|---|
| forms | track form submissions note: this only tracks that the submission occured, not the submission's contents |
| outbound | track outbound links (these are tracked as non-interaction events) |
track mailto links |
|
| phone | track tel links |
| anchor | track links to anchors (#) |
| universal | track events using Universal Analytics (analytics.js), rather than ga.js |
| debug | help debug tracking, this will console.log any events that are sent to Google, additionally it adds several descriptive classes to anything tracked by Track Everything |
Although, jQuery Track Everything attempts to intelligently name all events, you may have some more specific names for the default events the plugin tracks. To change the names, you may pass an array of definition objects to the dictionary field of the configuration object.
$("body").track({
dictionary: [
{
"selector" : "#quote-widget .contact-form",
"name" : "Quote Request"
},
{
"selector" : ".navbar .button.support-link",
"name" : "Support Site"
}
]
});A definition object consists of two fields that select and then name an event.
| field | description |
|---|---|
| selector | a jQuery Selector for the object causing the event |
| name | the new name for the event |
Note: Definitions only change the name of the event. If you need to change the category or the action, you will need to track an "additional" event.
Beyond tracking standard events, jQuery Track Everything allows the user to track any event that jQuery can detect. To configure an additional event, you may pass an array of additional event objects to the additional field of the configuration object.
$("body").track({
additional: [
{
"selector" : "input",
"events" : ["keypress", "select"],
"category" : "Form",
"action" : "Interaction"
},
{
"selector" : "button.awesome",
"events" : ["keypress", "click"],
"category" : "Link",
"action" : "Click",
"name" : "Awesome!"
}
]
});An additional event object consists of a number of required and optional fields that override any other event.
| field | type | description |
|---|---|---|
| selector | jQuery Selector | required - the object to track |
| events | Array | required - an array of jQuery events, for which to fire on |
| category | String | required - the category to send to Google |
| action | String | required - the action to send to Google |
| name | String | optional - the label to send to Google (if this is not supplied, the plugin will attempt to intelligently name the event) |
jQuery Track Everything tries very hard to intelligently classify and name events, however, this can lead to questions about how events are named and assigned.
The plugin allows configuration to overwrite defaults, weighting heavy configurations over lighter ones. As such configuration goes as follows (with each subsequent level overruling the previous ones):
- Defaults
- Definitions (
dictionary) - Additional Events (
additional)
Default events follow different naming conventions based on several attributes, as seen below (later attributes are given higher preference)
| event | attributes |
|---|---|
| forms | id, title, name |
| outbound | href |
href without mailto: |
|
| phone | href without tel: |
| anchor | href without # |
jQuery Track Everything not quite fit your needs? There are a few of alternatives, I recommend:
- jQuery Google Analytics by James Sout - Fire traditional Google Analytics Events on Click events by using several data attributes.
- Scout by Ben Plum - Fire traditional Google Analytics Events on Click events by using one data attribute.
- Custom Code - If none of these do exactly what you need, it's pretty easy to write your own event tracking with jQuery's
.on()method.
jQuery Track Everything is licensed MIT. Much of the original code for jQuery Track Everything came from my work at Ethoseo on a WordPress Plugin of the same name. The original code was also MIT licensed.