webtrekk-smart-pixel-react

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

Value	Notes
trackId	String. Required. Enter your Webtrekk customer ID, which is provided by Webtrekk.
trackDomain	String. Required. Enter your Webtrekk tracking URL.
domain	String. Optional. Defaults to location.host. Specify your domain, this domain is then not identified as a referrer.
cookie	String. Optional. Defaults to 1. 1 The tracking pixel generates an ever ID. The ever ID is stored or read from the customer domain. It is then added to each tracking request. 3 The tracking pixel is not able to read the ever ID. Therefore, the tracking request is submitted without any ever ID.

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

Value	Notes
secureCookie	Boolean. Optional. Defaults to false. true The "secure" flag is added to all client-side Webtrekk cookies.
optOutName	String. Optional. Defaults to webtrekkOptOut. Define an alternative name for the Webtrekk opt-out cookie.
requestObfuscation	Boolean. Optional. Defaults to false. true This option hides all track requests to make it harder for adblockers to identify and block Webtrekk track requests.
forceOldEverId	Boolean. Optional. Defaults to false. true The ever IDs from previous pixel versions will be taken over.
execCDB	Boolean. Optional. Defaults to true. Activate/ deactivate the Cross Device Bridge.
useCDBCache	Boolean. Optional. Defaults to false. Activate/ deactivate the image cache for the Cross Device Bridge.
requestQueue.activated	Boolean. Optional. Defaults to false. The offline tracking queue functionality is activated.
requestQueue.ttl	Number. Optional. Defaults to 5 * 60 * 1000. Specify the maximum time a request can remain in the queue until it is deleted.
requestQueue.resendInterval	Number. Optional. Defaults to 5 * 1000. Define the interval in milliseconds when the first request in the queue.
requestQueue.size	Number. Optional. Defaults to 100. Maximum queue size for requests.

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

Value	Notes
name	String. Optional. Defaults to url based page name. Unique identifier of your page.
search	String. Optional. Analyze keywords used by visitors to your site by including them in tracking.
numberSearchResults	Number. Optional. Defaults to 0. Number of search results.
errorMessages	String. Optional. Error messages.
paywall	Boolean. Optional. Defaults to false. Paywall calls.
articleTitle	String. Optional. Title of the article.
contentTags	String. Optional. Tags contained in the article.
title	String. Optional. Title of the page.
type	String. Optional. Page type.
length	String. Optional. Length of the page.
daysSincePublication	Number. Optional. Defaults to 0. Days since the publication of the article.
testVariant	String. Optional. Name of the test variant.
testExperiment	String. Optional. Name of the test.
parameter	Object. Optional. You can use page parameters to enrich your analytical data with your website-specific information and/ or metrics.
category	Object. Optional. Categories are content groups that are used to group pages so that website areas can be formed to enable aggregated evaluations.
goal	Object. Optional. When using website goals, all key targets for analysis and filtering are quickly available.

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

Value	Notes
id	String. Required. Set your campaign ID in the pixel.
mediaCode	Array<String>. Optional. Defaults to ["mc", "wt_mc"]. If you use media codes as a data source for your campaign tracking, entering the name of the media code parameter can increase tracking accuracy.
oncePerSession	Boolean. Optional. Defaults to false. true If you want to track each campaign only once within a particular session, you can force this with this parameter. The Smart Pixel then overwrites the campaign with "ignore" from the second-page view.
parameter	Object. Optional. Campaign parameters can be entered either directly in the page configuration or the campaign configuration with a target URL along with the media code.

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

