WordPress: Adsense Werbung auf AMP Seiten anzeigen

Werbung ist eine Möglichkeit eine Webseite zu finanzieren. Damit Adsense auch auf den WordPress AMP Seiten angezeigt wird, ist ein kleiner Eingriff notwendig. Anschließend generieren auch eure AMP Seiten Adsense Einnahmen.

Adsense Werbung auf WordPress AMP Seiten anzeigen geht dabei sehr einfach. Hier im Beitrag lest ihr, wie ihr eure WordPress Seite dazu in 5 Minuten einrichtet.

Adsense Werbung auf WordPress AMP Seiten anzeigen

Damit ihr Adsense Werbung auf einer AMP Seite von WordPress anzeigen könnt, ist folgendes notwendig:

  1. Eine WordPress Webseite. Diese Anleitung wurde für WordPress in der Version 5.1 aktualisiert.
  2. Einen funktionierenden Google Adsense Account.
  3. AMP ist für eure WordPress-Seite eingerichtet. Am einfachsten geht es mit dem AMP Plugin von Automattic. Dieses nutze ich selbst hier für RandomBrick.de.

Sind die oben genannten Punkte erfüllt, kann es weiter gehen. Wenn nicht, müsst ihr euch darum kümmern. Fragen dazu könnt ihr unter diesem Beitrag stellen.

Anleitung: Google Adsense auf WordPress AMP Seiten anzeigen

Damit Adsense auf AMP Seiten von WordPress angezeigt wird, sind erst Änderungen unter Adsense notwendig. Anschließend müsst ihr etwas Code in einer Datei einfügen.

1. Google Adsense

Loggt auch unter google.com/adsense mit euren Anmeldedaten ein. Wechselt auf der linken Seite im Menü auf Anzeigen und öffnet dort die Option zu Automatische Anzeigen.

Unter Automatische Anzeigen zeigt Adsense euch einen Reiter mit Automatische Anzeigen für AMP an. Hier müsst ihr den Schalter unter Schritt 1 für AMP Seiten aktivieren. Anschließend zeigt Adsense euch Schritt 2 und 3 an.

Adsense für Werbung auf AMP-Seiten aktivieren
Adsense für Werbung auf AMP-Seiten aktivieren (Bild: Screenshot).

Unter Schritt 2 und 3 erhaltet ihr jeweils ein Skript und einen Anzeigecode, den ihr im Head und Body Bereich der AMP-HTML-Seite platzieren müsst. Dazu gleich mehr.

Code für Adsense Werbung auf WordPress AMP Seiten
Code für Adsense Werbung auf WordPress AMP Seiten (Bild: Screenshot).

Lasst die Adsense-Seite offen und wechselt nun zu eurem FTP-Programm. Ich nutze das kostenlose FileZilla, welches für Windows, macOS und Linux verfügbar ist.

2. Adsene Code in die WordPress Theme-Funktionen einfügen

Meine Empfehlung ist den Code in die WordPress Theme-Funktionen Datei einzufügen. Also in die functions.php. Diese findet ihr unter:

/eure-webseite/wp-content/themes/euer-theme

Anstatt den Code in das normale Theme zu kopieren, solltet ihr ein WordPress Child Theme erstellen. Das Child Theme schützt Änderungen im Code vor Theme-Updates. Nutzt ihr kein Child Theme führt ein Update des Theme zur Löschung aller Änderungen in der functions.php.

Wenn ihr mit dem Thema vertraut seid, findet ihr euer Child Theme unter dieser Adresse:

/eure-webseite/wp-content/themes/euer-theme-child

Ihr könnt die functions.php entweder über euer FTP Programm herunterladen und bearbeiten oder direkt in WordPress bearbeiten. Egal welchen Weg ihr wählt, erstellt vorher ein Backup.

Direkt in WordPress findet ihr die functions.php über die Navigation an der linken Seite unter: Design –> Theme-Editor. Auf der rechten Seite oben könnt ihr das zu bearbeitende Theme auswählen und die Datei.

Adsene in WordPress AMP Seiten
Theme-Funktionen in WordPress bearbeiten (Bild: Screenshot).

Öffnet die functions.php und fügt folgenden Code unter dem schon vorhandenen Codes in der functions.php ein:

<?php
/**
* Fügt Adsense automatische Anzeigen Code in den AMP HTML Body ein.
*/
function bb_amp_add_auto_ads_code( $content ) {
 
    $publisher_id = 'ca-pub-xxxxxxxxxxxxxxxx';
 
    $ad_code = '<amp-auto-ads type="adsense" data-ad-client="' . $publisher_id . '"></amp-auto-ads>';
    return $ad_code . $content;
}
add_action( 'pre_amp_render_post', 'bb_amp_add_auto_ads_insert' );
function bb_amp_add_auto_ads_insert() {
    add_filter( 'the_content', 'bb_amp_add_auto_ads_code' );
}
 
