fbpx
Nerf gun dynamisk endcard

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.com

Makroen {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).