IMD banner demo

This page demonstrates how to load the IMD ad engine and render two banner ads by passing configuration through plain <ins> elements.

The script scans body ins nodes and reads banner settings from these attributes: data-type, data-format, data-section, data-zone, data-width, data-height, and optionally data-zindex.

No custom CSS is applied to the ad <ins> elements below. The IMD engine handles the slot styling and content rendering.

Data attribute reference

The IMD engine reads banner configuration directly from the data-* attributes on each <ins> element. Use the fields below when implementing the script on a website.

Attribute	Required	Description	Example
`data-type`	Yes	Defines the ad type. For display banners this should be `banner`.	`banner`
`data-format`	Yes	The format identifier sent to the IMD backend. `728x90` is an IAB Leaderboard and `300x250` is an IAB MPU.	`728x90`
`data-section`	Yes	The IMD section UUID that groups the placements for the page or implementation.	`09779959-8cf6-45b6-a984-315fe4bd0f08`
`data-zone`	Yes	Placement identifier within the section. Use `1` for above the fold, `2` for mid page, and `3` for below the fold. If you are unsure, use `1`.	`1`
`data-width`	Yes	Slot width as a CSS size string. You can use responsive values such as `100%`.	`100%`
`data-height`	Yes	Slot height as a CSS size string. For responsive images you can use `auto`.	`auto`
`data-zindex`	No	Optional stacking value for the rendered banner image. Only use it when the ad needs a specific stacking order.	`1`

Load the script from the same host and path prefix you want the engine to use for assets and tracking.
Place the <ins> elements inside the page <body>.
For responsive layouts, use data-width="100%" and data-height="auto", then constrain the parent container with a max width.
Request the correct data-section and data-zone values from IMD for each placement.

1. Load the IMD engine

<script
  defer="defer"
  type="module"
  src="https://il.demo.imd-nl.com/api/assets?path=engine.js"></script>

2. Flight targeting

Define window.imd with a flight() and/or language() method before loading the engine. The engine reads these values at request time and appends them to every ad call as query parameters (fn, dep, arr, l), which the IMD backend uses to serve flight-relevant advertising.

<script>
window.imd = {
  language: function () {
    return "en";
  },
  flight: function () {
    return {
      flightNumber: "IL1234",
      departure:    "DUB",
      arrival:      "CDG"
    };
  }
};
</script>
<script defer="defer" type="module"
  src="https://il.demo.imd-nl.com/api/assets?path=engine.js"></script>

With this configuration the engine appends &fn=IL1234&dep=DUB&arr=CDG&l=en to each ad request. Advertisers can then target passengers on flight IL1234 from Dublin (DUB) to Paris Charles de Gaulle (CDG).

Property	Parameter	Description	Example
`flight().flightNumber`	`fn`	IATA flight number	`IL1234`
`flight().departure`	`dep`	Departure airport IATA code	`DUB`
`flight().arrival`	`arr`	Arrival airport IATA code	`CDG`
`language()`	`l`	Passenger interface language (ISO 639-1)	`en`

All four properties are optional. The engine silently skips any that return undefined or null.

3. IAB Leaderboard example

Use a plain <ins> with the leaderboard slot configuration.

<ins
  data-type="banner"
  data-format="728x90"
  data-section="09779959-8cf6-45b6-a984-315fe4bd0f08"
  data-zone="1"
  data-width="100%"
  data-height="auto"
  data-zindex="1"
></ins>

Rendered result:

4. IAB MPU example

Use another plain <ins> for the MPU slot.

<ins
  data-type="banner"
  data-format="300x250"
  data-section="09779959-8cf6-45b6-a984-315fe4bd0f08"
  data-zone="2"
  data-width="100%"
  data-height="auto"
  data-zindex="1"
></ins>

Rendered result: