Advantage er en open source-protokoll laget av Madington som standardiserer high-impact annonseformater (topscroll, midscroll o.l.). Dere installerer Advantage-biblioteket på sidene deres, og annonsene kommuniserer med det automatisk.

Vi bruker Advantage for vårt Double Midscroll Single Creative-format — en fullskjerm-annonse som scroller gjennom to skjermhøyder med scroll-drevne animasjoner.

npm i @get-advantage/advantage

Legg til dette i JavaScript-koden på sidene der annonser skal vises:

import { Advantage } from "@get-advantage/advantage"

const advantage = Advantage.getInstance()

Plasser en <advantage-wrapper> rundt annonseslottet der formatet skal vises:

<advantage-wrapper allowed-formats="DOUBLE_MIDSCROLL_SINGLE_CREATIVE">
  <div slot="advantage-ad-slot">
    <!-- Cavai-tag plasseres her (direkte eller via GAM) -->
  </div>
</advantage-wrapper>

Det er egentlig alt som trengs. Advantage registrerer wrapperen som et Custom Element automatisk, og all kommunikasjon mellom annonsen og wrapperen håndteres under panseret.

Hvis dere trenger å gjøre noe med siden når annonsen aktiveres (f.eks. skjule sticky-elementer), kan dere legge til en hook:

advantage.configure({
  formatIntegrations: [
    {
      format: "DOUBLE_MIDSCROLL_SINGLE_CREATIVE",
      setup: (wrapper, adIframe) => {
        // Skjul sticky-elementer som kan forstyrre annonsen
        return Promise.resolve()
      },
      reset: (wrapper, adIframe) => {
        // Gjenopprett endringene når annonsen er ferdig
      }
    }
  ]
})

Hvis annonser leveres via GAM, wrap GAM-slottet på samme måte. Bruk placeholder-størrelse 2x1:

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

<main>
  <h1>Artikkel</h1>
  <p>Innhold...</p>

  <!-- Midscroll-plassering -->
  <advantage-wrapper allowed-formats="DOUBLE_MIDSCROLL_SINGLE_CREATIVE">
    <div slot="advantage-ad-slot">
      <!-- Cavai-tag her -->
    </div>
  </advantage-wrapper>

  <p>Mer innhold...</p>
</main>

<script type="module">
  import { Advantage } from "@get-advantage/advantage"
  const advantage = Advantage.getInstance()
</script>

Bruk denne taggen for å verifisere at Advantage-oppsettet fungerer. Kreativet er et Double Midscroll Single Creative med scroll-animasjoner og en progress-indikator.

<script
  data-creative-id='51251-51861-52687-84532'
  data-timestamp='2026-06-29T11:10:19.999Z'
>
(function() {
  var s   = document.createElement('script');
  s.src   = 'https://delivery-3.cavai.com/assets/creatives/84532/cmh3g6etu0266etj4b9y6g20v/built/assets/stub.js?bust=%%CACHEBUSTER%%';
  s.async = true;
  s.setAttribute('data-click-macro', '%%CLICK_URL_UNESC%%');
  s.setAttribute('data-domain', '%%SITE%%');
  s.setAttribute('data-dsp', 'GAM');
  s.setAttribute('data-gdpr', '${GDPR}');
  s.setAttribute('data-gdpr-consent', '${GDPR_CONSENT_755}');
  document.head.appendChild(s);
})();
</script>

Slik verifiserer dere: Åpne nettleserens DevTools (F12 → Console) og sjekk hva som logges. Kreativet sender disse meldingene:

// Alt fungerer:
initialize ok= true
"DoubleMidscrollSingleCreative confirmed, starting ad"

// Advantage-wrapper mangler eller formatet avvises:
initialize ok= false
"DoubleMidscrollSingleCreative not confirmed"

Når det fungerer ser dere initialize ok= true i konsollen, og annonsen viser en progress-indikator som følger scrollingen. Her er en demo:

Ser det ut som i videoen, er alt riktig konfigurert. Hvis dere får initialize ok= false, sjekk at <advantage-wrapper> er på plass og at allowed-formats inkluderer DOUBLE_MIDSCROLL_SINGLE_CREATIVE.

• Advantage-dokumentasjon — fullstendig referanse
• Publisher-guide — Advantage sin egen oppsett-guide
• Double Midscroll Single Creative — format-dokumentasjon
• Advantage på GitHub — kildekode og eksempler