Technical information

SparkLayer is designed to be as lightweight as possible and uses modern JavaScript technology to power the frontend.

How SparkLayer is loaded

SparkLayer is fully hosted, so there's no code for you to host or maintain.

For performance, the SparkLayer Frontend only loads when a customer logs in to your website. The interfaces load asynchronously, so even though SparkLayer is a hosted third-party solution, the impact on page load times is negligible.

Browser support

SparkLayer supports the latest two versions of these browsers:

• Google Chrome
• Mozilla Firefox
• Apple Safari
• Microsoft Edge
• Apple Safari for iOS
• Google Chrome for Android and iOS

SparkLayer may not work fully with beta or pre-release versions of these browsers.

Mobile support

The frontend interfaces work on desktop, tablet and mobile, so customers can browse your website on any device.

Building custom interfaces

To build more custom layouts on top of the SparkLayer Frontend, see the JavaScript SDK.

Event tracking for analytics (Google Analytics, GA4)

SparkLayer can send B2B events, such as add to cart, begin checkout and purchase, to Google Analytics (GA4), Google Tag Manager (GTM) or your own analytics code. You set it up with the analytics option in sparkOptions, so you'll need a developer to add it to your Core Script.

Enabling Google Analytics or GTM

Add an analytics object with a list of providers. Each provider has a handler (which analytics tool to send to) and the events to send. This example sends every event to GA4, GTM and a custom function:

window.sparkOptions = {
  ...window.sparkOptions,
  analytics: {
    providers: [
      {
        handler: 'ga', // Google Analytics (GA4)
        events: {
          addToCart: true,
          cartUpdate: true,
          shoppingListSave: true,
          shoppingListLoad: true,
          shoppingListDelete: true,
          csvUpload: true,
          quickAdd: true,
          finalStageCheckout: true,
          shippingUpdate: true,
          beginCheckout: true,
          purchase: true,
          viewCart: true,
        },
      },
      {
        handler: 'gtm', // Google Tag Manager
        events: {
          addToCart: true,
          cartUpdate: true,
          shoppingListSave: true,
          shoppingListLoad: true,
          shoppingListDelete: true,
          csvUpload: true,
          quickAdd: true,
          finalStageCheckout: true,
          shippingUpdate: true,
          beginCheckout: true,
          purchase: true,
          viewCart: true,
        },
      },
      {
        handler: function (eventName, eventParam) {
          // Your own analytics code
        },
        events: {
          addToCart: true,
          purchase: true,
        },
      },
    ],
  },
};

The ...window.sparkOptions line keeps the options you've already set; without it, this object replaces them.

Provider options

Available events

Custom analytics provider

To send events to an analytics service SparkLayer doesn't support natively, set handler to a function. It receives the event name and its parameters, so you can add any tracking logic:

{
  handler: function (eventName, eventParam) {
    // Example: send the event to your own analytics endpoint
    fetch('https://your-analytics-endpoint.com/track', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        event: eventName,
        parameters: eventParam,
      }),
    });
  },
  events: {
    addToCart: true,
    cartUpdate: true,
    // ... other events ...
  },
}

Next steps

• Frontend integration guide: install the Core Script and product page widgets.
• Core Script options: every sparkOptions setting.
• Set up the JavaScript SDK: customise the frontend with code.