HTML ads open a world of creativity by enabling you to design dynamic, interactive ads using the same technology that powers modern websites. As the latest evolution of web content standards, HTML5 offers significant advantages. HTML5 ads are compatible with any modern smartphone, tablet, desktop browser or DOOH panel, providing consistent user experience across platforms.

Additionally, HTML5 simplifies the creation of responsive ads that automatically adjust to different screen sizes and ad formats, ensuring your content remains visually engaging, no matter where it’s displayed. On our platform, where screens and environments vary, HTML5 gives you the flexibility to create impactful, adaptive campaigns that resonate with audiences everywhere.  

When creating HTML materials for our panels, these specific guidelines must be followed to ensure compatibility and optimal performance on the platform.‍

‍

Initial guidelines to follow

• Ad length is 5 seconds.
• The solution should be as light as possible regarding KB. Please see tips on how to reduce data traffic under the “Data consumption and caching”.
• Material produced to be responsive for multiple panel formats must be auto responsive for the material to properly adapt to the screens.
• The HTML document or URL is pre-loaded into the memory of the Player a few seconds before the material is shown on the monitor. Any animations will start when pre-load is finished. Please make sure this is in place by following and applying the “Require methods” section to your materials.
• Available delivery formats are:
  
  • Zipped HTML/HTML5 package ("index.html" in the root folder)
  • URL (Web Redirect link) – Requires using caching, see specifically chapter “Caching using Service Workers”.

‍

Required methods

1. Paused at start

To prevent missing elements at playback, content is pre-loaded before being displayed. This means all necessary files are downloaded in the background a few seconds ahead of time.

To ensure smooth playback upon display, all video elements and animations should be paused by default, even after the content is completely loaded.

Be sure not to include “autoplay” in the HTML Video tag:_‍

^{<video width="1080" height="1920" muted>
<source src="myProduct.mp4" type="video/mp4">
<source src="myProduct.ogv" type="video/ogg">
</video>}

‍

2. BroadSignPlay() method

This method is used for controlling animations and video playback. Data retrieval or similar functions can be executed beforehand. Then once the pre-load is completed, the method is triggered to start the animation or video.

^{function startAnimations() {
// Code that goes in the body's onload event --
// animations, plugins and timers -- should start here
}
function BroadSignPlay(){
startAnimations()
}}

⚠ The function must be named exactly BroadSignPlay(), case sensitive, and be accessible at the root level. Using the functionality described will make the page look faulty in any local browser, however, will play correct in our platform. It is possible to trigger the method in the Developer Console by executing BroadSignPlay();

‍

Content, functions and features

1. File formats

The platform supports a variety of file formats for digital content:

• HTML, CSS, JavaScript: These are standard for building web-based ad copies. ‍
• Video Formats: MP4, OGV, and WEBM.
  Videos should be 25 fps and encoded without audio. The recommended bitrate is ~2MB per second. ‍
• Image Formats: JPEG, PNG, SVG, and GIF.
  The resolution should be 72 ppi, with a maximum size of 2MB per 1M pixels. Ensure the use of 16-bit colour depth.

⚠ Avoid using IFRAME tags and refrain from incorporating Web Assembly into the components.

‍

2. Variables

Object variables, for location specific content

Both HTML Package and Web Redirect copies allow dynamic content adaptation by utilizing location-specific parameters, accessed via the BroadSignObject. This enables contextualizing ads based on environmental factors such as location, temperature, or local events.

To access these variables, use the BroadSignObject object. An example code snippet to display all available variables in the console is:

^{for (var propertyName in BroadSignObject) {
console.log(propertyName + " = " + BroadSignObject[propertyName]);
}}

Some of the following values might not be available at every location:

• frame_id: ID of the frame displaying the content. ‍
• display_unit_lat_long: Latitude and longitude of the display unit. ‍
• display_unit_address: Physical address of the display. ‍
• ad_copy_id: ID of the ad copy. ‍
• campaign_id: ID of the campaign. ‍
• player_id: ID of the player. ‍
• display_unit_resolution: Resolution of the display unit. ‍
• display_unit_id: ID of the display unit. ‍
• expected_slot_duration_ms: Slot length in milliseconds. ‍
• frame_resolution: Resolution of the frame.

‍

Query variables

These are automatically appended to the original URL prior to being requested, so these can be used before the BroadSignObject variables. However, these are limited to the location IDs.

• Resource ID: Related to the player (PC). Unique location for storing synchronization files.
• Frame ID: Related to the actual screen. One player can hold more than one screen.

‍

3. Data consumption and caching

Data consumption

A dynamic material (DCO) should consume an average of 0,5 MB per displayed slot over a 24-hour period. If this consumption is exceeded, Bauer Media Outdoor reserves the right to paus the campaign.

Tips to reduce your data usage for your campaign are:

• Refrain from using cache busters
• Compress media files
• Add HTTP headers for Cache-Control: public, max-age=31536000
• Serve media without ranges, HTTP headers: Accept-Ranges: none

‍

Caching using Service Workers (applies to only to Web Redirect deliveries)

Web Redirect ad copies shall utilize a caching mechanism to prevent redundant downloads of static assets. This is achieved using the browser’s Cache API in conjunction with Service Workers.

This function works best over HTTPS connections and may not function in local environments without security considerations.

