Arbeitsbereich

Implementierungsleitfaden

Anzeigen auf AMP-Seiten

AMP ads (amp-ad, amp-auto-ads, amp-sticky-ad)

So zeigen Sie Anzeigen auf AMP-Seiten mit amp-ad, automatischen Anzeigen und fixierter Leiste, in AdSense und Ad Manager.

  • AdSense
  • Ad Manager
  • Smartphone und Desktop (auf AMP-Seiten)
Das Format kennenlernenAuf meiner Website prüfen
Desktop
Smartphone

In 1 Minute erklärt

Was sind Anzeigen auf AMP-Seiten?

AMP ist eine Methode, sehr leichte und schnelle Seiten zu bauen, entwickelt als offenes Projekt. Stellen Sie sich eine Brotdose mit Fächern vor: Jedes Ding hat sein Fach, und man kann nicht einfach alles hineinwerfen. Auf einer AMP-Seite ist es genauso. Sie können nicht beliebigen Anzeigencode einfügen. Stattdessen nutzen Sie fertige Bausteine, sogenannte Komponenten, die schon wissen, wie sie Anzeigen anfordern und zeigen, ohne die Seite schwer zu machen.

Es gibt drei Hauptbausteine. Das amp-ad ist der normale Anzeigenplatz, wie ein Banner: Sie geben den Netzwerktyp an, adsense für AdSense oder doubleclick für Ad Manager, und die Breite und Höhe. Das amp-auto-ads ist der automatische Modus: Es erhält eine Konfiguration vom Netzwerk und wählt selbst, wo Anzeigen stehen, unter Beachtung einer Höchstzahl und eines Mindestabstands. Das amp-sticky-ad ist der Streifen, der unten am Bildschirm klebt, wie ein Anker, und eine Schließen-Schaltfläche hat.

Der Code des Anzeigennetzwerks läuft nicht direkt in der Seite. Er läuft in einem separaten Feld, einem iFrame, das AMP selbst kontrolliert. Kommt keine Anzeige an, versucht AMP, den leeren Platz auszublenden, blendet aber keinen Platz aus, der im Bildschirm liegt, damit die Seite nicht springt. AMP-Anzeigen dürfen auch nicht in Feldern mit fester Position stehen, außer den eigenen fixierten Anzeigen von AMP und dem amp-lightbox.

Google erklärt, dass AMP ein offenes Projekt für schnelle, gut funktionierende Seiten auf jedem Gerät ist. In AdSense erstellen Sie einen Anzeigenblock und wählen den AMP-Code oder aktivieren die Automatischen Anzeigen für AMP. In Ad Manager erzeugen Sie AMP-Tags direkt im Dashboard, und Google empfiehlt HTML-Anzeigen für AMP. Es lohnt sich, wenn Ihre Website schon AMP-Versionen der Seiten hat und diese ebenfalls Anzeigen zeigen sollen.

Schritt für Schritt

So setzen Sie es um

  1. Komponenten im Head ladenFügen Sie im Head der AMP-Seite das Script des amp-ad ein. Bei automatischen Anzeigen oder fixiertem Streifen fügen Sie auch die Scripts von amp-auto-ads und amp-sticky-ad ein.
  2. AdSense: AMP-Block erstellenKlicken Sie in AdSense auf Anzeigen, Nach Anzeigenblock und Display-Anzeigen. Vergeben Sie einen Namen, lassen Sie Responsiv aktiviert, klicken Sie auf Speichern und Code abrufen und dann auf AMP. Das Skript kommt in den head und der Anzeigencode in den body.
  3. AdSense: automatische Anzeigen für AMP einschaltenKlicken Sie unter Anzeigen auf Haben Sie eine AMP-Website?, aktivieren Sie Automatische Anzeigen für AMP und klicken Sie auf AMP-Code abrufen. Fügen Sie das Skript in den head und den Code direkt nach dem öffnenden body-Tag jeder Seite ein. Klicken Sie dann auf Fertig und Anwenden.
  4. Ad Manager: AMP-Tag generierenKlicken Sie auf Inventar und dann auf Anzeigenblöcke, öffnen Sie den Block und gehen Sie zum Tab Tags. Wählen Sie AMP-Tag und klicken Sie auf Weiter. Aktivieren Sie AMP-Platzhalter, um Platzhalter und Fallbacks einzubinden, und wählen Sie die Größen des Blocks.
  5. AMP-Seite mit der normalen verbindenVerweisen Sie auf der normalen Seite mit dem Markup amphtml auf die AMP-Version. Verweisen Sie auf der AMP-Seite mit dem Markup canonical zurück auf die normale.
  6. Warten und prüfenDie Anzeigen können einige Minuten und manchmal bis zu eine Stunde brauchen, bis sie erscheinen.

Umgesetztes Beispiel

Der Code und wie es auf dem Bildschirm aussieht

Die Scripts der Komponenten kommen in den Head. Das amp-auto-ads kommt direkt nach dem Öffnen des Body, und die übrigen Anzeigen kommen in den Body, dorthin, wo sie erscheinen sollen.
<!-- No <head> da página AMP -->
<script async custom-element="amp-ad"
  src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
