Rewarded Video Specs
Video
Vejledning til Rewarded Video videokreativer
For at sikre, at en HTML-kreativ bliver vist og gengivet korrekt, skal koden følge en række tekniske krav. Denne guide dækker de mest almindelige anvendelser, herunder:
- Selvstændige HTML-kreativer
- Playable kreativer
- HTML-endcards
- Playable endcards til videokreativer
Anbefalinger til HTML-kreativer
Her er nogle vigtige best practices, som bør følges ved brug af HTML-kreativer:
Filstørrelse:
HTML-filen (index.html) må maksimalt fylde 10 KB.
Assets:
Du må indlæse op til 5 MB assets via CDN.
Det anbefales at samle alle assets i én enkelt .js-fil og anvende base64-kodning til billeder. Det reducerer antallet af netværksanmodninger og forbedrer indlæsningstiden.
Hvad skal vi bruge?
Koden kan enten være et simpelt HTML/JS-uddrag:
<a href="https://www.nike.com"> <img src="http://nike320x50.jpg"> </a><script src="https://display-ad.com/ad-location-js-file"></script><style>noget css-stil</style><img src="https://impression-pixel-url">…eller et komplet HTML-dokument som vist her:
<!DOCTYPE html><html><head><script type="text/javascript">window.SNOW_CTA_URL="{HTML_CLICK_URL}"; window.SNOW_ANALYTICS_URL="https://api-events.eventstracker.io/v1/ev?tp=direct&postback_type=playable&gaid={DEVICE_PLATFORM_ID}&idfa={DEVICE_PLATFORM_ID}&os={DEVICE_OS_NAME}&bid_id={CONVERSION_ID}&api_key={API_KEY}&can_claim=1";</script><script type="text/javascript" src="mraid.js"></script><title>Standardskabelon</title><meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"><link rel="stylesheet" href="https://b6b5p6y2.ssl.hwcdn.net/content/59e23abb-fb1f-4614-9ba5-f374ce0c8e97-index.css"><script src="https://b6b5p6y2.ssl.hwcdn.net/content/f9d00b1d-493e-485d-8952-d8ec064a69cd-game.js"></script></head><body><div id="mainContainer"><div id="loading"><div class="loadingContainer"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div><div id="cta"> INSTALLER </div></div></body></html>Kodetips:
- Undgå brug af <iframe>, da det kan give problemer med visning og rapportering.
- Brug ikke enkeltlinjekommentarer som // eller <!–.
- Sørg for at koden er minificeret.
- Alle eksterne ressourcer skal refereres med absolutte URL’er og bruge HTTPS.
Eksempel:
<img src="https://snowagency.com/snow_site/wp-content/uploads/2023/05/ab.jpeg" />Tips til assets:
- Indlæs assets inline via én .js-fil med base64-billeder for optimal performance.
- Brug JPG, PNG eller GIF til billeder og MP4 til videoer.
Sporing af klik
For at sikre korrekt kliksporing i SNOW-dashboardet, skal dine HTML-kreativer bruge klikmakroer. Den anbefalede metode er at benytte {HTML_CLICK_URL}.
Ønsker du i stedet at bruge en specifik landings-URL direkte i HTML’en, så skal {CLICK_URL}-makroen bruges foran en kodet destination, f.eks.:
Landingpage-URL:
https://www.snowagency.com
I HTML’en:
{CLICK_URL}https%3A%2F%2Fwww.snowagency.comMakroen {CLICK_URL} gør det muligt at spore klik, og den kodede URL kan være enhver gyldig landingpage – f.eks. en butiks-URL, deeplink, mobilwebside eller MMP-link.
Bemærk: Vi anbefaler klart at bruge {HTML_CLICK_URL} frem for {CLICK_URL}.
Krav til MRAID-kreativer
MRAID (Mobile Rich-Media Ad Interface Definitions) er en standard, der sikrer, at rich media-annoncer fungerer korrekt på tværs af mobile apps og enheder.
Alle ovenstående HTML-anbefalinger gælder også for MRAID-kreativer.
Teknisk opsætning:
Start dit MRAID-tag med at inkludere:
<script src="mraid.js"></script>Alt JavaScript, der interagerer med DOM’en, skal udføres efter mraid.ready() er kaldt.
Undgå at tilføje egne luk-knapper eller timere – disse leveres typisk af platformen.
Alle brugerinteraktioner, der skal åbne links, skal ske via mraid.open() i stedet for f.eks. href, window.open eller window.location. Dette er vigtigt for korrekt Clicktracking.
Brug HTTPS til alle URL’er, og brug mraid.getMaxSize() til at finde annonceformatets størrelse.
Clicktracking:
Hvis du vil tilføje Clicktracking, skal den kun aktiveres, når annoncen faktisk er synlig. Eksempel:
if (mraid.viewableChangeEventWasDetected()) {
if (mraid.isViewable() == true) {
fireMyImpressionTrackers();
} else if (mraid.isViewable() == false) {
doNothing();
}
}HTML/MRAID-kreativer som video-endcard
Du kan også bruge HTML/MRAID- eller Playable-kode som endcard i forbindelse med videokreativer.
Brug i dette tilfælde makroen {HTML_COMPANION_CLICK_URL} i stedet for {HTML_CLICK_URL}. Begge fungerer på samme måde, men førstnævnte bruges specifikt til Clicktracking på ledsagende annoncer.
Retningslinjerne er de samme som for almindelige HTML- eller Playable-kreativer.
Eksempel: Playable Endcard
Her er et simpelt eksempel på et Playable Endcard, der overholder alle anbefalinger:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<script src="mraid.js"></script>
<style>body{margin:0;background:#000;color:#fff;font-family:Arial}.cta-button{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);padding:10px 20px;background:#00f;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:16px}.game-area{width:100%;height:100vh;display:flex;align-items:center;justify-content:center;text-align:center}</style>
</head>
<body>
<div class="game-area">
<h1>Prøv spillet nu!</h1>
<button class="cta-button" onclick="mraid.open('{HTML_CLICK_URL}')">INSTALLER NU</button>
</div>
<script>function init(){mraid.ready()&&mraid.isViewable()&&console.log("Endcard er synlig og klar")}!function(){init()}();</script>
</body>
</html>Hvorfor fungerer det?
- Filen er kompakt og minificeret.
- Indeholder ikke <iframe> eller uønskede kommentarer.
- Bruger mraid.js og mraid.open() til klik.
- Al kommunikation foregår via sikre (HTTPS) links.
- Simpelt design med klar call-to-action (CTA).