AdSense in WordPress AMP Seiten einbinden

Accelerated Mobile Pages sind ein wichtiger Baustein in der “Mobile-First-SEO”. Selbst nahezu perfekt auf mobile Endgeräte optimierte WordPress Seiten können nicht mit der Performance der speziellen AMP Darstellungsform mithalten. Wer seine Einnahmen mit der Einbindung von AdSense Anzeigen generiert, möchte natürlich auch auf der AMP Seite nicht auf Google’s Performance Ads verzichten. Besonders einfach gestaltet sich AdSense Integration, wenn man ein AMP Plugin nutzt.

AdSense in AMP nutzen: super simpel dank Plugin

Bei der Einbindung von AdSense in Accelerated Mobile Pages habt ihr verschiedene Möglichkeiten:

  1. manuelle Integration von Anzeigenblöcken
  2. Integration von automatischen AdSense Anzeigen

Außerdem unterscheidet sich die Vorgehensweise danach, ob ihr ein AMP Plugin nutzt oder AMP manuell in WordPress integriert. Schneller und komfortabler geht es in jedem Fall mit einem Plugin, weshalb wir uns in dieser Anleitung auch darauf fokussieren wollen.

AdSense Anzeigenblöcke manuell erstellen

Zu allererst solltet ihr folgenden Code in den <head>-bereich der AMP Seite einfügen:

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

Dieser Code sorgt dafür, dass die notwendigen amp-ad-Bibliotheken geladen werden – Anzeigen werden so aber noch nicht ausgespielt. Wenn ihr ein Plugin wie AMP for WP nutzt, müsst ihr dazu lediglich zum Punkt AMP→ Settings → Advanced Settings navigieren und das Skript unter “Enter HTML in Head” einfügen.

Erstellt jetzt einen neuen responsiven Anzeigenblock in eurem AdSense Konto und ruft den Code ab. Momentan unterstützt AMP nur Text- und Displaynetzwerk-Anzeigen. In-Feed und In-Article-Ads könnt ihr demnach außer Acht lassen. Das Ganze sollte dann in etwa wie folgt aussehen:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!-- AMP-3 -->

<ins class="adsbygoogle"

     style="display:block"

     data-ad-client="ca-pub-1234567891234567"

     data-ad-slot="1234567891"

     data-ad-format="auto"

     data-full-width-responsive="true"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

Allerdings muss dieser Code nun ein wenig angepasst werden. Nutzt ihr das AMP for WP Plugin müsst ihr dazu nichts tun, außer die fett markierten Werte (hier nur Beispielwerte) unter dem Punkt Settings → Advertisement für die Position hinterlegen, an der die Anzeige ausgespielt werden soll. Aktiviert außerdem den „Responsive Ad unit“ Schieberegler.

Nutzt ihr hingegen das AMP Plugin von Automattic oder womöglich gar keines, müsst ihr den Anzeigencode manuell abändern. Verwendet dafür folgende Vorlage und ersetzt die Punkte “data-ad-client” und “data-ad-slot” durch eure eigenen Werte.

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

(Quelle: Google Support)

Eine schöne Anleitung, wie ihr den Code an den gewünschten Stellen einfügt, findet ihr zum Beispiel hier (leider nur in Englisch).

Automatische AdSense Anzeigen in AMP nutzen

Noch einfacher geht die Einbindung der Ads in AMP mit Googles Automatischen AdSense Anzeigen. Ruft dazu euer AdSense Konto auf und navigiert zum Punkt Content-Seiten → Automatische Anzeigen → Automatische Anzeigen für AMP. Dort bekommt ihr dann zwei Skripte angezeigt. Das erste müsst ihr in den <head>-Bereich eures AMP Templates kopieren:

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

Das zweite Skript platziert ihr dann im <body> der AMP Seite:

<amp-auto-ads type="adsense"
              data-ad-client="ca-pub-1234567891234567">
</amp-auto-ads>

Bei der Publisher ID (hier fett markiert) ist natürlich eure hinterlegt, wenn ihr den Code auf eurem AdSense Konto herauskopiert.

Im AMP for WP Plugin könnt ihr <body>- und <head>-Code unter Settings → Advanced Settings ergänzen.

Ohne das Plugin müsst ihr den Code in der functions.php des AMP-Templates hinterlegen. Eine Anleitung in Englisch gibt es hier.

Fabian
Fabian
Als Content-Manager & Autor kümmert sich Fabian seit dem Neustart von fastWP um die Erweiterung und (Neu)ausrichtung des Contents. Neben der Mitarbeit bei SeoFoxx - Internetmarketing schreibt der Wahlbayer mit preußischem Migrationshintergrund auch für andere Blogs und Magazine im Bereich Online-Marketing. In seiner Freizeit kümmert sich der 30-Jährige um sein eigenes Onlinemagazin, schwingt gerne die Kochlöffel und genießt die Natur in seiner Wahlheimat im Süden der Republik.

HINTERLASSEN SIE EINE ANTWORT

Please enter your comment!
Please enter your name here

fastWP

Finde den passenden WordPress Dienstleister in deiner Region!

Deine Werbung hier?

Nutze die Reichweite von fastWP und erreiche deine Zielgruppe!