Value	Notes
id	String. Required. Use this parameter to transfer a unique identifier for the user.
email	String. Optional. Use this parameter to transfer the email address of the user.
emailRID	String. Optional. Use this parameter to transfer the email receiver ID of the user.
emailOptIn	Boolean. Optional. Defaults to false. Use this parameter to transfer the opt-in email status of the user.
firstName	String. Optional. Use this parameter to transfer the first name of the user.
lastName	String. Optional. Use this parameter to transfer the last name of the user.
telephone	String. Optional. Use this parameter to transfer the phone number of the user.
gender	Number. Optional. Defaults to 0. Use this parameter to transfer the gender of the user. 1 male. 2 female.
birthday	String. Optional. Use this parameter to transfer the user's birthday (YYYYMMDD).
country	String. Optional. Use this parameter to transfer the country of the user.
city	String. Optional. Use this parameter to transfer the city of the user.
street	String. Optional. Use this parameter to transfer the street of the user.
streetNumber	String. Optional. Use this parameter to transfer the house number of the user.
category	Object. Optional. To create meaningful visitor segments, you can use this parameter to categorize customers.
validation	Boolean. Optional. Defaults to false. true Should overwrite existing customer information.

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

Value	Notes
id	String. Required. Saves the products stored in the shopping cart. This property must be entered if products are to be measured.
action	String. Required. The products can be transmitted to Webtrekk when: list a product is viewed in a catalog, view a product is viewed, basket a product is placed in the shopping cart and confirmation when the cart is purchased.
cost	Number. Optional. Defaults to 0. Contains the product price ("0" prices are allowed). If you transfer a product more than once (quantity property greater than 1), use the total price instead of the unit price.
quantity	Number. Optional. Defaults to 0. Contains product quantity.
variant	String. Optional. Use this parameter to transfer the variant of the product.
soldOut	Boolean. Optional. Defaults to false. Use this parameter to indicate that the product is sold out or in stock. true sold out. false in stock.
parameter	Object. Optional. Using parameters, you can enrich analytical data with your website-specific information and/ or metrics.
category	Object. Optional. Product categories contain static information about the products. They allow you to group the products by assigning them uniquely to a product and product category.

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

Value	Notes
value	String. Required. The property "value" stores the total order value. This property must be entered if you want to tracke the total order values.
id	String. Optional. This optional property contains a unique order number (order ID). Using this setting ensures that no orders are counted twice.
couponValue	Number. Optional. Defaults to 0. Contains the value of a coupon. Use this parameter if the customer orders with a coupon.
paymentMethod	String. Optional. Use this parameter to transfer the payment method of the order.
shippingService	String. Optional. Use this parameter to transfer the shipping service of the order.
shippingSpeed	String. Optional. Use this parameter to transfer the delivery time of the order.
shippingCosts	Number. Optional. Defaults to 0. Use this parameter to transfer the delivery costs of the order.
grossMargin	Number. Optional. Defaults to 0. Use this parameter to transfer the margin/ mark-up of the order.
orderStatus	String. Optional. Use this parameter to transfer the order status.
parameter	Object. Optional. Using parameters, you can enrich analytical data with your own web site-specific information and/or metrics.

<WebtrekkSessionData>

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

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

Value	Notes
loginStatus	String. Optional. Pass the current users login status here.
parameter	Object. Optional. Session parameters always refer to one complete session (visit). If the value for the parameter is transmitted during a visit several times, only the first or last value is evaluated, based on the configuration of Webtrekk.

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

Value	Notes
trackId	String. Required. Enter your Webtrekk customer ID, which is provided by Webtrekk.
trackDomain	String. Required. Enter your Webtrekk tracking URL.
activateActions	Boolean. Optional. Defaults to false. Activates the automatic action tracking.
activateTeaser	Boolean. Optional. Defaults to false. Activates the teaser tracking extension.
activateProductList	Boolean. Optional. Defaults to false. Activates the product list extension.
activateContentEngagement	Boolean. Optional. Defaults to false. Activates the content engagement extension.

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

