Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codfish/jquery-track
Bind google analytics events to DOM elements easily using HTML data attributes.
https://github.com/codfish/jquery-track
analytics events fish google-analytics javascript jquery jquery-plugin
Last synced: 23 days ago
JSON representation
Bind google analytics events to DOM elements easily using HTML data attributes.
- Host: GitHub
- URL: https://github.com/codfish/jquery-track
- Owner: codfish
- License: mit
- Created: 2014-01-07T15:43:57.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2021-04-26T11:31:29.000Z (over 3 years ago)
- Last Synced: 2024-04-26T08:03:03.448Z (7 months ago)
- Topics: analytics, events, fish, google-analytics, javascript, jquery, jquery-plugin
- Language: JavaScript
- Homepage:
- Size: 113 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jquery-track
Bind google analytics events to DOM elements easily using HTML data attributes.
[](https://travis-ci.org/codfish/jquery-track) [](https://codeclimate.com/github/codfish/jquery-track) [](http://npmjs.org/package/jquery-track)
## Installation
* [yarn](https://yarnpkg.com/en/package/jquery-track): `yarn add jquery-track`
* [npm](http://npmjs.org/package/jquery-track): `npm install --save jquery-track`
* [unpkg](https://unpkg.com) cdn: [minified](https://unpkg.com/jquery-track/dist/jquery.track.min.js) or [unminified](https://unpkg.com/jquery-track/dist/jquery.track.js)
* [jsdeliver](http://www.jsdelivr.com/) cdn: [minified](https://cdn.jsdelivr.net/npm/jquery-track@latest/dist/jquery.track.min.js) or [unminified](https://cdn.jsdelivr.net/npm/jquery-track@latest/dist/jquery.track.js)
* [Download the latest release on Github](https://github.com/codfish/jquery-track/releases)
## Usage
Basic example using `data-` attributes:
```html
Home
```
```js
// initialize the plugin
$('a').track();
```
### Data attributes
The following data attributes are available, most of which map directly to [GA event fields](https://developers.google.com/analytics/devguides/collection/analyticsjs/events#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](http://api.jquery.com/Types/#Event), as well as custom events.
- `data-hit-type` maps to the `hitType` GA field. _Optional_, defaults to `event`. Can **only** be `event` or [`social`](https://developers.google.com/analytics/devguides/collection/analyticsjs/social-interactions).
Further details about the meaning of these fields can be [found in the Google Analytics documentation](https://developers.google.com/analytics/devguides/collection/analyticsjs/events).
## 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.
```js
$('a').track({ debug: true });
```
#### social {Boolean} _Default:_ `false`
Set to true if you're tracking a [social event]().
```html
Tweet
```
```js
$('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.
```html
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.
```html
Home
```
```js
$('a').track({ prefix: 'ga-' });
```
## Todo
- [x] Add options
- [x] Add umd during build process
- [x] Add individual data attributes
- [x] 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`)