Cavai Docs

Appearance

Advantage -- Meeting Cheat Sheet ​

Sist oppdatert: 2026-03-11 Kilde: Intern dokumentasjon + get-advantage.org/docs + GitHub kildekode

Innhold ​

Advantage for ikke-tekniske (kort forklaring) ​

Historisk har hvert reklameselskap hatt sin egen mate a levere high-impact annonser pa. Det betyr at publishere som vil stotte flere leverandorer ma implementere hver enkelt separat -- mye ekstraarbeid.

Advantage loser dette. Det er en apen bransjestandard som standardiserer hvordan high-impact formater fungerer. Publisheren installerer Advantage en gang, og deretter fungerer annonser fra alle leverandorer som stotter standarden automatisk -- inkludert Cavai.

Kort sagt: Advantage er for high-impact annonser det som USB er for ladere -- en felles standard sa alle snakker samme sprak.

Utvidet versjon ​

Vanlige bannerannonser er smaa rektangler som ligger stille pa en nettside. High-impact formater er noe annet -- de tar mye mer plass, har bevegelse og skaper en sterkere visuell opplevelse. Tenk store annonser som glir inn nar du scroller, eller som dekker toppen av siden med en elegant parallax-effekt.

Problemet har vaert at hvert reklameselskap har sin egen mate a gjore dette pa. Det betyr mye ekstraarbeid for publishere som skal stotte flere leverandorer.

Advantage loser dette. Det er en apen bransjestandard -- et felles "sprak" som alle kan bruke. Publisheren installerer Advantage en gang, og deretter fungerer high-impact annonser fra alle leverandorer som stotter standarden -- inkludert Cavai.

Formatene i praksis:

  • Topscroll -- en stor annonse oeverst pa siden som brukeren scroller forbi med en elegant parallax-effekt. Perfekt for merkevarebygging.
  • Midscroll -- en fullskjerm-annonse som dukker opp midt i artikkelen nar brukeren scroller. Innholdet pa siden "avslorer" annonsen under seg.
  • Double Midscroll -- som Midscroll, men med dobbel hoyde. Annonsen kan animere innhold basert pa hvor langt brukeren har scrollet -- som en liten interaktiv historie.

For publisheren betyr det: installer et lite script, legg til noen HTML-elementer der annonsene skal vises, og alt fungerer automatisk. Ingen tunge tekniske integrasjoner.

Hva er Advantage -- 30-sekunders pitch ​

Advantage er en open source-protokoll (@get-advantage/advantage) som standardiserer high-impact annonseformater. Den lar publisister og annonsører snakke samme språk via en sikker meldingskanal (MessagePort/postMessage).

Ansvarsfordelingen:

  • Publisherens wrapper styrer det visuelle formatet (parallax, sticky, clip-path, scroll-area)
  • Kreativet (vår tag) styrer innholdet og animasjonene

Publisheren installerer Advantage + legger inn <advantage-wrapper> elementer i HTML. Vår tag kommuniserer automatisk med wrapperen via protokollen -- publisheren trenger ikke vite noe om Cavai spesifikt.

Formater vi leverer (single-tag) ​

FormatEnum-verdiDimensjonerVisueltScroll Progress
TopscrollTOPSCROLL100% bredde, 70% viewport-høydeSticky header med parallax. Lukkeknapp + "scroll ned"-pil fra wrapperenNei
MidscrollMIDSCROLL100% bredde, 100% viewport-høydeMidt i innholdet, fast posisjon med clip-path parallax-illusjonNei
Double Midscroll SCDOUBLE_MIDSCROLL_SINGLE_CREATIVE100% bredde, 200% viewport-høyde200vh scroll-area, kreativet mottar kontinuerlig scroll progress (0--1)Ja

Hva vi IKKE leverer via single-tag ​

  • DoubleMidscroll (standard) -- krever to separate tagger (foreground + background), passer ikke vår leveransemodell
  • TripleMidscroll -- samme problem, krever to tagger
  • WelcomePage -- fullskjerm overlay med lukkeknapp, støttes av Advantage men vi har ikke implementert det

Scroll Progress -- kun DoubleMidscrollSingleCreative ​

  • Wrapperen sender SCROLL_PROGRESS-meldinger via MessagePort mens brukeren scroller
  • Verdi: 0.0 (toppen av scroll-area) til 1.0 (bunnen)
  • Kreativet bruker dette til scroll-drevne animasjoner (parallax, fade-ins, scene-overganger)
  • For Topscroll/Midscroll: wrapperen håndterer all parallax-effekt, kreativet mottar ingen scroll-events

Meldingsprotokoll (hva som skjer mellom tag og wrapper) ​