Value	Notes
selector	String. Optional. Defaults to children. Enter the element to be measured. You can pass the CSS selector of the element.
name	String. Optional. Defaults to current page name. Specify the name of the element to be measured. Alternatively, the plugin uses the name of the current page.
percentageStepsInAnalytics	Number. Optional. Defaults to 5. Define the percentage intervals that are to be reported in Analytics (e.g., five means that the count is incremented in five steps).
sendContentEngagement	Number. Optional. Defaults to 0. Specify the event that triggers the request to Analytics. 0 The user clicks a link, reloads the page or is inactive until the end of the session. 1 The user exceeds a certain percentage (e.g., all 25% of the element). 2 After a certain number of seconds (e.g., every 30 seconds).
percentageReached	Number. Optional. Defaults to 25. If you specify "percentage reached" as the event trigger, enter the desired percentage here (e.g., at 25%, the event is triggered after every 25%).
secondsReached	Number. Optional. Defaults to 30. If you specify "seconds reached" as the event trigger, define the desired interval of seconds here (e.g., at 30 the event is triggered every 30 seconds).
largeBrowserResolution	Number. Optional. Defaults to 1080. Specify the browser resolution for large browsers in pixels (greater than or equal to the specified number of pixels).
largeBrowserSeconds	Number. Optional. Defaults to 20. Specify the seconds to mark a section of the element as read on small browser resolutions.
mediumBrowserResolution	Number. Optional. Defaults to 700. Specify the browser resolution for medium-sized browsers in pixels (greater than or equal to the specified number of pixels).
mediumBrowserSeconds	Number. Optional. Defaults to 10. Specify the seconds to mark a section of the element as read on medium browser resolutions.
smallBrowserResolution	Number. Optional. Defaults to 400. Specify the browser resolution for small browsers in pixels (greater than or equal to the specified number of pixels).
smallBrowserSeconds	Number. Optional. Defaults to 5. Specify the seconds to mark a section of the element as read on small browser resolutions.

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

Value	Notes
id	String. Required. Specify the product identifier.
position	Number. Required. Specify the product position within the list.
selector	String. Optional. Defaults to children. Enter the element to be measured. You can pass the CSS selector of the element.
cost	Number. Optional. Contains the product price.
quantity	Number. Optional. Contains the product quantity.
variant	String. Optional. Contains the product variants.
soldOut	Boolean. Optional. Use this parameter to indicate that the product. true sold out. false in stock
category	Object. Optional. Contains the product category.
parameter	Object. Optional. You can use parameters to enrich analytical data with your website-specific information and/ or metrics.

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

Value	Notes
name	String. Required. Specify the teaser name.
selector	String. Optional. Defaults to children. Enter the element to be measured. You can pass the CSS selector of the element.
rank	String. Optional. Specify the teaser rank.
content	String. Optional. Specify the teaser content.
variant	String. Optional. Specify the teaser variant.
seen	Boolean. Optional. Defaults to false. true Teasers whose visibility is controlled via a zIndex, a rotation of different teaser elements or using some other dynamic method, must also be flagged if they are to be displayed. View tracking will be deactivated for this teaser. Click-, engagement- and conversion-tracking will still be activated.
type	String. Optional. Defaults to product. Specify the teaser conversion type. view The teaser should be connected to the conversion when the user has seen the teaser. click The teaser should be connected to conversion when the user has clicked on the teaser. product The teaser should be connected to conversion if the user has clicked on the teaser and the product is purchased with the same name as the teaser name.
goal	String. Optional. Defaults to both. Specify the teaser conversion goal. order The teaser should only be connected to the conversion. goal The teaser should only be connected to the website goal. both The teaser should be connected to conversion or website goal.
value	String. Optional. Defaults to conversion value is the same as the product cost. Specify the teaser conversion value. percentage of order value Percentage of order value (i.e., 5%). fixed value Fixed value (i.e., 15).

WebtrekkSmartPixelReact

call

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

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

Value	Notes
callback	function(wtSmart: wtSmart). Required. Callback method to interact with the origin Webtrekk Smart Pixel. For all functionalities see Docs

init

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

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

