| 1 | Measurement Framework
|
| 2 | =======
|
| 3 | [![NPM Version][npm-image]][npm-url]
|
| 4 | ![Stability][stability-image]
|
| 5 |
|
| 6 | Collection of Javascript code to implement a browser based measurement
|
| 7 | system for websites. Its created of several functions that integrate
|
| 8 | with Google Tag Manager, Google Analytics and jQuery.
|
| 9 |
|
| 10 |
|
| 11 |
|
| 12 | ## Install
|
| 13 |
|
| 14 |
|
| 15 |
|
| 16 | ## Functions
|
| 17 | * AjaxComplete (jQuery)
|
| 18 | * Client ID Setter for Google Analytics
|
| 19 | * Content Engagement
|
| 20 | * Custom Task in GA
|
| 21 | * DomReady
|
| 22 | * KlarnaCheckout Hooks
|
| 23 | * Kudakeru (Tracking code for the
|
| 24 | * Iframe to Parent Messages
|
| 25 | * SendHitTask for GA
|
| 26 | * User Trail
|
| 27 |
|
| 28 |
|
| 29 | ## Usage
|
| 30 |
|
| 31 |
|
| 32 | ### User Trail
|
| 33 | It uses a cookie to store a users action on a webpage and let you map
|
| 34 | thoose actions to a particular state in the user journey using a function.
|
| 35 |
|
| 36 | ### Content Engagement
|
| 37 | The module is created to measure users based on "engaged" time and not actual
|
| 38 | time. Engaged time is defined as the time a user clicks, scrolls, moving the mouse
|
| 39 | or using the keyboard. Its heavily inspired by
|
| 40 | [Simo Ahava's script from 2016](https://www.simoahava.com/analytics/track-content-engagement-via-gtm/) but can
|
| 41 | trigger multiple events, should be a little bit more precise and gready.
|
| 42 |
|
| 43 | ```javascript
|
| 44 | import MeasurementFramework, {contentEngaged} from "measurement-framework"
|
| 45 |
|
| 46 | let eventName = "Content Viewed"
|
| 47 | let secondsToTrigger = 12
|
| 48 |
|
| 49 | contentEngaged(eventName, secondsToTrigger, function (dataLayerPush) {
|
| 50 | dataLayerPush.debugText = "Target time for Content Viewed is 12 seconds."
|
| 51 | })
|
| 52 |
|
| 53 | MeasurementFramework.init()
|
| 54 | ```
|
| 55 |
|
| 56 | The script could also be used to measure Real Time on site.
|
| 57 |
|
| 58 |
|
| 59 | ## Building with rollup
|
| 60 | Rollup and other javascript compilers doesn't support removing unused
|
| 61 | methods form classes. This is why the measurement framework i built on
|
| 62 | running several functions instead of importing a class to hold them.
|
| 63 | Internally these uses the MeasurementFramework class to hold state and
|
| 64 | to orcestrate between classes. This makes the package nice and tight.
|
| 65 |
|
| 66 | [npm-image]: https://img.shields.io/npm/v/measurement-framework.svg
|
| 67 | [npm-url]: https://npmjs.org/package/measurement-framework
|
| 68 | [stability-image]: https://img.shields.io/badge/stability-experimental-orange.svg
|
| 69 | [stability-url]: https://github.com/mijohansen/measurement-framework
|
| 70 |
|