/**
 * Fügt AMP automatische Anzeigen Script in AMP Seiten ein.
 */
function bb_amp_auto_ads_script( $data ) {
    $data['amp_component_scripts']['amp-auto-ads'] = 'https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js';
    return $data;
}
add_filter( 'amp_post_template_data', 'bb_amp_auto_ads_script' );
?>

Ersetzt im Code das xxxxxxxxxxxxxxxx durch eure Google Adsense publisher ID. Diese findet ihr oben im 1. Schritt unter Google Adsense hinter dem ca-pub-.

Alternative zu 2. – Adsense Code in WordPress Datei kopieren – NICHT EMPFOHLEN

Update: Ursprünglich empfiehlt dieser Beitrag das Hinzufügen des Codes für AMP Adsense unter WordPress in die html-start.php im AMP WordPress Plugin. Dabei habe ich nicht bedacht, dass ein Update des Plugins die Änderungen löscht.

Wollt ihr schnell und einfach AMP Seiten mit Adsense unter WordPress testen, könnt ihr dieses Vorgehen nutzen. Behaltet aber im Hinterkopf, dass ihr entweder das AMP Plugin nicht aktualisiert oder zeitnah auf die unter 2. beschrieben Lösung ausweicht.

Meldet euch mit dem FTP-Programm bei eurem Hoster an. Dort müsst ihr die Datei mit dem Namen html-start.php finden. Für das AMP Plugin von Automattic ist die Datei unter folgendem Pfad zu finden:

/eure-webseite/wp-content/plugins/amp/templates/

Ladet die Datei herunter und öffnet diese mit einem beliebigen Texteditor. Erstellt euch zur Sicherheit eine Kopie der Datei als Backup.

Fügt jetzt das Skript aus Schritt 2 zwischen <head> und </head> ein.

Der Anzeigecode aus Schritt 3 muss zwischen <body> und </body> eingefügt werden. Im Screenshot unten sehr ihr die fertige html-start.php.

Adsense Anzeigecode für WordPress AMP Seiten einfügen
Adsense Anzeigecode für WordPress AMP Seiten einfügen (Bild: Screenshot).

Jetzt müsst ihr die html-start.php nur noch speichern und wieder via FTP auf den Server hochladen. Dabei überschreibt ihr die alte Datei auf dem Server.

Test: Adsense Werbung auf WordPress AMP Seiten

Nach dem Upload der Datei könnt ihr euer Smartphone nehmen und eine beliebige Webseite aufrufen. Dabei muss die Webseite als AMP-Seite und nicht als Mobile-Page aufgerufen werden. Das erreicht ihr, in dem am Ende der URL ein AMP gehängt wird. Beispiel:

WordPress Adsense Werbung auf AMP Seiten anzeigen
Adsense Werbung auf AMP WordPress Seite (Bild: Screenshot).

Der Aufruf funktioniert nur von mobilen Endgeräten wie Smartphones und Tablets und nicht aus dem Browser eines Notebooks oder Computer.

Bis die Werbung angezeigt wird, hat es bei mir etwa 5 bis 10 Minuten gedauert. Danach sieht das Ergebnis für RandomBrick.de wie auf dem Bild oben aus.

Das AMP sieht man in der URL nur noch an den ersten beiden Buchstaben. Die Webseite zeigt jetzt auch für AMP WordPress Seiten Adsense Werbung an.

Persönliche Meinung

Werbung ist immer ein zweischneidiges Schwert. Bin ich ein Freund davon? Solange die Werbung nicht aufdringlich ist, finde ich diese ok. Ich hoffe RandomBrick.de findet mit der Menge und Art der angezeigten Werbung einen guten Mittelweg.

Weitere Tipps findet ihr ebenfalls hier auf RandomBrick.de. Beispielsweise wie ihr ein WordPress Backup erstellen könnt. Dieser Blog läuft beispielsweise mit einem täglichen automatischen Backup, dass die Dateien auf einen anderen Server in der Cloud pusht. Sollte etwas schiefgehen, kann RandomBrick.de innerhalb kürzester Zeit und ohne große Verluste an Content wieder hergestellt werden.

Zusätzlich findet ihr einen Artikel, der euch zeigt wie ihr eine WordPress Datenbank sichern und wiederherstellen könnt. Im Idealfall macht das euer Backup. Aber nicht jedes Backup kann eine Datenbank wieder einspielen.

Zudem gibt es zwischenzeitlich kostenlose Möglichkeiten, wie ihr WordPress auf HTTPS umstellen könnt und euren Besuchern damit eine verschlüsselte Verbindung zu eurer Webseite ermöglicht.

Quelle: Isabel Castillo

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Du bezahlt noch für dein Girokonto?

Wechsele JETZT zu einem kostenlosen Girokonto inklusive Kreditkarte und spare bis zu 250 Euro pro Jahr.

Konten vergleichen!