HTML5‑annonser öppnar upp en värld av kreativitet genom att låta dig skapa dynamiska och interaktiva annonser med samma teknik som driver moderna webbplatser. Som den senaste utvecklingen inom webbstandarder erbjuder HTML5 betydande fördelar. HTML5‑annonser är kompatibla med alla moderna smartphones, surfplattor, datorwebbläsare eller digitala utomhusskyltar, vilket ger en konsekvent användarupplevelse över olika plattformar.

Dessutom förenklar HTML5 skapandet av responsiva annonser som automatiskt anpassar sig efter olika skärmstorlekar och annonsformat, vilket säkerställer att ditt innehåll förblir visuellt engagerande – oavsett var det visas. På vår plattform, där skärmar och miljöer varierar, ger HTML5 dig flexibiliteten att skapa slagkraftiga och adaptiva kampanjer som når fram till publiken överallt.

När du skapar HTML‑material för våra skyltar måste dessa specifika riktlinjer följas för att säkerställa kompatibilitet och optimal prestanda på plattformen.

‍

Inledande riktlinjer att följa

• Annonslängden är 5 sekunder.
• Lösningen bör vara så lätt som möjligt vad gäller filstorlek i KB. Se tips om hur du kan minska datatrafiken under avsnittet ” Dataförbrukning och cachelagring”.
• Material som produceras för att vara responsivt för flera format måste vara "auto responsive” för att materialet ska kunna anpassa sig korrekt till skärmarna.
• HTML-dokumentet eller URL:en förinläses i spelarens minne några sekunder innan materialet visas på skärmen. Eventuella animationer startar när förinläsningen är klar. Säkerställ att detta fungerar genom att följa och tillämpa avsnittet ” Obligatoriska funktioner och metoder” i materialet.
• Tillgängliga leveransformat är:
  
  • Zippat HTML/HTML5‑paket (”index.html” i rotmappen)
  • URL (Web Redirect‑länk) – kräver att caching används, se särskilt kapitlet ”Caching med Service Workers”.

‍

Obligatoriska funktioner och metoder

1. Starta i pausat läge

För att undvika att element saknas vid uppspelning förinläses innehållet innan det visas. Detta innebär att alla nödvändiga filer laddas ner i bakgrunden några sekunder i förväg.

För att säkerställa en jämn uppspelning när materialet väl visas bör alla videoelement och animationer vara pausade som standard, även efter att innehållet har laddats färdigt.

Se till att inte använda autoplay i HTML‑videotaggen_‍:_‍

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

‍

2. BroadSignPlay() methd

Den här metoden används för att styra animationer och videouppspelning. Datahämtning eller liknande funktioner kan utföras i förväg. När förinläsningen sedan är färdig triggas metoden för att starta animationen eller videon.

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

⚠ Funktionen måste heta exakt BroadSignPlay(), med korrekt användning av versaler och gemener, och vara åtkomlig på root‑nivå. Att använda funktionen på det sätt som beskrivs kan få sidan att se felaktig ut i en vanlig webbläsare, men den kommer att spelas upp korrekt på vår plattform. Det är möjligt att trigga metoden i utvecklarkonsolen genom att köra BroadSignPlay();

‍

Innehåll, funktioner och egenskaper

1. Filformat

Plattformen stödjer en mängd olika filformat för digitalt innehåll:

• ‍HTML, CSS, JavaScript: Dessa är standardformat för att bygga webbaserade annonser. ‍
• Videoformat: MP4, OGV, och WEBM.
  Videor ska vara 25 fps och kodas utan ljud. Den rekommenderade bithastigheten är ungefär 2MB per sekund. ‍
• Bildformat: JPEG, PNG, SVG, och GIF.
  Upplösningen ska vara 72 ppi, med en maximal filstorlek på 2 MB per 1 megapixel. Se till att använda 16‑bitars färgdjup.

⚠ Undvik att använda IFRAME‑taggar och avstå från att inkludera Web Assembly i komponenterna.

‍

2. Variabler

Objektvariabler, för platsspecifikt innehåll

Både HTML‑paket och Web Redirect‑material möjliggör dynamisk anpassning av innehåll genom att använda platsspecifika parametrar som nås via BroadSignObject. Detta gör det möjligt att anpassa annonser baserat på omgivande faktorer som plats, temperatur eller lokala händelser.

För att komma åt dessa variabler använder du objektet BroadSignObject. Ett exempel på kod som visar alla tillgängliga variabler i konsolen är:

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

Vissa av följande värden kanske inte är tillgängliga på alla platser:

• frame_id: ID för ramen som visar innehållet. ‍
• display_unit_lat_long: Latitud och longitud för displayenheten. ‍
• display_unit_address: Den fysiska adressen för displayenheten. ‍
• ad_copy_id: ID för annonsmaterialet. ‍
• campaign_id: ID för kampanjen. ‍
• player_id: ID för spelaren. ‍
• display_unit_resolution: Upplösningen för displayenheten. ‍
• display_unit_id: ID för displayenheten. ‍
• expected_slot_duration_ms: Längden på exponeringen i millisekunder. ‍
• frame_resolution: Upplösningen för ramen.

‍

Query Variabler

Dessa läggs automatiskt till den ursprungliga URL:en innan den begärs, vilket innebär att de kan användas innan BroadSignObject-variablerna. De är dock begränsade till platsbaserade ID:n.

