Plattform

Bygga high impact-format

Hur formaten topscroll, midscroll, skin, reel och display ser ut och fungerar, hur en HTML5-annons byggs för dem, och ett startpaket för byråer och kodagenter.

Senast uppdaterad 31 oktober 2026

Aeon Ad Manager har egna high impact-format, de stora annonserna som fyller skärmen när läsaren scrollar. Den här sidan beskriver:

hur varje format ser ut och beter sig;
vad en byrå levererar för varje format;
hur en rörlig HTML5-annons pratar med sidan.

Den är skriven för dem som bygger annonserna och för kodagenterna de arbetar med.

Alla detaljer finns i två filer på engelska, lagom stora för en agents kontext:

agentbriefen: hela uppdraget steg för steg;
formatguiden: alla format och regler.

Startpaketet innehåller båda, plus mallar, en simulator och en kontroll.

Så fungerar formaten

Sajten ritar ramen, annonsören fyller den. Sajten ritar:

fönstret som annonsen syns genom;
raderna med “Annons”;
pilen, stängknapparna och reelens dialogruta.

Själva annonsen är antingen:

bilder som laddas upp till sajtens mediebibliotek;
ett HTML5-paket, en ZIP-fil som alltid har affischbilder med sig.

En HTML5-annons körs i en låst ram. Den kommer inte åt sajten, nätet eller läsarens uppgifter. Sidan berättar för annonsen hur stor den är, hur långt läsaren har scrollat, om den syns och vilken bild som visas, och annonsen ber sidan att öppna en länk. Det gör att klicken räknas och att sajten är skyddad.

Varje annons kan förhandsvisas innan den publiceras. En förhandsvisningslänk visar annonsen på en riktig sida på sajten i sju dagar, även medan annonsen är ett utkast. Inget räknas, och ett klick visar bara vart det skulle ha gått.

Topscroll

Det första på sidan är en scen över hela skärmens bredd, 72 % av höjden på en dator och 80 % på en mobil. Den står still på skärmen: när läsaren scrollar glider sajten upp över den som en ridå. Sajten lägger till en rund pil som scrollar vidare, och en rad med “Annons” och “Scrolla vidare”.

Leverera:

en affisch för dator på 1920×800, med budskapet i mitten (1200×560) och mitten längst ned fri för pilen;
en affisch för mobil på 1080×1800;
om du vill, ett HTML5-paket som fyller scenen.

Midscroll

Ett fönster mitt i artikeln. Bakom det står en scen lika stor som hela skärmen. Fönstret följer med texten, så läsaren passerar annonsen som genom ett hål i sidan. Fönstret är 70 % av skärmens höjd på en dator och 80 % på en mobil. Det går kant i kant (full) eller är lika brett som sajtens ram (content), och på mobil är det alltid helt brett.

Leverera:

en affisch för dator på 1920×1080 och en för mobil på 1080×1920;
budskapet i de mittersta 60 % av höjden;
om du vill, ett HTML5-paket lika stort som skärmen.

Sidan rapporterar scrollförloppet från 0, när fönstret kommer in längst ned, till 1, när det försvinner upptill.

Skin

Bilder på båda sidor om sajten, som står still när sidan scrollas, och om man vill ett band ovanför innehållet som scrollar bort med sidan. Skins visas bara på skärmar som är minst 1280 px breda. Varje sida är så bred som skärmen ger plats för: 170 px vid 1440 och 410 px vid 1920 med en sajt som är 1100 px bred.

Lägg logotyp och en kort rad i de 160 px som ligger närmast innehållet. Många sajter har ett sidhuvud över hela bredden, så budskapet hör hemma i sidans nedre halva. Sajtens tema måste hålla innehållet inom skinens innehållsbredd, så skins visas på de sidor som tidningen har förberett för dem.

Leverera:

en vänster och en höger bild på 1100×2560, och om man vill ett band på 2200×300;
om du vill, ett HTML5-paket.

En HTML5-skin:

är en enda ram lika stor som fönstret, lagd över sidan men urskuren över innehållet. Bara sidorna och bandet syns och går att klicka på;
får veta var innehållet ligger och hur långt sidan har scrollats, så att bandet kan scrolla bort medan sidorna står kvar.

Reel

