Installation and Integration

Using npm:

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

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:

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");