webtrekk-smart-pixel-react v1.0.2

Webtrekk Smart Pixel React

Site | Docs | Support | Changelog |

Installation

Using npm:

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

Integration

import * as wtSmart from "webtrekk-smart-pixel-react";

Components

<WebtrekkInitData>

import { WebtrekkInitData } from "webtrekk-smart-pixel-react";

render()
{
    return (
        <div>
            <WebtrekkInitData
                trackId="111111111111111"
                trackDomain="analytics01.wt-eu02.net"
                domain="sub.domain.tld"
                cookie="1"
            />
        </div>
    );
}

<WebtrekkAdvancedData>

import { WebtrekkAdvancedData } from "webtrekk-smart-pixel-react";

render()
{
    return (
        <div>
            <WebtrekkAdvancedData
                secureCookie={ false }
                optOutName="webtrekkOptOut"
                requestObfuscation={ false }
                forceOldEverId={ false }
                execCDB={ true }
                useCDBCache={ false }
                requestQueue={ {
                    activated: false,
                    ttl: 5 * 60 * 1000,
                    resendInterval: 5 * 1000,
                    size: 100
                } }
            />
        </div>
    );
}

<WebtrekkPageData>

import { WebtrekkPageData } from "webtrekk-smart-pixel-react";

render()
{
    return (
        <div>
            <WebtrekkPageData
                name="name of the page"
                search="search term"
                numberSearchResults={ 7 }
                errorMessages="error: ..."
                paywall={ false }
                articleTitle="article title"
                contentTags="content tags"
                title="page title"
                type="page type"
                length="medium"
                daysSincePublication={ 5 }
                testVariant="test variant"
                testExperiment="test experiment"
                parameter={ {5: "parameter value 5"} }
                category={ {8: "category value 8"} }
                goal={ {2: "goal value 2"} }
            />
        </div>
    );
}

<WebtrekkCampaignData>

import { WebtrekkCampaignData } from "webtrekk-smart-pixel-react";

render()
{
    return (
        <div>
            <WebtrekkCampaignData
                id="en.internal.newsletter.2017.05"
                mediaCode={ ["mc", "wt_mc"] }
                oncePerSession={ false }
                parameter={ {1: "Newsletter 123"} }
            />
        </div>
    );
}

<WebtrekkCustomerData>

import { WebtrekkCustomerData } from "webtrekk-smart-pixel-react";

render()
{
    return (
        <div>
            <WebtrekkCustomerData
                id="user5684798169"
                email="john.doe@webtrekk.com"
                emailRID=""
                emailOptin={ true }
                gender={ 1 }
                birthday="19870913"
                firstName="John"
                lastName="Doe"
                telephone="0049132456789"
                country="Germany"
                city="Berlin"
                postalCode="10115"
                street="Robert-Koch-Platz"
                streetNumber="4"
                category={ {5: "login"} }
                validation={ true }
            />
        </div>
    );
}

<WebtrekkProductData>

import { WebtrekkProductData } from "webtrekk-smart-pixel-react";

render()
{
    return (
        <div>
            <WebtrekkProductData
                id="ABC-123"
                action="view"
                cost={ 99.90 }
                quantity={ 2 }
                soldOut={ false }
                variant="green"
                parameter={ {1: "L"} }
                category={ {1: "tops", 2: "noname"} }
            />
        </div>
    );
}

<WebtrekkProductData>

import { WebtrekkOrderData } from "webtrekk-smart-pixel-react";

render()
{
    return (
        <div>
            <WebtrekkOrderData
                value={ 120.99 }
                id="M-12345"
                couponValue={ 10.00 }
                paymentMethod="paypal"
                shippingService="dhl"
                shippingSpeed="express"
                shippingCosts={ 4.95 }
                grossMargin={ 12.95 }
                parameter={ {5: "bill"} }
            />
        </div>
    );
}

<WebtrekkSessionData>

import { WebtrekkSessionData } from "webtrekk-smart-pixel-react";

render()
{
    return (
        <div>
            <WebtrekkCampaignData
                loginStatus="login"
                parameter={ {5: "male"} }
            />
        </div>
    );
}

