formstone/docs/json/analytics.json

Library of modular front end components.

{"main":["analytics.js"],"options":[{"name":"autoEvents","type":"boolean","default":"false","description":"Flag to bind auto-events to mailto, tel, files and external links"},{"name":"fileTypes","type":"regex","default":"","description":"File types for binding auto-events"},{"name":"eventCallback","type":"boolean","default":"false","description":"Flag to use event callbacks when navigating"},{"name":"eventTimeout","type":"int","default":"1000","description":"Event failure timeout"},{"name":"scrollDepth","type":"boolean","default":"false","description":"Flag to track scroll depth events"},{"name":"scrollStops","type":"int","default":"5","description":"Number of scroll increments to track"},{"name":"scrollFields","type":"object","default":"{}","description":"Additional event fields for scroll depth events"}],"events":[],"methods":[],"name":"Analytics","type":"utility","description":"A jQuery plugin for Google Universal Analytics Events.","dependencies":["jQuery","core.js","mediaquery.js"],"use":"### Basic\n\nTrack click events in Google Analytics by attaching a properly formed data attribute to any element. The data attribute should define at least the required values, category and action. Values should be comma separated:\n\n```markup\n<button data-analytics-event=\"category, action [, label] [, value]\">...</button>\n```\n\n### Advanced\n\nFire custom events by passing the event field values directly to Analytics:\n\n```javascript\n$.analytics(\"event\", {\n  eventCategory: \"Category\",\n  eventAction: \"Action\"\n  eventLabel: \"Label\",\n  eventValue: 100\n});\n```\n\nNote: `eventLabel` and `eventValue` are optional. Learn more about fields and <a href=\"https://developers.google.com/analytics/devguides/collection/analyticsjs/events\" target=\"_blank\">Event Tracking with Universal Analytics</a>.\n\n### Scroll Depth\n\nTrack scroll depth by enabling the `scrollDepth` option at initialization. Change the target scroll increments by modifying the `scrollStops` option:\n\n```javascript\n$.analytics({\n  scrollDepth: true,\n  scrollStops: 10\n});\n```\n\n### Page Views\n\nFire page view by calling the `pageview` method:\n\n```javascript\n$.analytics(\"pageview\");\n```\n\n### Tag Manager Support\n\nAnalytics will push to all available trackers, even when loaded using Google Tag Manager.\n\nNote: The [Google Analytics Debugger](https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna) extension helps to ensure events are being properly pushed.\n","demo":"[No Demo]\r\n\r\n<!--\r\n<style>\r\n  body { position: relative; }\r\n\r\n  .mark { border-bottom: 5px solid red; color: black; position: absolute; right: 0; text-align: right; width: 100px; }\r\n  .mark:before { background: red; bottom: 0; content: ''; display: block; height: 50px; opacity: 0.5; position: absolute; width: 100%; }\r\n  .mark_20  { bottom: 20%; }\r\n  .mark_40  { bottom: 40%; }\r\n  .mark_60  { bottom: 60%; }\r\n  .mark_80  { bottom: 80%; }\r\n  .mark_100 { bottom: 100%; }\r\n\r\n  .padded { height: 2000px; }\r\n</style>\r\n\r\n<div class=\"mark mark_20\"></div>\r\n<div class=\"mark mark_40\"></div>\r\n<div class=\"mark mark_60\"></div>\r\n<div class=\"mark mark_80\"></div>\r\n<div class=\"mark mark_100\"></div>\r\n\r\n<div class=\"padded\"></div>\r\n-->\n","document":"# Analytics\n\nA jQuery plugin for Google Universal Analytics Events.\n\n<!-- HEADER END -->\n\n<!-- NAV START -->\n\n* [Use](#use)\n* [Options](#options)\n\n<!-- NAV END -->\n\n<!-- DEMO BUTTON -->\n\n<a name=\"use\"></a>\n\n## Using Analytics\n\n\n#### Main\n\n```markup\nanalytics.js\n```\n\n\n#### Dependencies\n\n```markup\njQuery\ncore.js\nmediaquery.js\n```\n\n### Basic\n\nTrack click events in Google Analytics by attaching a properly formed data attribute to any element. The data attribute should define at least the required values, category and action. Values should be comma separated:\n\n```markup\n<button data-analytics-event=\"category, action [, label] [, value]\">...</button>\n```\n\n### Advanced\n\nFire custom events by passing the event field values directly to Analytics:\n\n```javascript\n$.analytics(\"event\", {\n  eventCategory: \"Category\",\n  eventAction: \"Action\"\n  eventLabel: \"Label\",\n  eventValue: 100\n});\n```\n\nNote: `eventLabel` and `eventValue` are optional. Learn more about fields and <a href=\"https://developers.google.com/analytics/devguides/collection/analyticsjs/events\" target=\"_blank\">Event Tracking with Universal Analytics</a>.\n\n### Scroll Depth\n\nTrack scroll depth by enabling the `scrollDepth` option at initialization. Change the target scroll increments by modifying the `scrollStops` option:\n\n```javascript\n$.analytics({\n  scrollDepth: true,\n  scrollStops: 10\n});\n```\n\n### Page Views\n\nFire page view by calling the `pageview` method:\n\n```javascript\n$.analytics(\"pageview\");\n```\n\n### Tag Manager Support\n\nAnalytics will push to all available trackers, even when loaded using Google Tag Manager.\n\nNote: The [Google Analytics Debugger](https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna) extension helps to ensure events are being properly pushed.\n\n\n\n<a name=\"options\"></a>\n\n## Options\n\nSet instance options by passing a valid object at initialization, or to the public `defaults` method.\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `autoEvents` | `boolean` | `false` | Flag to bind auto-events to mailto, tel, files and external links |\n| `fileTypes` | `regex` | &nbsp; | File types for binding auto-events |\n| `eventCallback` | `boolean` | `false` | Flag to use event callbacks when navigating |\n| `eventTimeout` | `int` | `1000` | Event failure timeout |\n| `scrollDepth` | `boolean` | `false` | Flag to track scroll depth events |\n| `scrollStops` | `int` | `5` | Number of scroll increments to track |\n| `scrollFields` | `object` | `{}` | Additional event fields for scroll depth events |\n\n"}