Analytics API

The analytics API provides tracking and cookie consent functionality for the Netup extension.

Import

import {
  createNetupAnalyticsPlugin,
  createNetupCookiesServices,
} from "@front-commerce/netup/analytics";

createNetupAnalyticsPlugin()

Creates an analytics plugin for tracking user behavior and page events for Netup recommendations.

Signature

function createNetupAnalyticsPlugin(
  pluginConfig?: Partial<NetupPluginConfig>
): AnalyticsScriptPlugin | null;

Parameters

pluginConfig?: Partial<NetupPluginConfig>

Optional configuration to customize the analytics behavior.

interface NetupPluginConfig {
  pageTrackers: {
    homePage: string; // Default: "Home"
    productPage: string; // Default: "Product"
    categoryPage: string; // Default: "Category"
    cartPage: string; // Default: "Cart"
    searchPage: string; // Default: "Search"
  };
}

Returns

Type: AnalyticsScriptPlugin | null

Returns an analytics plugin object, or null if Netup is disabled in the configuration.

Usage

app/analytics.ts

import { createNetupAnalyticsPlugin } from "@front-commerce/netup/analytics";

export const analyticsPlugins = [
  createNetupAnalyticsPlugin({
    pageTrackers: {
      homePage: "Home Page",
      productPage: "Product Detail",
      categoryPage: "Category List",
      cartPage: "Shopping Cart",
      searchPage: "Search Results",
    },
  }),
];

Plugin Features

The analytics plugin provides:

Script Loading

• Automatically loads the Netup script from https://s-{slug}.web-boosting.net/wsb.js
• Handles script initialization and loading states
• Registers custom templating functions

Page Tracking

Tracks the following page types based on page titles:

Page Type	Default Title	Tracked Data
Home Page	"Home"	homePage: true
Product Page	"Product"	productPage: { categoryId, productId }
Category Page	"Category"	categoryPage: categoryId
Cart Page	"Cart"	cartPage: true
Search Page	"Search"	searchPage: { searchRequest, productId, categoryId }
Global Page	Any other	globalPage: true

Event Tracking

Tracks the following commerce events:

Event	Tracked Data
Product Added	addToCart: { categoryId, productId, quantity, price }
Product Removed	removeFromCart: { categoryId, productId, quantity, price }
Product Added to Wishlist	addToWishlist: { categoryId, productId }
Product Removed from Wishlist	removeFromWishlist: { categoryId, productId }
Order Completed	order: { articles, orderId, customerId, total }
Product List Filtered	filter: { categoryId, name, values }
Language Defined	language: string
Customer Identified	loggedIn: boolean, clientId: string

Publishing Zone Management

• Automatically injects hidden DOM elements for publishing zones
• Manages zone lifecycle (creation/removal)
• Processes recommendation data from Netup

Configuration Requirements

The plugin requires the following public configuration:

// In your configuration
{
  netup: {
    enabled: true,
    slug: "your-netup-slug",
    publishingZones: [
      { id: "ZH1", type: "homePage" },
      // ... other zones
    ]
  }
}

Debug Mode

Enable debug logging:

// In browser console
window.wsb.debugOn();

createNetupCookiesServices()

Creates cookie consent services for Netup tracking cookies.

Signature

function createNetupCookiesServices(): CookieService | null;

Returns

Type: CookieService | null

Returns a cookie service configuration, or null if Netup is disabled.

Usage

app/cookieServices.ts

import type { CookieServiceGroup } from "@front-commerce/core/react";
import { createNetupCookiesServices } from "@front-commerce/netup/analytics";

export default {
  default: [
    {
      title: "Recommendations",
      description:
        "Service that generates useful recommendations based on your browsing behavior.",
      services: [createNetupCookiesServices()],
    },
    // ... other services
  ] satisfies CookieServiceGroup[],
};

Cookie Service Configuration

The service manages the following cookies:

Cookie Name	Purpose
_wsbA	Analytics tracking data
_wsbC	Configuration data
_wsbMessages	Message tracking

Consent Options

Provides a consent option for:

• Name: "netup"
• Title: "NetUp"
• Description: Enables personalized product recommendations based on user behavior

Service Details

{
  name: "netup",
  title: "NetUp",
  cookies: ["_wsbA", "_wsbC", "_wsbMessages"],
  consentOptions: [
    {
      name: "netup",
      title: "NetUp",
      description: "Enables personalized product recommendations based on on-site user behavior"
    }
  ],
  description: "NetUp cookies are intended to allow us to provide personalized product recommendations..."
}

Error Handling

Both functions will return null if:

• Netup is disabled in the public configuration
• The netup configuration is missing or invalid

// These will return null if netup is disabled
const plugin = createNetupAnalyticsPlugin(); // null
const cookies = createNetupCookiesServices(); // null

Integration Example

Complete integration example:

app/analytics.ts

import { createNetupAnalyticsPlugin } from "@front-commerce/netup/analytics";

export default {
  analytics: {
    // ... other analytics config
    plugins: [
      createNetupAnalyticsPlugin(),
      // ... other plugins
    ],
  } satisfies AnalyticsConfig,
};

app/cookieServices.ts

import { createNetupCookiesServices } from "@front-commerce/netup/analytics";

export const cookieServices = [createNetupCookiesServices()];