<WebtrekkAutoTracking>

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"
                activateActions={ true }
                activateTeaser={ true }
                activateProductList={ true }
                activateContentEngagement={ true }
            />
        </div>
    );
}

<WebtrekkContentEngagement>

The Content Engagement Plugin is used to measure the reading behavior of your website visitors. The analysis data of the scrolling behavior are essential performance indicators - especially for content pages: It is, therefore, crucial for publishers to know how readers deal with a published article. The Content Engagement Plugin measures the percentage of an article read by the end consumer.

import { WebtrekkContentEngagement } from "webtrekk-smart-pixel-react";

render()
{
    return (
        <div>
            <WebtrekkContentEngagement
                selector="#my-content"
                name="My Content"
                percentageStepsInAnalytics={ 5 }
                sendContentEngagement={ 1 }
                percentageReached={ 25 }
                secondsReached={ 30 }
                largeBrowserResolution={ 1080 }
                largeBrowserSeconds={ 5 }
                mediumBrowserResolution={ 700 }
                mediumBrowserSeconds={ 5 }
                smallBrowserResolution={ 400 }
                smallBrowserSeconds={ 5 }
            >
                <div id="my-content">
                    <p>My Content</p>
                </div>
            </WebtrekkContentEngagement>
        </div>
    );
}

<WebtrekkProductList>

With the product list tracking extension you can analyze which products your visitors view and click in the catalog and on the product overview page.

import { WebtrekkProductList } from "webtrekk-smart-pixel-react";

render()
{
    return (
        <div>
            { products.data.map(function(product, i) {
                return (
                    <WebtrekkProductList
                        selector={ `#${product.id}` }
                        id={ product.id }
                        position={ i + 1 }
                        cost={ product.cost }
                        quantity={ 1 }
                        variant={ product.variant }
                        soldOut={ product.isSoldOut }
                        parameter={ {
                            1: product.name,
                            2: product.material,
                            4: product.color
                        } }
                        category={ {
                            1: product.description
                        } }
                    >
                        <Link to={ "/product/" + product.id } id={ product.id }>
                            <ProductImage product={ product } products={ products } />
                        </Link>
                    </WebtrekkProductList>
                );
            }) }
        </div>
    );
}

<WebtrekkTeaser>

Webtrekk enables you with the use of the teaser tracking extension a comprehensive analysis of your onsite teasers. By integrating the extension, teaser views and clicks are automatically captured on your website. By specifying further parameters, it is possible to describe these in detail and evaluate them in combination with your web analytics data.

To evaluate the impact of a single teaser, in addition to views and clicks, engagement and conversion are calculated. The engagement measurement for a specific teaser is initiated as soon as it is clicked. For each page view that follows a teaser click, its engagement value is increased by 1. This happens until a website goal is reached or the user stops visiting the website.

import { WebtrekkTeaser } from "webtrekk-smart-pixel-react";

render()
{
    return (
        <div>
            <WebtrekkTeaser
                selector="#my-products"
                name="My products"
                rank="header"
                content="My products overview"
                variant="products"
                type="click"
                goal="order"
                value="10%"
            >
                <div id="my-products" className="content">
                    <Link to="/products">
                        My products
                    </Link>
                </div>
            </WebtrekkTeaser>
        </div>
    );
}

WebtrekkSmartPixelReact

call

import { WebtrekkSmartPixelReact } from "webtrekk-smart-pixel-react";

WebtrekkSmartPixelReact.call((wtSmart) => {
    // do any tracking stuff here
});

init

import { WebtrekkSmartPixelReact } from "webtrekk-smart-pixel-react";

WebtrekkSmartPixelReact.init({
     trackId: "111111111111111",
     trackDomain: "analytics01.wt-eu02.net",
     domain: "sub.domain.tld",
     cookie: "1"
});

advanced

import { WebtrekkSmartPixelReact } from "webtrekk-smart-pixel-react";

