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:

<a href="/"
    data-event-category="Site Navigation"
    data-event-action="click"
    data-event-label="Home">Home</a>

// initialize the plugin
$('a').track();

Data attributes

The following data attributes are available, most of which map directly to GA event fields.

• data-event-category maps to the eventCategory GA field. Required.
• data-event-action maps to the eventAction GA field. Required.
• data-event-label maps to the eventLabel GA field. Optional, defaults to null.
• data-event-value maps to the eventValue GA field. Optional, defaults to null.
• data-non-interation maps to the nonInteraction GA field. Optional, defaults to false.
• data-transport maps to the transport GA field. Optional, defaults to null.
• data-event-type is the event types you want to trigger the event on. Optional, defaults to click. Can be any DOM event type that is supported by jQuery, as well as custom events.
• data-hit-type maps to the hitType GA field. Optional, defaults to event. Can only be event or social.

Further details about the meaning of these fields can be found in the Google Analytics documentation.

Plugin options

debug {Boolean} Default: false

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 });

social {Boolean} Default: false

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>

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.

<a href="/"
    data-ga-event-category="Site Navigation"
    data-ga-event-action="click"
    data-ga-event-label="Home">Home</a>

$('a').track({ prefix: 'ga-' });

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 or item)