STRG. beHave tracking-client vue
MIT License
Client-side plugin providing a BeHave tracking interface for Vue.js based applications.
import Vue from 'vue'
import VueBehave from '@strg/behave-tracking-client-vue'
// router and options definition...
Vue.use(VueBehave, { router, options })
import Vue from 'vue'
import VueBehave from '@strg/behave-tracking-client-vue'
// options definition...
export default ({ app: { router } }) => {
Vue.use(VueBehave, { router, options })
}
Router of your Vue.js application - required if you wish to track URLs
and referrers
. If not provided, URL and referrer tracking is automatically disabled.
Object with the following properties:
debugMode
- logs events to console instead of using websocketurlTracking
- enables / disables url trackingreferrerTracking
- enables / disables referrer trackingeventKeyUrl
eventKeyReferrer
eventKeyClick
eventKeyScroll
eventKeyView
eventContentIdMode
- default
or crc32
config
- behave configuration object
NAMESPACE
CLIENT_STORAGE_NAMESPACE
COOKIE_NAME
RECONNECT_TIMEOUT
ENDPOINT
- required if not in debug modeThe minimal required options look like this:
const options = {
config: {
ENDPOINT: '' // websocket endpoint
},
}
Or using the debug mode:
const options = {
debugMode: true
}
User provided options object gets merged with the defaults during the plugin installation. These are the default values:
{
debugMode: false,
urlTracking: true,
referrerTracking: true,
eventKeyUrl: 'url',
eventKeyReferrer: 'referrer',
eventKeyClick: 'click',
eventKeyScroll: 'scroll',
eventKeyView: 'view'
eventContentIdMode: 'default',
config: {
NAMESPACE: 'strgBeHave',
CLIENT_STORAGE_NAMESPACE: 'strgBeHave',
COOKIE_NAME: 'STRG.BeHaveOptOut',
RECONNECT_TIMEOUT: 60000,
ENDPOINT: null
}
}
Plugin can track engagement in two ways:
Starts automatically if router
is provided. If you wish to disable either url or referrer tracking, you can do so via options' urlTracking
and referrerTracking
properties.
Plugin exposes three tracking methods available in your components via the $behave
property.
trackScrolling(vm, eventKey, contentId)
trackClicks(vm, eventKey, contentId)
trackView(vm, eventKey, contentId)
Where:
vm
- view model of the componenteventKey
- custom behave event key (optional - falls back to global plugin options)contentId
- unique identifier of the content in questionExample:
mounted () {
this.$behave.trackClicks(this, 'behave-recommendation-box-1234-teaser-click', 'product-1234')
},
By having access to the view model of your components, plugin can properly unregister events by itself when components get destroyed. This means that as a consumer, you don't need to pollute your application's main logic with additional cleanup code.