Cavai-kreativ (iframe)                    Publisher (advantage-wrapper)
       |                                           |
  1.   |-- START_SESSION (med MessagePort) ------->|
       |                                           |
  2.   |<---------------------- CONFIRM_SESSION ---|
       |                                           |
  3.   |-- REQUEST_FORMAT ("TOPSCROLL") ---------->|
       |                                           | wrapper.morphIntoFormat()
       |                                           | -> setter opp CSS, UI, scroll
  4.   |<--------------------- FORMAT_CONFIRMED ---|
       |                                           |
       |   (Kun for DMSC:)                         |
  5.   |<-------------- SCROLL_PROGRESS (0.42) ----|
       |<-------------- SCROLL_PROGRESS (0.43) ----|
       |   ...                                     |

Alle meldingstyper (enum AdvantageMessageAction):

ActionRetningBeskrivelse
START_SESSIONKreativ -> WrapperStarter sesjon, sender MessagePort
CONFIRM_SESSIONWrapper -> KreativBekreft at wrapperen er klar
REQUEST_FORMATKreativ -> WrapperBer om spesifikt format
FORMAT_CONFIRMEDWrapper -> KreativFormatet er aktivert
FORMAT_REJECTEDWrapper -> KreativWrapperen støtter ikke formatet
SCROLL_PROGRESSWrapper -> KreativScroll-posisjon 0.0--1.0 (kun DMSC)

Hva publisheren må gjore ​

1. Last inn Advantage-biblioteket ​

html
<script type="module">
  import { Advantage } from 'https://cdn.jsdelivr.net/npm/@get-advantage/advantage@0.11/dist/bundles/advantage.js';
  const advantage = Advantage.getInstance();
</script>

Eller via npm: npm i @get-advantage/advantage

2. Legg inn <advantage-wrapper> i HTML ​

html
<!-- Topscroll oeverst pa siden -->
<advantage-wrapper allowed-formats="TOPSCROLL">
  <div slot="advantage-ad-slot">
    <!-- Cavai-tag eller GAM ad slot her -->
  </div>
</advantage-wrapper>

<!-- Midscroll midt i innholdet -->
<advantage-wrapper allowed-formats="MIDSCROLL, DOUBLE_MIDSCROLL_SINGLE_CREATIVE">
  <div slot="advantage-ad-slot">
    <!-- Cavai-tag eller GAM ad slot her -->
  </div>
</advantage-wrapper>

Viktige detaljer:

  • <advantage-wrapper> er en Custom Element (Web Component) som registreres automatisk av biblioteket
  • allowed-formats begrenser hvilke formater som kan aktiveres i den wrapperen (kommaseparert)
  • Uten allowed-formats aksepterer wrapperen alle formater
  • Kan oppdateres dynamisk: wrapper.setAllowedFormats(["MIDSCROLL"])
  • Vanlige annonser (uten Advantage) vises normalt uten at wrapperen trigger noe

3. Valgfritt: konfigurer format-opsjoner ​

javascript
advantage.configure({
  formatIntegrations: [
    {
      format: 'TOPSCROLL',
      options: {
        height: 70,                       // Viewport-hoyde i % (default: 80)
        closeButtonText: 'Lukk annonse',   // Norsk tekst
        autoCloseDuration: 0               // 0 = aldri auto-lukk (default: 12s)
      },
      setup: (wrapper, adIframe) => {
        // Skjul sticky headere el.l. som kan kollidere
        return Promise.resolve();
      }
    }
  ]
});

4. GAM-integrasjon (hvis relevant) ​

Placeholder-sizer i GAM -- IKKE faktiske pikselstorrelser:

FormatGAM-storrelseMerknad
Topscroll1x2Standard placeholder
Midscroll1x1Standard placeholder
Double Midscroll SC2x1Skiller seg fra vanlig midscroll

Publisheren kan bruke egne sizer sa lenge de er unike og ikke kolliderer med IAB-sizer.

GAM-eksempel:

html
<advantage-wrapper allowed-formats="TOPSCROLL">
  <div slot="advantage-ad-slot">
    <div id="gam-topscroll-slot">
      <script>
        googletag.cmd.push(function() {
          googletag.defineSlot('/publisher/topscroll', [1, 2], 'gam-topscroll-slot')
            .addService(googletag.pubads());
          googletag.pubads().enableSingleRequest();
          googletag.enableServices();
          googletag.display('gam-topscroll-slot');
        });
      </script>
    </div>
  </div>
</advantage-wrapper>

Topscroll-opsjoner (det de mest sannsynlig spor om) ​