• Resource ID: Relaterad till spelaren (PC). Unik plats för lagring av synkroniseringsfiler.
• Frame ID: Relaterad till den faktiska skärmen. En spelare kan hantera mer än en skärm.

‍

3. Dataförbrukning och cachelagring

Dataförbrukning

Ett dynamiskt material (DCO) bör förbruka i genomsnitt 0,5 MB per exponering under en 24-timmarsperiod. Om denna förbrukning överskrids förbehåller sig Bauer Media Outdoor rätten att pausa kampanjen.

Tips för att minska dataförbrukningen i din kampanj är:

• Avstå från att använda cache‑busters
• Komprimera mediafiler
• Lägg till HTTP‑headers för Cache-Control: public, max-age=31536000
• Servera media utan ranges, HTTP‑header: Accept-Ranges: none

‍

Caching med Service Workers (gäller endast för Web Redirect‑leveranser)

Web Redirect‑material ska använda en cachemekanism för att förhindra onödiga nedladdningar av statiska resurser. Detta uppnås genom att använda webbläsarens Cache API i kombination med Service Workers.

Denna funktion fungerar bäst över HTTPS‑anslutningar och kan i vissa fall inte fungera i lokala miljöer utan särskilda säkerhetsinställningar.

Här är ett exempel på ett service worker‑script (sw.js). I detta fall cachelagrar Service Workern resurser som ligger i mappen campaigns/creative i webbplatsens rotkatalog.

^{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;
       });
     }
   })
 );
});}

‍

Detta kodexempel visar hur en Service Worker registreras. Även om registreringen kan triggas under dokumentets inläsning rekommenderas det i allmänhet att vänta med registreringen tills innehållet har laddats klart.

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));
}


‍

Om det skulle vara absolut nödvändigt att avregistrera Service Workers och rensa cachen helt kan en anpassad version av följande kod användas för detta ändamål. Det rekommenderas dock att detta endast används under en begränsad tidsperiod för att inte orsaka onödig datatrafik på skyltarna.

^{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);
 });
});}

⚠ Avstå från att använda Workbox‑biblioteket för att cacha videoresurser. Kompatibilitet kan inte garanteras.

‍

4. Valfritt

Synkronisering (gäller endast HTML‑paketsleveranser)

När det behövs uppdatera resurser efter att innehållet har publicerats kan vi använda funktionen Monitor Sync.

Denna funktion hämtar filer med identifierade förändringar från en extern plats och skapar lokala kopior som sedan används i HTML‑dokumentet. Monitor Sync fungerar som en serie schemalagda jobb som körs oberoende av innehållsprogrammeringen.

För att använda de nu lokala resurserna i innehållet ska källhänvisningarna börja med sökvägen ../../bsp/sync/ (Windows OS: ../../sync/) följt av destinationssökvägen. Om destinationssökvägen för filen img/photo.jpg till exempel är ”campaign/creative” blir den fullständiga sökvägen ../../bsp/sync/campaign/creative/img/photo.jpg

Beroende på vilken typ av anslutning som används måste leverantören av innehållet uppfylla kraven för det valda alternativet:

• FTP‑synkronisering:
  
  • FTP folder: Extern plats för utbytbara resurser.
  • FTP authentication: Om aktiverat, användarnamn och lösenord. Se exempel nedan.
  • Destination path: Mapp för att lagra lokala kopior.

Exempel på FTP‑detaljer:

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

• HTTP-synkronisering:
  
  • JSON Manifest: Lista över resurser som ändrats, tillsammans med tidsstämplar för senaste uppdatering. Se exempel nedan.
  • Destination path: Mapp för att lagra lokala kopior.

Exempel för JSON Manifest:

^{{
   "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"
       }]
}}

Som standard schemaläggs synkronisering av kreativa resurser att ske en gång per timme, men det är möjligt att minska denna frekvens på begäran av innehållsleverantören.

‍

Leveransdetaljer

Genom att följa dessa riktlinjer säkerställer du att ditt digitala innehåll fungerar smidigt på Bauer Media Outdoors plattformar och ger en enhetlig och responsiv upplevelse för publiken.

Deadline för material

Minst 10 arbetsdagar innan kampanjstart.

Certifierad DCO‑ och kreatörspartner

För att underlätta produktionen av material har vi certifierat DCO‑ och kreativ partner Madington på vår plattform. Certifieringen innebär testning och kvalitetssäkring av att deras teknik är kompatibel med våra digitala utomhusskärmar, så att annonser visas korrekt. Detta minskar materialdeadlinen till minst 5 arbetsdagar innan kampanjstart.

Dynamiskt innehåll

När innehållet består av flera motiv baserat på en trigger eller datapunkt måste en beskrivning av hur innehållet ska bete sig i de olika scenarierna skickas in tillsammans med materialet. Detta säkerställer att vi kan testa materialet korrekt.

Responsivt innehåll

När innehållet har förberetts för att automatiskt anpassa sig till olika dimensioner är det viktigt att inkludera teknisk information om vilka upplösningar som stöds. Bifoga även bildexempel på de förväntade resultaten.

Kompatibilitet

Ytterligare kompatibilitetsinformation hänvisas till dokumentationen för Chromium 87 när du kontrollerar specifika webbläsarfunktioner.

Utökad dokumentation för alla Broadsigns funktioner finns här:

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