Contents x
      Installation and Integration
      • 1 Minute to read
      • Print
      • Dark
        Light
      Contents

      Installation and Integration

      • 1 Minute to read
      • Print
      • Dark
        Light
      Article summary

      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;

      Was this article helpful?
      What's Next