Installation and Integration

Using npm:

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

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

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

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;