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 

 

 test account: "colruytgrouptest" 

 productie account: "colruytgroup" 

 

 

 

 

 location 

 

 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 . 

 

 

 

 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 

 

 

 

 

 

 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 

 

 

 

 

 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  id  of 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 ( tag.js ) 

 The single  tag.js  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.