# Technical information

URL: https://docs.sparklayer.io/developers/frontend/technical-information

How the SparkLayer Frontend loads asynchronously, supported browsers and devices, and how to track B2B events in GA4 or Google Tag Manager via sparkOptions.

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](https://docs.sparklayer.io/help/storefront/interfaces.md) 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](https://docs.sparklayer.io/developers/javascript-sdk.md).

## 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](https://docs.sparklayer.io/developers/frontend.md#modifying-the-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:

```javascript title="sparkOptions"
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

| Provider type | Description |
| --- | --- |
| `'ga'` | Integrates with Google Analytics (GA4). This works best with [Shopify's GA4 integration](https://help.shopify.com/en/manual/reports-and-analytics/google-analytics/google-analytics-setup). |
| `'gtm'` | Integrates with Google Tag Manager. |
| function | A custom analytics handler, for other analytics platforms or your own tracking logic. See [Custom analytics provider](#custom-analytics-provider). |

### Available events

| Event name | Description |
| --- | --- |
| `addToCart` | Triggered when a product is added to the cart. |
| `cartUpdate` | Fired when the cart is updated (for example, quantity changes or items removed). |
| `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 when a purchase is completed. |
| `viewCart` | Fired when the cart is viewed. |

### 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:

```javascript title="Custom analytics provider"
{
  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](https://docs.sparklayer.io/developers/frontend.md): install the Core Script and product page widgets.
- [Core Script options](https://docs.sparklayer.io/developers/javascript-sdk/reference/options.md): every `sparkOptions` setting.
- [Set up the JavaScript SDK](https://docs.sparklayer.io/developers/javascript-sdk/setup.md): customise the frontend with code.