OpsjonDefaultBeskrivelse
height80Hoyde i % av viewport (svh)
closeButtontrueVis lukkeknapp
closeButtonText"Close ad"Tekst pa lukkeknapp (kan settes til norsk)
downArrowtrueVis "scroll ned"-pil
autoCloseDuration12Sekunder for auto-lukk. 0 = aldri
closeButtonAnimationDuration0.5Lukkeanimasjon i sekunder
adLabel-Valgfri "Annonse"-label

Midscroll og DoubleMidscrollSingleCreative har ingen spesielle opsjoner -- wrapperen handterer alt automatisk.

Vanlige sporsmal (FAQ) ​

"Hva trenger vi a gjore pa var side?" ​

  1. Legg til Advantage-scriptet (en linje, CDN eller npm)
  2. Plasser <advantage-wrapper> elementer der annonsene skal vises
  3. Sett Cavai-taggen (eller GAM-slot) inni wrapperen
  4. Ferdig -- resten handteres av protokollen automatisk

"Maa vi endre noe i vart CMS?" ​

De trenger a kunne legge til HTML/JS pa sidene sine. Wrapperen er ren HTML (Custom Element) og Advantage-scriptet er en enkel import. Ingen server-side endringer.

"Fungerer det med Google Ad Manager?" ​

Ja. Cavai-taggen plasseres som creative i GAM med placeholder-sizer (1x2, 1x1, 2x1). GAM-ad-slottet legges inni <advantage-wrapper>.

"Hva skjer om wrapperen ikke stotter formatet vi sender?" ​

Wrapperen svarer med FORMAT_REJECTED. Kreativet kan falle tilbake til standard visning. Ingen crash, ingen feil.

"Kan vi begrense hvilke formater som vises hvor?" ​

Ja, bruk allowed-formats attributten pa wrapperen. F.eks. allowed-formats="TOPSCROLL" betyr at kun Topscroll aksepteres i den plasseringen.

"Er det sikkert? Kan annonsen ta over siden?" ​

Advantage er secure by default. All kommunikasjon skjer via MessagePort (ikke direkte DOM-tilgang). Kreativet kjorer i en iframe og kan ikke manipulere publisherens DOM.

"Kan vi tilpasse lukkeknappen, hoyde, osv?" ​

Ja, via formatIntegrations i Advantage-konfigen. Se opsjonstabell for Topscroll over.

"Hva er forskjellen pa DoubleMidscroll og DoubleMidscrollSingleCreative?" ​

  • DoubleMidscroll: To separate tagger (foreground + background iframe), kommuniserer via BroadcastChannel
  • DoubleMidscrollSingleCreative: En tag, mottar kontinuerlig scroll progress (0--1), alt i en fil. Dette er det vi bruker.

"Kan vi bruke Advantage uten Cavai?" ​

Ja, Advantage er en apen protokoll. Hvem som helst kan lage kreativer som snakker med wrapperen. Men med Cavai far de et komplett byggesystem med no-code kreativproduksjon.

"Stottes det pa mobil?" ​

Ja, alle formater er responsive. Topscroll/Midscroll tilpasser seg automatisk. Vi anbefaler at publisheren tester pa mobil for a sjekke at sticky headere o.l. ikke kolliderer med formatet.

Var leveransemodell ​

Taggen vi leverer ser identisk ut som en vanlig Cavai-tag:

html
<script data-creative-id='46-238-472-1052' data-timestamp='...'>
(function() {
  var s = document.createElement('script');
  s.src = 'https://delivery-3.cavai.com/assets/creatives/1052/.../stub.js?bust=...';
  s.async = true;
  document.head.appendChild(s);
})();
</script>

Forskjellen er intern: bundelen inneholder Advantage-kode som automatisk starter sesjon med wrapperen og ber om riktig format.

Nyttige lenker a dele ​

HvaURL
Advantage docshttps://get-advantage.org/docs
Advantage GitHubhttps://github.com/get-advantage/advantage
Advantage npmhttps://www.npmjs.com/package/@get-advantage/advantage
Publisher quick starthttps://get-advantage.org/docs/tutorial/publisher
Live demo (StackBlitz)https://stackblitz.com/github/get-advantage/advantage/tree/main

Ting a huske i motet ​

  • Advantage er open source -- ikke proprietaert Cavai-teknologi. Det er en bransjestandard.
  • Publisheren implementerer wrapperen EN gang, og alle annonsorer som bruker Advantage-protokollen fungerer automatisk.
  • Vi leverer en tag per format. Ingen komplisert multi-tag-oppsett.
  • Bibliotek-versjon i bruk: @get-advantage/advantage ^0.11.0
  • Det finnes et Slack-fellesskap for Advantage: Slack invite

Internal documentation

Cavai