GA timing
Google Analytics user timing for UI components
Installation
npm i -S @prepair/ga-timingSetup
import { setup } from '@prepair/ga-timing';
import { myCustomGetStorageItem, myCustomSetStorageItem, myCustomGetConfig } from '../my-custom';
...
setup({
isAutoReset: false,
isTrackingEnabled: true,
storageApi: {
getItem: myCustomGetStorageItem,
setItem: myCustomSetStorageItem
},
configApi: {
get: myCustomGetConfig
},
googleAnalyticsApi: window.gtag
});Options
| name | type | default | description |
|---|---|---|---|
| key | String | userTimingConfigurations |
the root key of the config JSON and the key for the storage item |
| isAutoReset | Boolean | false |
if true it loads the default configuration into the storage on every page load |
| isTrackingEnabled | Boolean | true |
if false it won't call the googleAnalyticsApi |
| storageApi | Object | default implementation | get and set methods for interacting the storage |
| configApi | Object | default implementation | XHR request wrapper for config endpoint |
| googleAnalyticsApi | Object | window.gtag |
Google Analytics gtag object |
Example for config JSON
{
"userTimingConfigurations": [
{
"name": "timingCategory.childCategory",
"conditions": {
"interactivity": ["COND_0"],
"loadCompletion": ["COND_1", "COND_2"]
},
"analytics": {
"timingCategory": "Timing category / Child category"
}
}
]
}Tracking example
import * as gaTiming from '@prepair/ga-timing';
const TIMING_CATEGORY = 'timingCategory.childCategory';
...
onStart () {
gaTiming.startTracking(TIMING_CATEGORY);
// OR gaTiming.startTracking(TIMING_CATEGORY, window.performance.timing.*)
}
...
componentReady () {
gaTiming.fulfillCondition(TIMING_CATEGORY, 'COND_0');
// emits the following GA 'timing' event
// timingCategory: TIMING_CATEGORY, timingVar: 'Interactivity', timingVal: ~1000
}
onLoad1 () {
gaTiming.fulfillCondition(TIMING_CATEGORY, 'COND_1');
}
onLoad2 () {
gaTiming.fulfillCondition(TIMING_CATEGORY, 'COND_2');
// emits the following GA 'timing' event
// timingCategory: TIMING_CATEGORY, timingVar: 'Load completion', timingVal: ~2000
}
...
onSpecialEvent () {
gaTiming.skipTracking(TIMING_CATEGORY);
}
...