Value	Notes
trackId	String. Required. Enter your Webtrekk customer ID, which is provided by Webtrekk.
trackDomain	String. Required. Enter your Webtrekk tracking URL.
domain	String. Optional. Defaults to location.host. Specify your domain, this domain is then not identified as a referrer.
cookie	String. Optional. Defaults to 1. 1 The tracking pixel generates an ever ID. The ever ID is stored or read from the customer domain. It is then added to each tracking request. 3 The tracking pixel is not able to read the ever ID. Therefore, the tracking request is submitted without any ever ID.

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

Value	Notes
secureCookie	Boolean. Optional. Defaults to false. true The "secure" flag is added to all client-side Webtrekk cookies.
optOutName	String. Optional. Defaults to webtrekkOptOut. Define an alternative name for the Webtrekk opt-out cookie.
requestObfuscation	Boolean. Optional. Defaults to false. true This option hides all track requests to make it harder for adblockers to identify and block Webtrekk track requests.
forceOldEverId	Boolean. Optional. Defaults to false. true The ever IDs from previous pixel versions will be taken over.
execCDB	Boolean. Optional. Defaults to true. Activate/ deactivate the Cross Device Bridge.
useCDBCache	Boolean. Optional. Defaults to false. Activate/ deactivate the image cache for the Cross Device Bridge.
requestQueue.activated	Boolean. Optional. Defaults to false. The offline tracking queue functionality is activated.
requestQueue.ttl	Number. Optional. Defaults to 5 * 60 * 1000. Specify the maximum time a request can remain in the queue until it is deleted.
requestQueue.resendInterval	Number. Optional. Defaults to 5 * 1000. Define the interval in milliseconds when the first request in the queue.
requestQueue.size	Number. Optional. Defaults to 100. Maximum queue size for requests.

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

Value	Notes
name	String. Optional. Defaults to url based page name. Unique identifier of your page.
search	String. Optional. Analyze keywords used by visitors to your site by including them in tracking.
numberSearchResults	Number. Optional. Defaults to 0. Number of search results.
errorMessages	String. Optional. Error messages.
paywall	Boolean. Optional. Defaults to false. Paywall calls.
articleTitle	String. Optional. Title of the article.
contentTags	String. Optional. Tags contained in the article.
title	String. Optional. Title of the page.
type	String. Optional. Page type.
length	String. Optional. Length of the page.
daysSincePublication	Number. Optional. Defaults to 0. Days since the publication of the article.
testVariant	String. Optional. Name of the test variant.
testExperiment	String. Optional. Name of the test.
parameter	Object. Optional. You can use page parameters to enrich your analytical data with your website-specific information and/ or metrics.
category	Object. Optional. Categories are content groups that are used to group pages so that website areas can be formed to enable aggregated evaluations.
goal	Object. Optional. When using website goals, all key targets for analysis and filtering are quickly available.

action

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

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

Value	Notes
name	String. Required. Unique identifier of your action.
parameter	Object. Optional. You can use action parameters to enrich your analytical data with your website-specific information and/ or metrics.
goal	Object. Optional. When using website goals, all key targets for analysis and filtering are quickly available.

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

Value	Notes
id	String. Required. Set your campaign ID in the pixel.
mediaCode	Array<String>. Optional. Defaults to ["mc", "wt_mc"]. If you use media codes as a data source for your campaign tracking, entering the name of the media code parameter can increase tracking accuracy.
oncePerSession	Boolean. Optional. Defaults to false. true If you want to track each campaign only once within a particular session, you can force this with this parameter. The Smart Pixel then overwrites the campaign with "ignore" from the second-page view.
parameter	Object. Optional. Campaign parameters can be entered either directly in the page configuration or the campaign configuration with a target URL along with the media code.

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