<script async custom-element="amp-auto-ads"
  src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>
<script async custom-element="amp-sticky-ad"
  src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"></script>

<body>
  <!-- AdSense: anúncios automáticos, logo depois de abrir o body -->
  <amp-auto-ads type="adsense"
    data-ad-client="ca-pub-0000000000000000">
  </amp-auto-ads>

  <!-- AdSense: bloco responsivo, onde o anúncio deve aparecer -->
  <amp-ad width="100vw" height="320"
    type="adsense"
    data-ad-client="ca-pub-0000000000000000"
    data-ad-slot="1234567890"
    data-auto-format="rspv"
    data-full-width>
    <div overflow></div>
  </amp-ad>

  <!-- Ad Manager: faixa fixa embaixo (só uma por página) -->
  <amp-sticky-ad layout="nodisplay">
    <amp-ad width="320" height="50"
      type="doubleclick"
      data-slot="/1234567/exemplo">
    </amp-ad>
  </amp-sticky-ad>
</body>
Auf dem DesktopDas amp-ad nimmt den Platz mit der festgelegten Breite und Höhe ein, wie ein normales Banner. Der fixierte Streifen des amp-sticky-ad klebt unten, in voller Breite und mit höchstens 100 Pixeln Höhe.
Auf dem SmartphoneDer responsive AdSense-Block nimmt die Bildschirmbreite ein. Der fixierte Streifen liegt unten, lässt sich schließen, und am Seitenende gibt AMP zusätzlichen Platz, damit er den Inhalt nicht verdeckt.

Was Google empfiehlt

Erlaubt und nicht erlaubt

Erlaubt

  • Das amp-ad mit dem Typ adsense oder doubleclick verwenden und Breite und Höhe angeben.
  • Responsive AdSense-Blöcke verwenden, die Google als gewählt zu lassen empfiehlt.
  • Das amp-auto-ads mit AdSense verwenden und im Dashboard die Formate ausschalten, die Sie auf AMP-Seiten nicht wollen.
  • Einen fixierten amp-sticky-ad-Streifen pro Seite haben, mit nur einem amp-ad darin.
  • Einen Platzhalter zeigen, während die Anzeige lädt, und einen Fallback, wenn keine kommt.
  • In Ad Manager AMP-Anzeigen aktualisieren, die Fast Fetch nutzen, mit einem Mindestintervall von 30 Sekunden.

Nicht erlaubt

  • Das amp-ad in Felder mit fester Position setzen, außer bei fixierten Anzeigen und dem amp-lightbox.
  • Mehr als ein amp-sticky-ad auf derselben Seite haben.
  • Einen transparenten oder halbtransparenten Hintergrund beim fixierten Streifen verwenden. AMP ersetzt ihn durch eine einfarbige Farbe.
  • Anzeigen oder Embeds ohne HTTPS ausliefern.
  • In Ad Manager die Aktualisierung zusammen mit der Einzelanfrage (SRA) einschalten. Die Aktualisierung wird ausgeschaltet, und es erscheint ein Fehler.
  • Das amp-ad direkt in einer Web Story verwenden. Web Stories nutzen das amp-story-auto-ads.

Tipps

So machen Sie es richtig

Vorsicht

Häufige Fehler

Script außerhalb des Head

Das Script jeder Komponente kommt in den Head und die Anzeige in den Body. Ohne das richtige Script funktioniert die Komponente nicht.

Beispielcode kopieren

AdSense liefert den fertigen AMP-Code, wenn Sie die Option AMP wählen. Kopieren Sie den Code aus Ihrem Konto, mit Ihrer Publisher-ID.

Falsch aufgebauter fixierter Streifen

Das amp-sticky-ad braucht das Layout nodisplay und genau ein amp-ad darin.

Lose AMP-Seite

AdSense verlangt, dass die normale und die AMP-Seite mit den Markups amphtml und canonical aufeinander verweisen.

Häufige Fragen

Kann ich den normalen AdSense-Code auf einer AMP-Seite nutzen?

Verwenden Sie den AMP-Code. Auf AMP-Seiten läuft das JavaScript des Anzeigennetzwerks nicht direkt in der Seite, sondern in einem von AMP kontrollierten iFrame.

Was passiert, wenn keine Anzeige kommt?

AMP versucht, den Platz auszublenden. Gelingt das nicht, zeigt es den Fallback. Der fixierte Streifen ohne Anzeige erscheint nicht.

Aktualisiert Ad Manager Anzeigen in AMP?

Ja, bei Anzeigen mit Fast Fetch. Sie setzen im Head ein Markup mit dem Intervall von mindestens 30 Sekunden, pro Seite oder pro Slot. Es funktioniert nicht zusammen mit SRA.

Wie lange dauert es, bis die Anzeigen erscheinen?

In der Regel einige Minuten, manchmal bis zu eine Stunde.

Bibliothek

Offizielle Google-Quelle

Alles auf dieser Seite folgt der offiziellen Google-Dokumentation. Lesen Sie direkt in der Quelle:

Nutzt Ihre Website dieses Format richtig?

Das Audit liest die Website wie ein Besucher, ohne etwas anzuklicken, und zeigt, was zu korrigieren ist.

Audit starten