En rad med 3 till 5 stående kort i artikeln. Ett tryck öppnar en berättelse i helskärm på det kortet, med bakåt, framåt, en räknare och en stängknapp. Piltangenterna fungerar också.

Leverera:

3 till 5 bilder på 1080×1920, som också är korten i raden;
en reservbild;
om du vill, ett HTML5-paket för hela berättelsen, responsivt eller i 9:16.

Display

En vanlig annonsruta med fast storlek, till exempel 300×250, 300×600 eller 970×250, som krymper i en smal spalt. Den kan också vara responsiv: lika bred som spalten, med den höjd som annonsen ber om.

Formaten i mobilen

Tre mobilskärmar från demosajten Aeon Daily: en stående topscroll ovanför sajtens sidhuvud, en midscroll i en artikel och en öppnad reel. — I mobilen använder topscroll och midscroll sin stående affisch eller sitt stående paket, och reelen öppnas i helskärm.

Det finns också interstitial, layer, sticky, karusell och native. De använder bara bilder.

Bygga en HTML5-annons

Ett paket är en ZIP-fil med:

index.html;
manifest.json, med namn, storlek, format, utgångar och animationens längd;
en reservbild;
annons-SDK:n aeon-creative.js;
annonsens egna filer.

Gränser:

högst 5 MB packat och 3,5 MB uppackat; sikta på under 1 MB vid första laddningen;
typsnitt i WOFF eller WOFF2;
ingenting som laddas utanför paketet.

Sidan och annonsen pratar med meddelanden:

Från sidan	När
`init`	annonsens storlek, formatet, utgångarna och om läsaren vill ha mindre rörelse; för skin var innehållet ligger, för reel vilken bild som visas
`scroll`	hur långt läsaren har scrollat förbi annonsen, från 0 till 1; för skin också sidans scrollposition
`pause`, `resume`	när annonsen lämnar skärmen eller kommer tillbaka, eller fliken döljs
`slide`	vilken bild i en reel som visas

Från annonsen	Vad det gör
`ready()`	visar annonsen. Måste komma inom 4 sekunder, annars ser läsaren affischen
`click(exit)`	öppnar en landningssida, till exempel `main` eller `product`, och bara vid ett riktigt tryck eller klick
`resize(height)`	sätter höjden på en responsiv display
`go(index)`	byter bild i en reel

Samma regler gäller för alla annonser:

ljud bara efter att läsaren har interagerat;
animation i högst 30 sekunder och 5 varv;
en stillastående version för läsare som vill ha mindre rörelse;
all animation stannar när sidan säger paus.

Startpaketet

Startpaketet innehåller:

Mallar för topscroll, midscroll, skin, reel och display, var och en en fungerande annons att utgå från.
En simulator som kör sajternas egen annonskod på en testsida. Den lägger annonsytan där sajten skulle göra det, loggar alla meddelanden åt båda håll, och har ett mobilfönster, en mörk sida och skinens band.
En kontroll och ett paketeringsverktyg, med samma regler och samma felmeddelanden som sajten.
Agentbriefen och formatguiden.

Startpaketets simulator: midscrollmallen i innehållsbredd på en enkel testsida, med en mörk panel för att välja format, paket och bredd och en logg över meddelandena mellan sidan och annonsen. — Simulatorn med midscrollmallen. Loggen visar vad sidan skickar och vad annonsen svarar.

# Kör annonsen i simulatorn och öppna sedan
# http://localhost:8090/host/?package=/package/&format=midscroll
node tools/serve.mjs ../min-annons

# Kontrollera den med sajternas egna regler
node tools/check.mjs ../min-annons --format midscroll

# Packa den för leverans
node tools/pack.mjs ../min-annons ../min-annons.zip

Startpaketet kräver Node.js 18 eller senare och inget annat.

Leverera annonsen

En byrå, eller dess kodagent, levererar via Ad Managers REST-API med en användare som har rollen Annonsbyrå:

Ladda upp affischerna och paketet. En provkörning kontrollerar paketet först.
Skapa annonsen som utkast, med sitt material.
Skicka förhandsvisningslänken till tidningen.
Efter klartecken: boka annonsen eller lägg den i en grupp, och aktivera den.

Tidningen ser och kan ändra allt i Ad Manager.