---
title: "Installation and Integration"
slug: "installation-and-integration"
updated: 2024-05-23T11:18:54Z
published: 2024-05-23T11:18:54Z
canonical: "docs.mapp.com/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
# for Angular v6 - v11
$ npm install --save @webtrekk-smart-pixel/angular@1

# for Angular v12+
$ npm install --save @webtrekk-smart-pixel/angular@2
```

## WebtrekkSmartPixelModule

If you want to use **directives or automatic page tracking**, add `WebtrekkSmartPixelModule` to your root NgModule and configure the options.

| 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` | X | - |
| 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` | X | - |
| activateAutoTracking | Activates the automatic page tracking. | `Boolean` | - | `true` |
| activateActions | Activates the automatic event tracking. | `Boolean` | - | `false` |
| activateTeaser | Activates the [teaser tracking](/v1/docs/teaser-tracking) extension. | `Boolean` | - | `false` |
| activateProductList | Activates the [product list](/v1/docs/product-list-tracking) extension. | `Boolean` | - | `false` |
| activateContentEngagement | Activates the [content engagement](/v1/docs/content-engagement) extension. | `Boolean` | - | `false` |

```javascript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { WebtrekkSmartPixelModule } from '@webtrekk-smart-pixel/angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        WebtrekkSmartPixelModule.forRoot({
            trackId: '111111111111111',
            trackDomain: 'analytics01.wt-eu02.net',
            activateAutoTracking: true,
            activateActions: false,
            activateTeaser: false,
            activateProductList: false,
            activateContentEngagement: false
        })
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
```