---
title: Technical Information
slug: technical-information
description: SparkLayer is designed to be as lightweight as possible and uses modern JavaScript technology to power the frontend. 
image: https://www.sparklayer.io/assets/images/logos/og-logo.png
docTags: 
createdAt: 2023-06-16T06:48:29.000Z
---

## 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](docId\:ccZ1vnH0O6D_722w35Xpa) work across all devices (e.g.desktop, tablet, mobile), ensuring customers can easily browse your website no matter which device they are using.

![](https://api.archbee.com/api/optimize/kxppJrvFK15E9wXbMKaTP/khnmG7YCoVYuMrfoU5XEW_archbee-1.jpg)



***

## Building custom interfaces

It's possible to extend the frontend of SparkLayer to create more custom layouts. Please refer to [JavaScript SDK & Headless](docId\:B-blQYlOC3QNKrit7XLgw)



***

## Event tracking for analytics (Google Analytics, GA4)

:::hint{type="warning"}
**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.](docId\:nRnplHclcT3sLJt_C_9pF) 
:::

**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.](docId\:nRnplHclcT3sLJt_C_9pF) 

:::ExpandableHeading
**Available Events (expand to see)**

| 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.                           |


	


:::

::::ExpandableHeading
**Sample code to add (expand to see)**

:::hint{type="info"}
**Updating sparkOptions and text**
You can enable this feature by adding some special code to your [Core Script](docId\:QWXsYM9X5_pvIOGUteKcP).
:::

```javascript
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
        }
      }
    ]
  }
};
```


::::