This is a simple jQuery plugin wrapper around window.ga. It tries to be smart and simple to make life easier. You can pass custom properties and set custom attributes on elements if you want to be fancy. This only works with "Universal Analytics".
NOTE:If the window.ga object is not found, the plugin will automatically switch to development mode.
Usage
Basic
Setup
<buttontype="button">Fire An Event</button>
$('button').ga();
Results
// this is what will be called in the plugin
// you can see the default properties here
ga('send',{
eventAction:"click",
eventCategory:"button",// this is default, it is not pulled from the button type
hitType:"event"
});
Development
In development mode, what would normally get passed to the ga function, gets passed to console.log.
Setup
<buttontype="button">Fire An Event</button>
$('button').ga({
development:true
});
Results
// this is what will be called when development is set to true
console.log('send',{
development:true,
eventAction:"click",
eventCategory:"button",
hitType:"event"
});
Using Native Attributes
Setup
<buttontype="button"value="hello"name="my-label">Fire An Event</button>
$('button').ga();
Results
ga('send',{
eventAction:"click",
eventCategory:"button",
eventLabel:"my-label",
hitType:"event"
});
Using Data Attributes
Setup
<buttontype="button"value="1"name="submit"data-label="Data Label"data-value="10"data-category="grey-button">Fire An Event</button>
$('button').ga();
Results
ga('send',{
eventAction:"click",
eventCategory:"grey-button",
eventLabel:"Data Label",
eventValue:10,// value is expected to be a positive int
hitType:"event"
});
Using Different Events
Setup
<buttontype="button"value="hello"name="my-label">Fire An Event</button>
$('button').ga({
eventAction:'mouseover'
});
Results
ga('send',{
eventAction:"mouseover",
eventCategory:"button",
eventLabel:"my-label",
hitType:"event"
});
Using Different Elements And Events
Setup
<inputtype="text"name="search" />
$('input').ga({
eventAction:'input'
});
Results
// this is what is called if you click on the input and pressed the "1" key
ga('send',{
eventAction:"input",
eventCategory:"text",
eventLabel:"search",
eventValue:1,// only positive int is passed
hitType:"event"
});
Using Callbacks
Setup
<buttontype="button"value="hello"name="my-label">Fire An Event</button>