WebtrekkSmartPixelReact.advanced({
     secureCookie: false,
     optOutName: "webtrekkOptOut",
     requestObfuscation: false,
     forceOldEverId: false,
     execCDB: true,
     useCDBCache: false,
     requestQueue: {
     	activated: false,
     	ttl: 5 * 60 * 1000,
     	resendInterval: 5 * 1000,
     	size: 100
     }
});

page

import { WebtrekkSmartPixelReact } from "webtrekk-smart-pixel-react";

WebtrekkSmartPixelReact.page("name of the page", {
     search: "search term",
     numberSearchResults: 7,
     errorMessages: "error: ...",
     paywall: false,
     articleTitle: "article title",
     contentTags: "content tags",
     title: "page title",
     type: "page type",
     length: "medium",
     daysSincePublication: 5,
     testVariant: "test variant",
     testExperiment: "test experiment",
     parameter: {5: "parameter value 5"},
     category: {8: "category value 8"},
     goal: {2: "goal value 2"}
});

action

import { WebtrekkSmartPixelReact } from "webtrekk-smart-pixel-react";

WebtrekkSmartPixelReact.action({
     name: "en.click.on.some.link",
     parameter: {1: "en"},
     goal: {2: "goal value 2"}
});

campaign

import { WebtrekkSmartPixelReact } from "webtrekk-smart-pixel-react";

WebtrekkSmartPixelReact.campaign({
     id: "en.internal.newsletter.2017.05",
     mediaCode: ["mc", "wt_mc"],
     oncePerSession: false,
     parameter: {1: "Newsletter 123"}
});

customer

import { WebtrekkSmartPixelReact } from "webtrekk-smart-pixel-react";

WebtrekkSmartPixelReact.customer("user5684798169", {
     email: "john.doe@webtrekk.com",
     emailRID: "",
     emailOptin: true,
     gender: 1,
     birthday: "19870913",
     firstName: "John",
     lastName: "Doe",
     telephone: "0049132456789",
     country: "Germany",
     city: "Berlin",
     postalCode: "10115",
     street: "Robert-Koch-Platz",
     streetNumber: "4",
     category: {5: "login"}
}, false);

product

import { WebtrekkSmartPixelReact } from "webtrekk-smart-pixel-react";

WebtrekkSmartPixelReact.product("view", {
     id: "ABC-123",
     cost: 99.90,
     quantity: 2,
     soldOut: false,
     variant: "green",
     parameter: {1: "L"},
     category: {1: "tops", 2: "noname"}
});

products

import { WebtrekkSmartPixelReact } from "webtrekk-smart-pixel-react";

WebtrekkSmartPixelReact.products("view", [{
     id: "ABC-123",
     cost: 99.90,
     quantity: 2,
     soldOut: false,
     variant: "green",
     parameter: {1: "L"},
     category: {1: "tops", 2: "noname"}
}]);

order

import { WebtrekkSmartPixelReact } from "webtrekk-smart-pixel-react";

WebtrekkSmartPixelReact.order({
     value: 120.99,
     id: "M-12345",
     couponValue: 10.00,
     paymentMethod: "paypal",
     shippingService: "dhl",
     shippingSpeed: "express",
     shippingCosts: 4.95,
     grossMargin: 12.95,
     parameter: {5: "bill"}
});

session

import { WebtrekkSmartPixelReact } from "webtrekk-smart-pixel-react";

WebtrekkSmartPixelReact.session({
     loginStatus: "login",
     parameter: {5: "male"}
});

track

import { WebtrekkSmartPixelReact } from "webtrekk-smart-pixel-react";

WebtrekkSmartPixelReact.track(false);

trackPage

import { WebtrekkSmartPixelReact } from "webtrekk-smart-pixel-react";

WebtrekkSmartPixelReact.trackPage(false);

trackAction

import { WebtrekkSmartPixelReact } from "webtrekk-smart-pixel-react";

WebtrekkSmartPixelReact.trackAction(false);

webtrekkReducer

custom actions

import React, { useReducer } from "react";
import { WebtrekkSmartPixelReact, webtrekkReducer } from "webtrekk-smart-pixel-react";

