# Colruyt

# Display Implemantation

## Colruyt Group — Adhese Tag Implementation

### Overview

The `colruytgrouptest` customer tag integrates the Adhese TypeScript SDK into Colruyt Group web pages. Each HTML page configures and initialises an Adhese instance via a <span class="icon-label">window.AdheseConfig</span> global, which is consumed by a shared TypeScript entry point (`src/tag.ts`).

---

### How It Works

#### 1. Page-level configuration (<span class="icon-label">window.AdheseConfig</span>)

Each HTML page defines a <span class="icon-label">window.AdheseConfig</span> object in an inline `<script>` block **before** loading the tag script. This configuration is page-specific and declares:

<div class="monaco-scrollable-element rendered-markdown-table-scroll-wrapper" id="bkmrk-property-description" role="presentation"><div><table style="width: 95.3571%;"><thead><tr><th style="width: 15.1213%;">Property</th><th style="width: 85.0037%;">Description</th></tr></thead><tbody><tr><td style="width: 15.1213%;"><span class="icon-label">account</span></td><td style="width: 85.0037%;">The Adhese account identifier

- test account: `"colruytgrouptest"`
- productie account: `"colruytgroup"`

</td></tr><tr><td style="width: 15.1213%;"><span class="icon-label">location</span></td><td style="width: 85.0037%;">The ad location/slot context for this page (e.g. `"clp_web_home"`, `"clp_web_acties"`)

Correct information for each page can be found in [the Inventory excel](https://colruytgroupcom.sharepoint.com/:x:/r/sites/col-prj-RM-CGxAdhese/Gedeelde%20documenten/General/1.%20Inventory/Colruyt%20Inventory.xlsx?d=wd6c20f63a3f94ca4b5940befc7a721c1&csf=1&web=1&e=LhHBmS).

</td></tr><tr><td style="width: 15.1213%;"><span class="icon-label">consent</span></td><td style="width: 85.0037%;">Boolean — whether user has given personalized ads consent.</td></tr><tr><td style="width: 15.1213%;"><span class="icon-label">data</span></td><td style="width: 85.0037%;">Targeting parameters (user ID, device ID, language, categories, etc.)</td></tr><tr><td style="width: 15.1213%;"><span class="icon-label">slots</span></td><td style="width: 85.0037%;">Array of ad slots to render on this page</td></tr></tbody></table>

</div><div aria-hidden="true" class="invisible scrollbar horizontal" role="presentation"><div class="slider">Other settings can be used if the implementation requires it. More information about any specific usecase can be found on the documentation pages of the SDK: [https://adhese.github.io/sdk\_typescript/#usage](https://adhese.github.io/sdk_typescript/#usage)</div></div><div class="slider">  
</div><div aria-hidden="true" class="invisible scrollbar vertical" role="presentation">  
</div></div>##### 1.1 Data object

The data object can handle the following inputs:

<table id="bkmrk-field-adhese-param-t"><thead><tr><th>Field</th><th>Adhese param</th><th>Type</th><th>Description</th><th>Pages</th></tr></thead><tbody><tr><td><span class="icon-label">userID</span></td><td><span class="icon-label">mi</span></td><td>`string`</td><td>User identifier</td><td>All

</td></tr><tr><td><span class="icon-label">deviceID</span></td><td><span class="icon-label">di</span></td><td>`string`</td><td>Device identifier</td><td>All</td></tr><tr><td><span class="icon-label">language</span></td><td><span class="icon-label">ln</span></td><td>`string`</td><td>Content/UI language (e.g. `"en"`, `"nl"`)</td><td>All</td></tr><tr><td><span class="icon-label">categories</span></td><td><span class="icon-label">ct</span></td><td>`string[]`</td><td>List of content categories (e.g. `["food", "beverages"]`)</td><td>Product</td></tr><tr><td><span class="icon-label">currentCategory</span></td><td><span class="icon-label">cc</span></td><td>`string`</td><td>The active/current category</td><td>Product</td></tr><tr><td><div><div>searchKeyword</div></div></td><td><span class="icon-label">kw</span></td><td>`string`</td><td>The keyword used in the sites search.</td><td>Product Search</td></tr><tr><td><span class="icon-label">appVersion</span></td><td><span class="icon-label">ve</span></td><td>`string`</td><td>App version string (e.g. `"1.0.0"`)</td><td>All</td></tr></tbody></table>

Each slot entry specifies:

- <span class="icon-label">format</span> — the ad format name (e.g. `"herobanner"`, `"actiebanner"`, `"contenttile"`) 
    - Correct information for each slot can be found in [the Inventory excel](https://colruytgroupcom.sharepoint.com/:x:/r/sites/col-prj-RM-CGxAdhese/Gedeelde%20documenten/General/1.%20Inventory/Colruyt%20Inventory.xlsx?d=wd6c20f63a3f94ca4b5940befc7a721c1&csf=1&web=1&e=LhHBmS).
- <span class="icon-label">containingElement</span> — the `id` of the DOM element that will hold the ad
- <span class="icon-label">slot</span> *(optional)* — a positional suffix (e.g. `"_top_1"`, `"_tile_2"`) 
    - Correct information for each slot can be found in [the Inventory excel](https://colruytgroupcom.sharepoint.com/:x:/r/sites/col-prj-RM-CGxAdhese/Gedeelde%20documenten/General/1.%20Inventory/Colruyt%20Inventory.xlsx?d=wd6c20f63a3f94ca4b5940befc7a721c1&csf=1&web=1&e=LhHBmS).
- `height` / `width` — dimensions passed to the SDK 
    - If no fixed dimensions are known, set them to 100% to make them responsive and let the dimensions be dictated by the front end.

More information about any specific usecase can be found on the documentation pages of the SDK: [https://adhese.github.io/sdk\_typescript/slots.html](https://adhese.github.io/sdk_typescript/slots.html)

#### 2. Tag entry point (`tag.js`)

The single <span class="icon-label">tag.js</span> file is shared across all pages for this customer. It:

1. **Reads** <span class="icon-label">window.AdheseConfig</span>
2. **Maps** the <span class="icon-label">data</span> fields to Adhese parameter prefixes.
3. **Initialises** the Adhese SDK. passing the mapped parameters and the slot definitions in ad requests.
4. **Exposes** the resulting <span class="icon-label">adhese</span> instance on <span class="icon-label">window.adhese</span> for external access
5. Handles all **ad response**, rendering ads when needed.
6. Handles all **tracking** of the ads.

The use the following URL for the script:

- Test : [https://pool-colruytgrouptest.adhese.com/tag/tag.js](https://pool-colruytgrouptest.adhese.com/tag/tag.js)
- poroduction: [https://pool-colruytgroup.adhese.com/tag/tag.js](https://pool-colruytgrouptest.adhese.com/tag/tag.js)

#### 3. Ad unit containers (HTML)

Each page contains `<div>` elements with matching `id` attributes that correspond to the <span class="icon-label">containingElement</span> values in the slot config. The SDK injects the rendered ads into these containers.