vue-client-actions-tracker-component

looks something like that :)

This is the easy-to-use vue component for web analytics tracking with user's consent.

The component works with Vue 2.

The tracker won't work without user's consent. If user didn't choose option accepting tracking, than no client's actions will be tracked.

Set up

  npm i vue-client-actions-tracker-component

import Vue from 'vue'

// tracker component
import userTracker from 'vue-client-actions-tracker-component'
import '../node_modules/vue-client-actions-tracker-component/dist/vue-client-actions-tracker-component.css' // for styles

Vue.use(userTracker) // tracker uses vue-cookies plugin and by default cookies expiration date set to 90 days.

- If you want to change the expiration date: 
Vue.use(userTracker, {cookiesExpirationDate: '15d'})

How to use

Component generally has three options:

1. Allow metrics (all tracking are allowed (e.g google analytics), cookies and localStorage also can be used)

2. Only critical actions (only cookies and localStorage are available)

3. Disallow any actions (no tracking is available, cookies (with the exception of one cookie that we are saving when user is choosing the option. it's needed so not to show the tracker component every time the user opens the page) and localStorage as well)

In your template use component like that:

<template>
    <userTracker/>
</template>

Properties

| Property | Required | Default | Type | Description | |-------------------|----------|--------------------------------------------------|--------|---------------------------------------------------------------------------------------------------------------------------------------------| | privacyPolicyLink | false | '' | String | If you want to have a special link to the privacy policy page you need to add this property with the url to the page. E.g. '/privacy-policy | | title | false | Choose the way to communicate with this website: | String | Title of your tracker | | buttonTitle | false | Ok | String | Title of the acceptance button | | allowTitle | false | Allow metrics | String | Title for the allow option | | criticalTitle | false | Only critical actions | String | Title for the critical only option | | disallowTitle | false | Disallow any actions | String | Title for the disallow actions option | | classCustom | false | '' | String | Custom classes for the component for custom styles |

Methods

The component has one method activateTracker so you can activate preferable web analytics:

    methods: {
      setTracker() {
        // i used matomo so my function looked something like that
        this.$matomo && this.$matomo.setConsentGiven();
        this.$matomo && this.$matomo.trackPageView();
      }
    }

The method fires only if user allowed metrics!

Example:

different title and custom class with activateTracker method

<template>
    <userTracker
      title="Some new title here"
      customClass="my-tracker"
      @activateTracker="setTracker"
    />
</template>