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 window.AdheseConfig global, which is consumed by a shared TypeScript entry point (src/tag.ts).
How It Works
1. Page-level configuration (window.AdheseConfig)
Each HTML page defines a window.AdheseConfig object in an inline <script> block before loading the tag script. This configuration is page-specific and declares:
| Property | Description |
|---|---|
| account |
The Adhese account identifier
|
| location |
The ad location/slot context for this page (e.g. Correct information for each page can be found in the Inventory excel. |
| consent | Boolean — whether user has given personalized ads consent. |
| data | Targeting parameters (user ID, device ID, language, categories, etc.) |
| slots | Array of ad slots to render on this page |
1.1 Data object
The data object can handle the following inputs:
| Field | Adhese param | Type | Description | Pages |
|---|---|---|---|---|
| userID | mi | string |
User identifier |
All |
| deviceID | di | string |
Device identifier | All |
| language | ln | string |
Content/UI language (e.g. "en", "nl") |
All |
| categories | ct | string[] |
List of content categories (e.g. ["food", "beverages"]) |
Product |
| currentCategory | cc | string |
The active/current category | Product |
|
searchKeyword
|
kw | string |
The keyword used in the sites search. | Product Search |
| appVersion | ve | string |
App version string (e.g. "1.0.0") |
All |
Each slot entry specifies:
- format — the ad format name (e.g.
"herobanner","actiebanner","contenttile")- Correct information for each slot can be found in the Inventory excel.
- containingElement — the
idof the DOM element that will hold the ad - slot (optional) — a positional suffix (e.g.
"_top_1","_tile_2")- Correct information for each slot can be found in the Inventory excel.
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
2. Tag entry point (src/tag.ts)
The single tag.ts file is shared across all pages for this customer. It:
- Reads window.AdheseConfig
- Maps the data fields to Adhese parameter prefixes.
- Initialises the Adhese SDK. passing the mapped parameters and the slot definitions in ad requests.
- Exposes the resulting adhese instance on window.adhese for external access
- Handles all ad response, rendering ads when needed.
- Handles all tracking of the ads.
The use the following URL for the script:
- Test : https://pool-colruytgrouptest.adhese.com/tag/tag.js
- poroduction: https://pool-colruytgroup.adhese.com/tag/tag.js
3. Ad unit containers (HTML)
Each page contains <div> elements with matching id attributes that correspond to the containingElement values in the slot config. The SDK injects the rendered ads into these containers.