Banner ID Extraction for Tracking

Overview

When banner content is returned from the Search API, it comes as HTML strings that need to be rendered on the page. To track impressions and clicks on these banners, we need to extract a unique identifier (UID) from the HTML content. This document explains how that extraction works and how banner tracking events are structured.

Banner content returned from the API looks like this:

{
  "merchandising": {
    "content": {
      "header": [
        "<div data-banner-id=\"12345\"><img src=\"banner.jpg\" /></div>"
      ],
      "banner": [
        "<div data-banner-id=\"67890\">Sale ends today!</div>"
      ]
    }
  },
  "tracking": {
    "responseId": "abc123def456"
  }
}

The banner HTML contains a data-banner-id attribute that uniquely identifies the banner. We need to extract this ID to send with tracking events.

Extraction Algorithm

Regular Expression Pattern

/data-banner-id="(\d+)"/

This pattern:

• Matches the literal string data-banner-id="
• Captures one or more digits (\d+) - this is the banner ID
• Matches the closing quote "

Example Extraction

Input HTML:

<div class="banner" data-banner-id="12345">
  <img src="promo.jpg" alt="Summer Sale" />
</div>

Extraction Steps:

1. Regex finds: data-banner-id="12345"
2. Capture group extracts: 12345
3. Result: uid = "12345"

Tracking Events

When sending impression or click events for banners, the extracted uid is used:

{
  context: {
    // ... context data (userId, timestamp, etc.)
  },
  data: {
    responseId: "abc123def456",  // from API
    banners: [
      { uid: "12345" }             // extracted banner ID
    ],
    results: []
  }
}