Implementering av annonskod

Skapa en AMP-kompatibel annonsenhet

I den här guiden visar vi hur du skapar en AMP-kompatibel annonsenhet för att visa AdSense-annonser på dina AMP-sidor.

AMP-annonsenheter i AdSense kan vara responsiva eller ha fast storlek. Vi rekommenderar att du använder responsiva AMP-annonsenheter. Anledningen är denna:

  • Storleken på responsiva AMP-annonsenheter anpassas automatiskt till enheten där de visas och tar hela skärmbredden i anspråk.
  • Google optimerar annonsens mått så att de fungerar bra på dina sidor.
Alla AdSense-funktioner (som blockeringskontroller, annonsbalansering, rapporter och annat) fungerar med AMP-annonser.

Innan du börjar

Se till att du har lagt till det obligatoriska AMP-skriptet på sidorna där du vill visa AMP-annonser.

  • Lägg till skriptet genom att kopiera och klistra in följande kod mellan <head></head> -taggarna i AMP-HTML-koden:

    <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

Skriptet läser in nödvändiga amp-ad-bibliotek men resulterar inte att det visas några annonser på AMP-sidan. För att visa annonser måste du dessutom lägga till AMP-kompatibel annonskod. Läs mer om amp-ad-komponenten här: https://www.ampproject.org/docs/reference/components/amp-ad

Skapa en responsiv AMP-kompatibel annonsenhet

För närvarande måste du skapa responsiva AMP-annonsenheter manuellt. Gör så här:

  1. Skapa en ny responsiv annonsenhet i ditt AdSense-konto.
  2. Leta reda på och anteckna följande information i annonskoden för den responsiva annonsenheten som du skapade i steg 1:
    • ditt utgivar-id (data-ad-client), till exempel ca-pub-1234567891234567
    • annonsenhetens id (data-ad-slot), till exempel 1234567890

    Visa exempel

    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
         style="display:inline-block;width:120px;height:600px"
         data-ad-client="ca-pub-1234567891234567"
         data-ad-slot="1234567890"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
  3. Skapa AMP-annonskoden.
    Kopiera följande annonskod och ersätt värdena för data-ad-client och data-ad-slot med dina egna värden från steg 2.
    <amp-ad width="100vw" height=320
      type="adsense"
      data-ad-client="ca-pub-1234567891234567"
      data-ad-slot="1234567890"
      data-auto-format="rspv"
      data-full-width>
        <div overflow></div>
    </amp-ad>
    Vi rekommenderar att du inte ändrar några andra delar av annonskoden ovan, eftersom det kan leda till att annonskoden slutar fungera.
  4. Klistra in AMP-annonskoden i HTML-källkoden på sidan där annonsen ska visas. Observera att både ovanför mitten och nedanför mitten är godtagbara annonsplaceringar. Kom ihåg att programpolicyerna för AdSense även gäller sidor som innehåller AMP-annonsenheter. 
    Tänk på att inte placera annonskoden i en överordnad behållare (<div>, <iframe> och liknande) med fast eller begränsad höjd. Det kan medföra att annonsen ändrar storlek och bryter sidlayouten.
  5. (Valfritt) När du har infogat annonskoden rekommenderar vi att du testar annonserna på olika mobila enheter för att se till att de responsiva egenskaperna fungerar som de ska.
    När du tittar på annonser på din egen AMP-sida kan det ske en fördröjning innan annonserna börjar visas, eftersom AMP prioriterar innehållet. Läs mer om hur AMP-sidor cachelagras.

Avancerade användningsfall: AMP-annonser med fast storlek, formatering av AMP-annonser och annat

Följ anvisningarna om hur du modifierar din responsiva AMP-annonskod om du vill ge AMP-annonsenheten en fast bredd eller höjd.

I mer avancerade situationer kan du utforma AMP-annonselementen på samma sätt som andra AMP-element. Läs mer om de olika sätten att bestämma layouten.

Följa resultatet av din AMP-annonsenhet

Du kan följa resultatet av dina AMP-annonsenheter i rapporten Innehållsplattform.

Var den här artikeln till hjälp?
Hur kan vi förbättra den?