jquery-track
Bind google analytics events to DOM elements easily using HTML data attributes.
Installation
- 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
Usage
Basic example using data-
attributes:
Home
// initialize the plugin;
Data attributes
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.
Plugin options
false
debug {Boolean} Default: Set to true to turn on debug mode. Events will get logged to the browser console, instead of being sent to GA.
;
false
social {Boolean} Default: Set to true if you're tracking a social event.
Tweet
;
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.
Tweet
''
prefix {String} Default: 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.
Home
;
Todo
- 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
)