const webtrekkCustomReducer = webtrekkReducer({
    "increment": (state, action, reducerValue) => {
        WebtrekkSmartPixelReact.action({
            name: action.type,
            parameter: {1: reducerValue.count + ""}
        });
        WebtrekkSmartPixelReact.trackAction();
    },
    "decrement": (state, action, reducerValue) => {
        WebtrekkSmartPixelReact.action({
            name: action.type,
            parameter: {1: reducerValue.count + ""}
        });
        WebtrekkSmartPixelReact.trackAction();
    }
});

const initialState = {count: 0};
const reducer = (state, action) => {
    switch (action.type) {
        case "increment": return {count: state.count + 1};
        case "decrement": return {count: state.count - 1};
        default: throw new Error();
    }
};
const Counter = () => {
    const [state, dispatch] = useReducer(webtrekkCustomReducer(reducer), initialState);

    return (
        <div>
            Count: { state.count }
            <button onClick={() => dispatch({type: "increment"})}>+</button>
            <button onClick={() => dispatch({type: "decrement"})}>-</button>
        </div>
    );
};

class CounterButton extends React.Component {
    render() {
        return (
            <Counter />
        );
    }
}

export default CounterButton;

dispatch with tracking data

import React, { useReducer } from "react";
import { webtrekkReducer } from "webtrekk-smart-pixel-react";

const webtrekkCustomReducer = webtrekkReducer();

const initialState = {count: 0};
const reducer = (state, action) => {
    switch (action.type) {
        case "increment": return {count: state.count + 1};
        case "decrement": return {count: state.count - 1};
        default: throw new Error();
    }
};
const Counter = () => {
    const [state, dispatch] = useReducer(webtrekkCustomReducer(reducer), initialState);

    return (
        <div>
            Count: { state.count }
            <button onClick={() => dispatch({
                type: "increment",
                webtrekk: {
                    type: "webtrekk/action",
                    sendInstantly: true,
                    data: {
                        name: "increment",
                        parameter: {1: state.count + ""}
                    }
                }
            })}>+</button>
            <button onClick={() => dispatch({
                type: "decrement",
                webtrekk: {
                    type: "webtrekk/action",
                    sendInstantly: true,
                    data: {
                        name: "decrement",
                        parameter: {1: state.count + ""}
                    }
                }
            })}>-</button>
        </div>
    );
};

class CounterButton extends React.Component {
    render() {
        return (
            <Counter />
        );
    }
}

export default CounterButton;

webtrekkMiddleware

custom actions

import { createStore, applyMiddleware, compose } from "redux";
import { WebtrekkSmartPixelReact, webtrekkMiddleware } from "webtrekk-smart-pixel-react";

const enhancers = [];
const middleware = [webtrekkMiddleware({
    "increment": (state, action) => {
        WebtrekkSmartPixelReact.action({
            name: action.type,
            parameter: {1: state.count + ""}
        });
        WebtrekkSmartPixelReact.trackAction();
    },
    "decrement": (state, action) => {
        WebtrekkSmartPixelReact.action({
            name: action.type,
            parameter: {1: state.count + ""}
        });
        WebtrekkSmartPixelReact.trackAction();
    }
})];
const reducer = (state, action) => {
    switch (action.type) {
        case "increment": state.count + 1; return state;
        case "decrement": state.count - 1; return state;
        default: return state;
    }
};

const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers);

const store = createStore(reducer, composedEnhancers);

store.dispatch({type: "increment"});

dispatch with tracking data

import { createStore, applyMiddleware, compose } from "redux";
import { WebtrekkSmartPixelReact, webtrekkMiddleware } from "webtrekk-smart-pixel-react";

const enhancers = [];
const middleware = [webtrekkMiddleware()];
const reducer = (state, action) => {
    switch (action.type) {
        case "increment": state.count + 1; return state;
        case "decrement": state.count - 1; return state;
        default: return state;
    }
};

const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers);

const store = createStore(reducer, composedEnhancers);

store.dispatch({
    type: "increment",
    webtrekk: {
        type: "webtrekk/action",
        sendInstantly: true,
        data: {
            name: "increment",
            parameter: {1: store.getState().count + ""}
        }
    }
});