Redux middleware solves different problems than Express or Koa middleware but in a conceptually similar way. It provides a third-party extension point between dispatching an action and the moment it reaches the reducer. People use Redux middleware for logging, crash reporting, talking to an asynchronous API, routing, and more.

Middleware with custom actions

ValueDescriptionData typeRequired
actionsExtends your actions and executes custom tracking code after dispatching your action.Object-
arguments0Your current state.Object-
arguments1Your current action.Object-

Integration

import { createStore, applyMiddleware, compose } from "redux";
import { WebtrekkSmartPixelReact, webtrekkMiddleware } from "@webtrekk-smart-pixel/react";
JS 
import { createStore, applyMiddleware, compose } from "redux";
import { WebtrekkSmartPixelReact, webtrekkMiddleware } from "@webtrekk-smart-pixel/next";
JS 
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"});
JS

Dispatch with tracking data

ValueDescriptionData typeRequiredDefault value
webtrekk.type













Defines which type of tracking data you are adding to the tracking pixel. You can use one of the following types:String













Yes




























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
webtrekk/trackAction
webtrekk.data












Defines which data you are adding to the tracking pixel.AnyYes
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.sendInstantlyIf set to true , all added data is instantly tracked (you must not call track).Boolean
false

Integration

import { createStore, applyMiddleware, compose } from "redux";
import { WebtrekkSmartPixelReact, webtrekkMiddleware } from "@webtrekk-smart-pixel/react";
JS 
import { createStore, applyMiddleware, compose } from "redux";
import { WebtrekkSmartPixelReact, webtrekkMiddleware } from "@webtrekk-smart-pixel/next";
JS 
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 + ""}
        }
    }
});
JS