Advantage -- Publisher-guide for Amedia

Hva er Advantage?

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.

Advantage-dokumentasjon: https://get-advantage.org/docs/index

Hva dere trenger å gjøre

1. Installer biblioteket

npm i @get-advantage/advantage

Mer detaljer: https://get-advantage.org/docs/tutorial/publisher

2. Importer og initialiser

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

const advantage = Advantage.getInstance()

3. Plasser wrapper-elementet der annonsen skal vises

Wrap annonseslottet med <advantage-wrapper>:

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

allowed-formats bestemmer hvilke formater som er tillatt i dette slottet. For vårt format bruker dere DOUBLE_MIDSCROLL_SINGLE_CREATIVE.

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

4. (Valgfritt) Tilpass oppførsel

Hvis dere trenger å gjøre noe med siden når annonsen aktiveres (f.eks. skjule sticky-elementer), kan dere legge til en setup/reset-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
      }
    }
  ]
})

Mer om formatet: https://get-advantage.org/docs/formats/double_midscroll_single_creative

5. GAM-integrasjon

Hvis annonser leveres via Google Ad Manager, wrap GAM-slottet på samme måte:

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

Placeholder-størrelse for GAM: 2x1 (standard for dette formatet).

Komplett minimalt eksempel

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

Kort oppsummert

1. npm i @get-advantage/advantage
2. Importer og kall Advantage.getInstance()
3. Wrap annonseslottet med <advantage-wrapper allowed-formats="DOUBLE_MIDSCROLL_SINGLE_CREATIVE">
4. Ferdig -- resten håndteres automatisk av Advantage og Cavai-taggen

Lenker

• Advantage-dokumentasjon: https://get-advantage.org/docs/index
• Publisher-guide: https://get-advantage.org/docs/tutorial/publisher
• Double Midscroll Single Creative: https://get-advantage.org/docs/formats/double_midscroll_single_creative
• Advantage på GitHub: https://github.com/get-advantage/advantage