​
Overview

The Layers Tracking Pixel supports forwarding events to third-party analytics services. This allows you to leverage your existing analytics infrastructure while benefiting from Layers’ advanced tracking capabilities. The integration system is designed to be:

  • Privacy-compliant: All integrations respect the same consent settings as the Layers Pixel
  • Non-intrusive: Integrations only use services already loaded on the page
  • Configurable: Enable/disable specific integrations and control which events are forwarded
  • Extensible: The architecture allows for adding new integrations in the future

​
Supported Integrations

​
Microsoft Clarity

Microsoft Clarity is a free analytics tool that helps you understand how users interact with your website through session recordings, heatmaps, and insights.

The Layers Tracking Pixel can forward events to Clarity if it’s already loaded on your page. This integration does not load the Clarity script itself - you must add the Clarity script to your theme separately.

​
Blotout.io

Blotout.io is a privacy-first customer data platform that helps you collect, unify, and activate customer data.

The Layers Tracking Pixel can forward events to Blotout if it’s already loaded on your page. This integration does not load the Blotout script itself - you must add the Blotout script to your theme separately.

​
Configuration

To enable third-party integrations, add the appropriate configuration to your Layers config:

<script id="layers-config" type="application/json">
{
  "apiToken": "your-api-token",
  "integrations": {
    "clarity": {
      "enabled": true,
      "forwardedEvents": ["product_view", "add_to_cart"]
    },
    "blotout": {
      "enabled": true,
      "forwardedEvents": ["product_view", "collection_view"]
    }
  }
}
</script>

​
Configuration Options

Each integration supports the following configuration options:

  • enabled (boolean): Whether the integration is enabled
  • forwardedEvents (string[]): Optional array of event types to forward to this integration
    • If omitted or empty, all events will be forwarded
    • If specified, only the listed event types will be forwarded

​
Event Types

By default, integrations only forward visual search and shop similar events to third-party services. These include:

  • similar-opened: When a user opens the shop similar panel
  • similar-closed: When a user closes the shop similar panel
  • similar-product-clicked: When a user clicks on a product in shop similar results
  • image-search-opened: When a user opens the image search panel
  • image-search-closed: When a user closes the image search panel
  • image-search-search: When a user performs an image search
  • image-search-crop: When a user crops an image for search
  • shop-similar-impression: When shop similar recommendations are shown

You can customize which events are forwarded using the forwardedEvents configuration option. If you want to forward other event types like product views or add to cart events, you’ll need to explicitly specify them in the configuration.

​
Implementation Notes

  • Integrations only use services that are already loaded on the page
  • No initialization is performed by the integrations
  • All integrations respect the same consent settings as the Layers Pixel
  • Events are forwarded with the same payload structure as they are sent to Layers
  • If an integration service is not available on the page, events will not be forwarded (no errors will be thrown)

​
Example: Complete Configuration

Here’s a complete example of configuring both Microsoft Clarity and Blotout.io integrations:

<script id="layers-config" type="application/json">
{
  "apiToken": "your-api-token",
  "endpoints": {
    "beacon": "https://cl.uselayers.com/beacon",
    "browse": ["uselayers.com/api/storefront/v1/browse"]
  },
  "productCardSelectors": [".product-card", ".product-item"],
  "integrations": {
    "clarity": {
      "enabled": true,
      "forwardedEvents": ["product_view", "add_to_cart", "collection_view"]
    },
    "blotout": {
      "enabled": true
    }
  }
}
</script>

In this example:

  • Microsoft Clarity will receive only product_view, add_to_cart, and collection_view events
  • Blotout.io will receive all events