Bazaarvoice

Overview

This Nuxt plugin integrates Bazaarvoice (BV) pixel tracking into your application, ensuring it's only enabled in production environments and when the user has consented to analytical cookies via OneTrust.

Features

• Loads the Bazaarvoice pixel script dynamically.
• Respects user consent via OneTrust (Analytical cookies).
• Provides utilities to track:
  • Page views
  • Transactions
  • Custom events
• Exposes tracking functions globally via $bv.

Configuration

BV Script Configuration

The Bazaarvoice script is loaded based on the following configuration:

const config = {
  clientName: "toolstation-nl",
  siteId: "main_site",
  environment: "production",
  locale: "nl_NL",
};

The script is loaded dynamically from:

https://apps.bazaarvoice.com/deployments/{clientName}/{siteId}/{environment}/{locale}/bv.js

Runtime Conditions

• Script loading and tracking are only enabled in production (featureFlags.enableBVPixel).
• Tracking functions are only triggered when the user has accepted analytical cookies (OneTrustCookieGroup.Analytical).

Usage

The plugin injects a global $bv object with the following methods:

1. trackPageView()

Tracks a standard page view.

nuxtApp.$bv.trackPageView();

2. trackTransaction(transactionData)

Tracks an eCommerce transaction.

nuxtApp.$bv.trackTransaction({
  orderId: "1234",
  total: 99.99,
  items: [...],
});

3. trackEvent(eventName, eventData)

Tracks a custom event.

nuxtApp.$bv.trackEvent("MyCustomEvent", { label: "foo", value: "bar" });

Consent Check

The plugin ensures tracking only occurs when the user has granted analytical consent through OneTrust:

const checkAnalyticsConsent = rootStore.checkConsent(
  OneTrustCookieGroup.Analytical
);

If consent is not granted, or BV is not initialized, tracking calls will be skipped or will log a warning.

Debugging

If appDebug is enabled in the runtime config, the plugin will update the debug store:

debugStore.services.bazaarvoice.enabled = true;
debugStore.services.bazaarvoice.siteId = config.siteId;

BV Initialization

The script sets a global callback:

window.bvCallback = function (BV) {
  window.$BV = BV;
};

This ensures BV is globally available once initialized.

Example Integration

Here’s a full example of how you might use this plugin in a component:

onMounted(() => {
  const nuxtApp = useNuxtApp();

  // Track page view
  nuxtApp.$bv.trackPageView();

  // Track a transaction
  nuxtApp.$bv.trackTransaction({
    orderId: "TS5678",
    total: 150.0,
    items: [
      { sku: "ABC123", quantity: 1, price: 50 },
      { sku: "XYZ789", quantity: 2, price: 50 },
    ],
  });
});

Notes

• Ensure that featureFlags.enableBVPixel is set in your public runtime config for production environments.
• Consent is a mandatory check—BV will not be initialized or used without user approval for analytical cookies.
• Plugin runs only in client-side context (*.client.ts).