Value	Notes
id	String. Required. Use this parameter to transfer a unique identifier for the user.
email	String. Optional. Use this parameter to transfer the email address of the user.
emailRID	String. Optional. Use this parameter to transfer the email receiver ID of the user.
emailOptIn	Boolean. Optional. Defaults to false. Use this parameter to transfer the opt-in email status of the user.
firstName	String. Optional. Use this parameter to transfer the first name of the user.
lastName	String. Optional. Use this parameter to transfer the last name of the user.
telephone	String. Optional. Use this parameter to transfer the phone number of the user.
gender	Number. Optional. Defaults to 0. Use this parameter to transfer the gender of the user. 1 male. 2 female.
birthday	String. Optional. Use this parameter to transfer the user's birthday (YYYYMMDD).
country	String. Optional. Use this parameter to transfer the country of the user.
city	String. Optional. Use this parameter to transfer the city of the user.
street	String. Optional. Use this parameter to transfer the street of the user.
streetNumber	String. Optional. Use this parameter to transfer the house number of the user.
category	Object. Optional. To create meaningful visitor segments, you can use this parameter to categorize customers.
validation	Boolean. Optional. Defaults to false. true Should overwrite existing customer information.

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

Value	Notes
action	String. Required. The products can be transmitted to Webtrekk when: list a product is viewed in a catalog, view a product is viewed, basket a product is placed in the shopping cart and confirmation when the cart is purchased.
id	String. Required. Saves the products stored in the shopping cart. This property must be entered if products are to be measured.
cost	Number. Optional. Defaults to 0. Contains the product price ("0" prices are allowed). If you transfer a product more than once (quantity property greater than 1), use the total price instead of the unit price.
quantity	Number. Optional. Defaults to 0. Contains product quantity.
variant	String. Optional. Use this parameter to transfer the variant of the product.
soldOut	Boolean. Optional. Defaults to false. Use this parameter to indicate that the product is sold out or in stock. true sold out. false in stock.
parameter	Object. Optional. Using parameters, you can enrich analytical data with your website-specific information and/ or metrics.
category	Object. Optional. Product categories contain static information about the products. They allow you to group the products by assigning them uniquely to a product and product category.

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

Value	Notes
action	String. Required. The products can be transmitted to Webtrekk when: list a product is viewed in a catalog, view a product is viewed, basket a product is placed in the shopping cart and confirmation when the cart is purchased.
id	String. Required. Saves the products stored in the shopping cart. This property must be entered if products are to be measured.
cost	Number. Optional. Defaults to 0. Contains the product price ("0" prices are allowed). If you transfer a product more than once (quantity property greater than 1), use the total price instead of the unit price.
quantity	Number. Optional. Defaults to 0. Contains product quantity.
variant	String. Optional. Use this parameter to transfer the variant of the product.
soldOut	Boolean. Optional. Defaults to false. Use this parameter to indicate that the product is sold out or in stock. true sold out. false in stock.
parameter	Object. Optional. Using parameters, you can enrich analytical data with your website-specific information and/ or metrics.
category	Object. Optional. Product categories contain static information about the products. They allow you to group the products by assigning them uniquely to a product and product category.

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

Value	Notes
value	String. Required. The property "value" stores the total order value. This property must be entered if you want to tracke the total order values.
id	String. Optional. This optional property contains a unique order number (order ID). Using this setting ensures that no orders are counted twice.
couponValue	Number. Optional. Defaults to 0. Contains the value of a coupon. Use this parameter if the customer orders with a coupon.
paymentMethod	String. Optional. Use this parameter to transfer the payment method of the order.
shippingService	String. Optional. Use this parameter to transfer the shipping service of the order.
shippingSpeed	String. Optional. Use this parameter to transfer the delivery time of the order.
shippingCosts	Number. Optional. Defaults to 0. Use this parameter to transfer the delivery costs of the order.
grossMargin	Number. Optional. Defaults to 0. Use this parameter to transfer the margin/ mark-up of the order.
orderStatus	String. Optional. Use this parameter to transfer the order status.
parameter	Object. Optional. Using parameters, you can enrich analytical data with your own web site-specific information and/or metrics.

