Frontend

Technical Information

Introduction
SparkLayer is designed to be as lightweight as possible and uses modern JavaScript technology to power the frontend. 
﻿
How SparkLayer is loaded
All elements of SparkLayer are fully-hosted using a best-of-breed server infrastructure, meaning there's no code for you to self-manage, host, or maintain going forward.
For performance, SparkLayer Frontend only loads when a customer successfully logs into a website; all loading of the interfaces is asynchronous which means a negligible impact on page load times and performance even though SparkLayer is a hosted third-party solution. The result is the end customer will have a rapid experience browsing products and placing orders.
﻿
Browser Support
We currently support the latest two versions of the following major browsers:
Google Chrome
Mozilla Firefox
Apple Safari
Microsoft Edge
Apple Safari for iOS
Google Chrome for Android and iOS
Please note, SparkLayer may not work fully with beta or pre-release versions of these browsers
﻿
Mobile support
The Frontend Interfaces﻿ work across all devices (e.g.desktop, tablet, mobile), ensuring customers can easily browse your website no matter which device they are using.
﻿
﻿
Building custom interfaces
It's possible to extend the frontend of SparkLayer to create more custom layouts. Please refer to JavaScript SDK & Headless﻿﻿
﻿
Event tracking for analytics (Google Analytics, GA4)
Please note
This integration requires some technical setup, so please ensure a developer is available to assist. For full instructions, consult our our technical docs here.﻿ 
Integrating Google Analytics with SparkLayer
If you're looking to track key events in Google Analytics (GA4) or Google Tag Manager (GTM) through SparkLayer, you can set this up directly in your integration. This will help you capture valuable B2B events like "add to cart" "checkout," and "purchase" actions. 
Key details to note:
Supports GA4, GTM, and custom analytics.
Configuration is done using sparkOptions.
Detailed code examples and setup steps are available in our technical docs here.﻿ 
Event Name
Description
addToCart
Triggered when a product is added to the cart.
cartUpdate
Fired when the cart is updated (e.g., quantity changes).
shoppingListSave
Occurs when a shopping list is saved.
shoppingListLoad
Occurs when a shopping list is loaded.
shoppingListDelete
Occurs when a shopping list is deleted.
csvUpload
Triggered when a CSV file is uploaded.
quickAdd
Fired during quick add actions.
finalStageCheckout
Occurs at the final stage of the checkout process.
shippingUpdate
Fired when shipping details are updated during checkout.
beginCheckout
Triggered when the checkout process begins.
purchase
Occurs upon successful purchase completion.
viewCart
Fired when the cart is viewed.

	
﻿
Updating sparkOptions and text
You can enable this feature by adding some special code to your Core Script﻿.
JS
window.sparkOptions = {
  // ... other SparkLayer options ...

  analytics: {
    providers: [
      {
        handler: 'ga', // Use 'ga' for Google Analytics
        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', // Use 'gtm' for 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) {
          console.log('Event fired to custom provider:', eventName, eventParam);
          // Implement your custom analytics logic here
        },
        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
        }
      }
    ]
  }
};
window.sparkOptions = {
  // ... other SparkLayer options ...

  analytics: {
    providers: [
      {
        handler: 'ga', // Use 'ga' for Google Analytics
        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', // Use 'gtm' for 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) {
          console.log('Event fired to custom provider:', eventName, eventParam);
          // Implement your custom analytics logic here
        },
        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
        }
      }
    ]
  }
};
﻿
﻿
﻿

Event Name	Description
addToCart	Triggered when a product is added to the cart.
cartUpdate	Fired when the cart is updated (e.g., quantity changes).
shoppingListSave	Occurs when a shopping list is saved.
shoppingListLoad	Occurs when a shopping list is loaded.
shoppingListDelete	Occurs when a shopping list is deleted.
csvUpload	Triggered when a CSV file is uploaded.
quickAdd	Fired during quick add actions.
finalStageCheckout	Occurs at the final stage of the checkout process.
shippingUpdate	Fired when shipping details are updated during checkout.
beginCheckout	Triggered when the checkout process begins.
purchase	Occurs upon successful purchase completion.
viewCart	Fired when the cart is viewed.

JavaScript SDK & Headless

Features