Bind google analytics events to DOM elements easily using HTML data attributes.
- yarn:
yarn add jquery-track
- npm:
npm install --save jquery-track
- unpkg cdn: minified or unminified
- jsdeliver cdn: minified or unminified
- Download the latest release on Github
Basic example using data-
attributes:
<a href="/"
data-event-category="Site Navigation"
data-event-action="click"
data-event-label="Home">Home</a>
// initialize the plugin
$('a').track();
The following data attributes are available, most of which map directly to GA event fields.
data-event-category
maps to theeventCategory
GA field. Required.data-event-action
maps to theeventAction
GA field. Required.data-event-label
maps to theeventLabel
GA field. Optional, defaults tonull
.data-event-value
maps to theeventValue
GA field. Optional, defaults tonull
.data-non-interation
maps to thenonInteraction
GA field. Optional, defaults tofalse
.data-transport
maps to thetransport
GA field. Optional, defaults tonull
.data-event-type
is the event types you want to trigger the event on. Optional, defaults toclick
. Can be any DOM event type that is supported by jQuery, as well as custom events.data-hit-type
maps to thehitType
GA field. Optional, defaults toevent
. Can only beevent
orsocial
.
Further details about the meaning of these fields can be found in the Google Analytics documentation.
Set to true to turn on debug mode. Events will get logged to the browser console, instead of being sent to GA.
$('a').track({ debug: true });
Set to true if you're tracking a social event.
<a href="#"
data-event-category="Twitter"
data-event-action="tweet"
data-event-label="http://codfish.io">Tweet</a>
$('a').track({ social: true });
Alternatively, you can use the data-hit-type
attribute if you don't want to use the option, or you have a mixture of non-social & social elements you're tracking.
<a href="#"
data-hit-type="social"
data-event-category="Twitter"
data-event-action="tweet"
data-event-label="http://codfish.io">Tweet</a>
Use this option to tell the plugin to grab field values from data attributes with this prefix, i.e. data-{prefix}event-category
. This can help in the rare instance that you may have a naming conflict with a data attribute.
<a href="/"
data-ga-event-category="Site Navigation"
data-ga-event-action="click"
data-ga-event-label="Home">Home</a>
$('a').track({ prefix: 'ga-' });
- Add options
- Add umd during build process
- Add individual data attributes
- Add
transport: 'beacon'
support. https://developers.google.com/analytics/devguides/collection/analyticsjs/sending-hits#specifying_different_transport_mechanisms - Store each instance of the plugin as a dataset item, to help prevent re-initializing items.
- Handle multiple event types, i.e.
data-event-type="load click"
- Possibly refactor to handle all hit types, i.e. page/app tracking (
pageview
,screenview
), ecommerce tracking (transaction
oritem
)