Here’s an example of a service worker script (sw.js). In this case, the Service Worker caches assets located within the “campaigns/creative” folder at the website’s root directory.

^{const cacheName = "static-v1";
const filesToCache = [
 "/campaigns/creative/",
 "/campaigns/creative/index.html",
 "/campaigns/creative/css/style.css",
 "/campaigns/creative/js/main.js",
 "/campaigns/creative/vid/fallback.mp4",
];
self.addEventListener("install", (event) => {
 event.waitUntil(
   caches.open(cacheName).then((cache) => {
     return cache.addAll(filesToCache);
   })
 );
});
self.addEventListener("fetch", (event) => {
 event.respondWith(
   caches.match(event.request).then((cachedResponse) => {
     if (cachedResponse) {
       return cachedResponse;
     } else {
       return fetch(event.request).then((networkResponse) => {
         if (networkResponse.ok) {
           caches.open(cacheName).then((cache) => {
             cache.put(event.request, networkResponse.clone());
           });
         }
         return networkResponse;
       });
     }
   })
 );
});}

‍

This code snippet demonstrates registering a Service Worker. While it can be triggered during the document load event, it’s generally recommended to delay registration until after the content has loaded.

if ("serviceWorker" in navigator) {
 navigator.serviceWorker
   .register("/campaigns/creative/sw.js")
   .then(() => console.log("Service worker registered!"))
   .catch((err) => console.error("Service worker registration failed:", err));
}


‍

If it happens that it’s strictly necessary to unregister the Service Workers and clear the cache entirely, an adaptation of the following code can be used for this purpose. However, advised to only be used during a limited time frame to not introduce unnecessary data traffic on the panels.

^{navigator.serviceWorker.getRegistration("/campaigns/creative/sw.js").then((registration) => {
 log("Service worker found", true);
 registration?.unregister().then(function () {
     log('Service worker unregistered successfully', true);
     caches.keys().then(function (cacheNames) {
         return Promise.all(
             cacheNames.map(function (cacheName) {
                 log("Cache cleared", true);
                 return caches.delete(cacheName);
             })
         );
     });
 }).catch(function (error) {
     console.error('Error unregistering service worker:', error);
 });
});}

⚠ Refrain from using Workbox library for caching video assets. Compatibility can’t be guaranteed.

‍

4. Optional

Synchronization (applies only to HTML Package deliveries)

When required to update assets after the content is published, we have the option to use the Monitor Sync feature.

This feature retrieves the files with detected changes from a remote location and creates local copies to be later used in the HTML document. Monitor Sync works as a series of scheduled jobs independently from the content programming.

To use the ”now local” assets in the content, source references should start with the path ../../bsp/sync/ (Windows OS: ../../sync/), followed by the destination path. For instance, if the destination path was “campaign/creative” the full source reference for the img/photo.jpg file will be “../../bsp/sync/campaign/creative/img/photo.jpg”.

Depending on the type of connection, the provider of the content should meet the requirements for the chosen option:

• FTP synchronization:
  
  • FTP folder: Remote location for interchangeable assets.
  • FTP authentication: If enabled, username and password. Please, see example below.
  • Destination path: Folder to store local copies.

FTP Details example:

^{Source Root: /brand_example/assets
URL: delivery.com
Username: CC_DynamicContent
Password: 564e654dd8re
Target Folder: /content/asets}

• HTTP Synchronization:
  
  • JSON Manifest: List of changing assets with last update timestamps. Please, see example below.
  • Destination path: Folder to store local copies.

JSON Manifest example:

^{{
   "metadata": {
       "version":1,
           "utc_generation_time_ms":1709720220000
   },
       "files": [{
           "url":"https://www.server.cc/campaigns/creative/vid/video.mp4",
           "utc_last_modified_time_ms":1709720220000,
           "md5":"938c2cc0dcc05f2b68c4287040cfcf71",
           "local_path":"video.mp4"
       },
       {
           "url":"https://www.server.cc/campaigns/creative/img/photo.png",
           "utc_last_modified_time_ms":1709810450000,
           "md5":"298a8ca0gee13d8a92g9276419bdbd83",
           "local_path":"photo.png"
       }]
}}

By default, creative assets synchronization will be programmed to happen each hour but is possible to reduce this frequency at the content provider’s request.

‍

Delivery details

By following these guidelines, you will ensure your digital content runs smoothly across Bauer Media Outdoor platforms, providing a consistent and responsive experience for audiences.

Material deadline

Minimum 10 working days before campaign starts.

Certified DCO and creative vendor

In efforts to ease production of materials we have certified DCO and creative vendor Madington on our platform. The certification includes testing and assuring compatibility of their technology on our panels, to make sure ads are displayed properly. This minimizes the material deadline to minimum 5 working days before campaign start.

Dynamic content

When the content has multiple motives based on a trigger or data point, a description on how the content is supposed to behave in the different scenarios must be delivered with the material. This is to make sure we can properly test the material.

Responsive content

When the content has been prepared to automatically adapt to different dimensions, is important to include technical information about the supported resolutions. Please including image captures of the expected results.

Compatibility

For further compatibility please refer to Chromium 87 documentation when checking for specific browser features.

Further documentation is also available for all Broadsign’s features here:

• HTML Package Ad Copies
• Web Redirect Ad Copies
• Synchronization Monitor
• Content Variables
• BroadSignPlay() function