---
title: "Installation and Integration"
slug: "react-next-installation-and-integration"
updated: 2024-04-01T06:35:03Z
published: 2024-04-01T06:35:03Z
canonical: "docs.mapp.com/react-next-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/react
```

```bash
$ npm install --save @webtrekk-smart-pixel/next
```

## WebtrekkAutoTracking

If you want to use **automatic page tracking**, add `WebtrekkAutoTracking` to your root App 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` | 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 | Defaults to `true`. Activates the automatic page tracking. | `Boolean` | - | `true` |
| activateActions | Activates the automatic event tracking. | `Boolean` | - | `false` |
| activateTeaser | Activates the teaser tracking extension. | `Boolean` | - | `false` |
| activateProductList | Activates the product list extension. | `Boolean` | - | `false` |
| activateContentEngagement | Activates the content engagement extension. | `Boolean` | - | `false` |

```javascript
import { WebtrekkAutoTracking } from "@webtrekk-smart-pixel/react";

render()
{
    return (
        <div>
            <Switch>
                <Route exact path="/" component={ Home } />
                <Route path="*" component={ NotFound } />
            </Switch>

            <WebtrekkAutoTracking
                trackId="111111111111111"
                trackDomain="analytics01.wt-eu02.net"
                activateAutoTracking={ true }
                activateActions={ true }
                activateTeaser={ true }
                activateProductList={ true }
                activateContentEngagement={ true }
            />
        </div>
    );
}
```

```javascript
import React from "react";
import App from "next/app";
import Router from "next/router";
import { WebtrekkAutoTracking } from "@webtrekk-smart-pixel/next";
 
class MyApp extends App {
    render() {
        const {Component, pageProps} = this.props;
 
        return (
            <div>
                <Component { ...pageProps } />
                <WebtrekkAutoTracking
                    trackId="111111111111111"
                    trackDomain="analytics01.wt-eu02.net"
                    router={Router}
                    activateAutoTracking={ true }
                    activateActions={ true }
                    activateTeaser={ true }
                    activateProductList={ true }
                    activateContentEngagement={ true }
                />
            </div>
        );
    }
}
 
export default MyApp;
```