---
title: "Installation and Integration"
slug: "vue-installation-and-integration"
updated: 2024-03-21T11:18:11Z
published: 2024-03-21T11:18:11Z
canonical: "docs.mapp.com/vue-installation-and-integration"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mapp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation and Integration

Using npm:

```bash
$ 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:

| 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](/v1/docs/integrated-teaser-tracking)). | `Boolean` or `Object` | - | `false` |
| activateProductList | Activates the product list extension. If `true`, default global configuration is used (see [configuration object](/v1/docs/integrated-product-list-tracking)). | `Boolean` or `Object` | - | `false` |
| activateContentEngagement | Activates the content engagement extension. If `true`, default global configuration is used (see [configuration object](/v1/docs/integrated-content-engagement)). | `Boolean` or `Object` | - | `false` |

In the options object, `webtrekkConfig` in the example, you can use every key of [init](/v1/docs/vue-init) and [advanced](/v1/docs/vue-advanced) to initialize the tracking.

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