vue-tracker-bonc

VueTracker

Link your bonc tracking installation. Compatible with vue 2.x and 3.x.

Installation

npm install --save vue-tracker-bonc

## Usage

### Bundler (Webpack, Rollup)

```js
import Vue from 'vue'
import VueTracker from 'vue-tracker-bonc'

Vue.use(VueTracker, {
  // Configure your tracker server and site by providing
  host: 'http://172.16.36.116:8599',
  siteId: 6,

  // Changes the default .js and .php endpoint's filename
  // Default: 'bonc'
  trackerFileName: 'bonc',

  // Enables automatically registering pageviews on the router
  router: router,

  // Enables link tracking on regular links. Note that this won't
  // work for routing links (ie. internal Vue router links)
  // Default: true
  enableLinkTracking: true,

  // Require consent before sending tracking information to tracker
  // Default: false
  requireConsent: false,

  // Whether to track the initial page view
  // Default: true
  trackInitialView: true,

  // Run Tracker without cookies
  // Default: false
  disableCookies: false,

  // Require consent before creating tracker session cookie
  // Default: false
  requireCookieConsent: false,

  // Enable the heartbeat timer
  // Default: false
  enableHeartBeatTimer: false,

  // Set the heartbeat timer interval
  // Default: 15
  heartBeatTimerInterval: 15,

  // Whether or not to log debug information
  // Default: false
  debug: false,

  // UserID passed to Tracker
  // Default: undefined
  userId: undefined,

  // Share the tracking cookie across subdomains
  // Default: undefined, example '*.example.com'
  cookieDomain: undefined,

  // Tell Tracker the website domain so that clicks on these domains are not tracked as 'Outlinks'
  // Default: undefined, example: '*.example.com'
  domains: undefined,

  // A list of pre-initialization actions that run before tracker is loaded
  // Default: []
  // Example: [
  //   ['API_method_name', parameter_list],
  //   ['setCustomVariable','1','VisitorType','Member'],
  //   ['appendToTrackingUrl', 'new_visit=1'],
  //   etc.
  // ]
  preInitActions: [],

  // A function to determine whether to track an interaction as a site search
  // instead of as a page view. If not a function, all interactions will be
  // tracked as page views. Receives the new route as an argument, and
  // returns either an object of keyword, category (optional) and resultsCount
  // (optional) to track as a site search, or a falsey value to track as a page
  // view.
  // Default: false, i.e. track all interactions as page views
  // Example: (to) => {
  //   if (to.query.q && to.name === 'search') {
  //     return { keyword: to.query.q, category: to.params.category }
  //   } else {
  //    return null
  //   }
  // }
  trackSiteSearch: false
});

// Now you can access tracker api in components through
this.$tracker

// or
window._paq.push

Note on async loading

This plugin loads the bonc.js asynchronously, which means it is possible that $tracker is not (yet) loaded. Furthermore anti-tracking plugins on browsers might block bonc.js entirely. You should always guard your calls to $tracker, or use window._paq.push:

this.$tracker && this.$tracker.trackPageView()

// Or...

window._paq.push(['trackPageView'])

Note on external link tracking

When using the option to trackExternalLinks, vue-tracker ensures the corresponding Tracker method is called after each navigation event. Tracker scans the entire DOM for external links and adds its link handling. This means that if your external links are rendered dynamically these links may not be picked up. You need to call this method manually if links might not exist after the page has finished rendering (for example if the links come from some REST call).

this.$tracker && this.$tracker.enableLinkTracking()

// Or...

window._paq.push(['enableLinkTracking'])

Nuxt

Nuxt can work by creating a plugin that will load VueTracker with SSR disabled. Note how the router is passed in the second snippet:

// nuxt.config.js

export default {
  plugins: [
    { src: '~/plugins/vue-tracker.js', ssr: false }
  ]
}

// plugins/vue-tracker.js

import Vue from 'vue'
import VueTracker from 'vue-tracker'

export default ({ app }) => {
  Vue.use(VueTracker, {
    router: app.router

    /** Other configuration options **/
  })
}

Ignoring routes

It is possible to ignore routes using the route meta:

{
  path: '/page-2',
  name: 'Page2',
  component: Page2,
  meta: {
    analyticsIgnore: true
  }
}

Managing tracking consent

First of all load the plugin with the requireConsent option enabled:

Vue.use(VueTracker, {
  // ...
  requireConsent: true
})

Tracker has a built in way to give and remember consent. The simplest way is to simply use this method provided by Tracker:

<button @click="handleConsent()">Accept Tracking</button>

handleConsent() {
  this.$tracker.rememberConsentGiven()
}

Another option is to use your own implementation for remembering consent. In that case you can simply call this.$tracker.setConsentGiven() on each page load when you establish that the user has given consent.

Managing cookie consent

You can use Tracker Analytics without consent and cookie banner.

First of all load the plugin with the requireCookieConsent option enabled:

Vue.use(VueTracker, {
  // ...
  requireCookieConsent: true
})

Tracker has a built in way to give and remember consent. The simplest way is to simply use this method provided by Tracker:

<button @click="handleConsent()">Accept Cookies</button>

handleConsent() {
  this.$tracker.rememberCookieConsentGiven()
}

Another option is to use your own implementation for remembering cookie consent. In that case you can simply call this.$tracker.setCookieConsentGiven() on each page load when you establish that the user has given cookie consent.

Build

Bundle the js and css of to the dist folder:

npm run build

License

MIT