session

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

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

Value	Notes
loginStatus	String. Optional. Pass the current users login status here.
parameter	Object. Optional. Session parameters always refer to one complete session (visit). If the value for the parameter is transmitted during a visit several times, only the first or last value is evaluated, based on the configuration of Webtrekk.

track

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

WebtrekkSmartPixelReact.track(false);

Value	Notes
keepData	Boolean. Optional. Defaults to false. After sending the tracking data, the Webtrekk Smart Pixel automatically removes all defined data. If you want to keep the data, set true as the first argument, then you can delete the data manually.

trackPage

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

WebtrekkSmartPixelReact.trackPage(false);

Value	Notes
keepData	Boolean. Optional. Defaults to false. After sending the tracking data, the Webtrekk Smart Pixel automatically removes all defined data. If you want to keep the data, set true as the first argument, then you can delete the data manually.

trackAction

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

WebtrekkSmartPixelReact.trackAction(false);

Value	Notes
keepData	Boolean. Optional. Defaults to false. After sending the tracking data, the Webtrekk Smart Pixel automatically removes all defined data. If you want to keep the data, set true as the first argument, then you can delete the data manually.

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;

Value	Notes
actions	Object. Optional. Extends your own actions and execute custom tracking code after dispatch your action.
arguments0	Object. Your current state.
arguments1	Object. Your current action.
arguments2	Object. Value of your reducer function.

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;

Value	Notes
webtrekk.type	String. Required. Defines which type of tracking data you are add to the tracking pixel. You can use one of the following types: webtrekk/init, webtrekk/advanced, webtrekk/page, webtrekk/action, webtrekk/session, webtrekk/campaign, webtrekk/customer, webtrekk/product, webtrekk/products, webtrekk/order, webtrekk/extension, webtrekk/track, webtrekk/trackPage or webtrekk/trackAction.
webtrekk.data	Any. Required. Defines which data you are add to the tracking pixel.
	webtrekk/init. See init.
	webtrekk/advanced. See advanced.
	webtrekk/page. See page.
	webtrekk/action. See action.
	webtrekk/session. See session.
	webtrekk/campaign. See campaign.
	webtrekk/customer. See customer.
	webtrekk/product. See product.
	webtrekk/products. See products.
	webtrekk/order. See order.
	webtrekk/track. See track.
	webtrekk/trackPage. See trackPage.
	webtrekk/trackAction. See trackAction.
webtrekk.sendInstantly	Boolean. Optional. Defaults to false. true All added data are instantly tracked (you must not call track).

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

Value	Notes
actions	Object. Optional. Extends your own actions and execute custom tracking code after dispatch your action.
arguments0	Object. Your current state.
arguments1	Object. Your current action.

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

Value	Notes
webtrekk.type	String. Required. Defines which type of tracking data you are add to the tracking pixel. You can use one of the following types: webtrekk/init, webtrekk/advanced, webtrekk/page, webtrekk/action, webtrekk/session, webtrekk/campaign, webtrekk/customer, webtrekk/product, webtrekk/products, webtrekk/order, webtrekk/extension, webtrekk/track, webtrekk/trackPage or webtrekk/trackAction.
webtrekk.data	Any. Required. Defines which data you are add to the tracking pixel.
	webtrekk/init. See init.
	webtrekk/advanced. See advanced.
	webtrekk/page. See page.
	webtrekk/action. See action.
	webtrekk/session. See session.
	webtrekk/campaign. See campaign.
	webtrekk/customer. See customer.
	webtrekk/product. See product.
	webtrekk/products. See products.
	webtrekk/order. See order.
	webtrekk/track. See track.
	webtrekk/trackPage. See trackPage.
	webtrekk/trackAction. See trackAction.
webtrekk.sendInstantly	Boolean. Optional. Defaults to false. true All added data are instantly tracked (you must not call track).