Installation and Integration

Using npm:

$ npm install --save @webtrekk-smart-pixel/vue

BASH

Implementation

This is how Mapp Intelligence can be implemented in a main.js project file. You import the plugin. When executing Vue.use() with it, you need to add your global configuration, webtrekkConfig in this example:

Value	Description	Data type	Required	Default value
trackId	Enter your Track ID here. It is under Mapp Q3 >Configuration > System Configuration > Data Collection. If the request should be sent to several accounts, you can add multiple Track IDs separated by a comma.	`String`	Yes
trackDomain	Enter the domain to which the data should be sent. If you are using a Mapp Intelligence track domain, you will find it in the setup information sent to you via email.	`String`	Yes
activateAutoTracking	Activates the automatic page tracking.	`Boolean`	-	`true`
activateActions	Activates the automatic event tracking.	`Boolean`	-	`false`
activateTeaser	Activates the teaser tracking extension. If `true`, default global configuration is used (see configuration object).	`Boolean` or `Object`	-	`false`
activateProductList	Activates the product list extension. If `true`, default global configuration is used (see configuration object).	`Boolean` or `Object`	-	`false`
activateContentEngagement	Activates the content engagement extension. If `true`, default global configuration is used (see configuration object).	`Boolean` or `Object`	-	`false`

In the options object, webtrekkConfig in the example, you can use every key of init and advanced to initialize the tracking.

import Vue from "vue";
import VueRouter from "vue-router";
import WebtrekkSmartpixelVue from "@webtrekk-smart-pixel/vue";
import App from "./App.vue";
import Home from "./views/Home.vue";
 
Vue.use(VueRouter);
const routerInstance = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/about",
      name: "about",
      component: () => import("./views/About.vue")
    }
  ]
});
 
const webtrekkConfig = {
  trackId: "111111111111111",
  trackDomain: "analytics01.wt-eu02.net",
  activateLinkTracking: true,
  activateAutoTracking: true,
  activateTeaserTracking: {
    viewPercent: 80,
    viewTime: 500,
    attribution: "last",
    maxSendTeasers: {
      session: 9999,
      page: 999
    },
    clearConversions: false,
    autoEngagements: false
  },
  activateProductListTracking: {
    viewPercent: 99,
    viewTime: 999,
    sampling: 1,
    maxSendProducts: {
      session: 9999,
      page: 999
    },
    sendMultipleProductViews: true
  },
  activateContentEngagement: {
    percentageStepsInAnalytics: 10,
    sendContentEngagement: 1,
    percentageReached: 50,
    secondsReached: 40,
    largeBrowserResolution: 999,
    largeBrowserSeconds: 22,
    mediumBrowserResolution: 777,
    mediumBrowserSeconds: 11,
    smallBrowserResolution: 444,
    smallBrowserSeconds: 4
  }
};
 
Vue.use(WebtrekkSmartpixelVue, webtrekkConfig);
 
new Vue({
  router: routerInstance,
  render: h => h(App)
}).$mount("#app");

JS

Implementation

Cookie Notice