Google Analytics Tracking Code auf AMP-Seiten in WordPress einbinden

- Code für functions.php & Plugin -

Nachfolgend erhältst du 2 Möglichkeiten an die Hand, mit welchen du Google Analytics korrekt und valide in deine AMP-Seiten in WordPress einbinden kannst.

Jetzt lesen

Dieser Beitrag zeigt Dir, wie Du den Google Analytics Tracking Code auf AMP-Seiten in Deiner WordPress-Installation richtig und nach den AMP-Richtlinien einbindest.

Voraussetzungen Deiner WordPress-Installation

Bevor wir jedoch anfangen kurz ein paar Worte zu den Voraussetzungen. Ich gehe davon aus, dass Du das AMP-Plugin von Automattic installiert und aktiviert hast. Wenn Du das noch nicht getan haben solltest, empfehle ich Dir diesen Blogeintrag von Yoast. Dort findest Du alles Wissenswerte, um mit AMP auf Deiner WordPress-Seite zu starten.

Zudem empfiehlt Google, dass man für das Tracking der AMP-Seiten eine eigene Property in seinem Google Analytics-Konto anlegt. Wenn Du nicht genau weißt wie das geht, findest Du hier eine Anleitung von Google dazu.

Als Letztes sei noch erwähnt, dass die Daten von AMP-Seiten immer über eine IP-Anonymisierung verfügen, weshalb man aus datenschutzrechtlichen Gründen nicht den Tracking-Code erweitern muss, wie das beim „normalen“ Google Analytics Tracking-Code der Fall ist.

AMP Analytics über functions.php einbinden

Bevor Du den Tracking-Code einbindest, musst Du erst das AMP Analytics Skript in den <head>-Bereich Deiner AMP-Seiten einbinden. Das geht über den amp_post_template_data Filter ganz einfach. Um das Skript einzubinden, füge folgenden Code in Deine functions.php:

/**
 AMP Analytics in den head der AMP-Seiten einbinden
 */
function wpc_amp_script( $data ) {
    $data['amp_component_scripts']['amp-analytics'] = 'https://cdn.ampproject.org/v0/amp-analytics-0.1.js';
    return $data;
}
add_filter( 'amp_post_template_data', 'wpc_amp_script' );

/**

AMP Analytics in den head der AMP-Seiten einbinden

function wpc_amp_script( $data ) {

$data['amp_component_scripts']['amp-analytics'] = 'https://cdn.ampproject.org/v0/amp-analytics-0.1.js';

return $data;

}

add_filter( 'amp_post_template_data', 'wpc_amp_script' );

Anschließend musst Du noch den Google Analytics Tracking-Code einbinden. Das geschieht über den amp-analytics Tag, da man nicht einfach so den normalen Tracking-Code von Google Analytics einbinden kann.

Hierfür benötigst Du jetzt die Tracking ID Deiner neuen Google Analytics Property, die Du im besten Fall gerade eben erstellt hast. Mit Hilfe der amp_post_template_footer hook können wir nun den Tracking Code AMP-konform in den Footer jeder AMP-Seite einbinden.

Beachte die Zeile 9, in welcher Du Deine Tracking ID eintragen musst.

/**
 amp-analytics in den Footer der AMP-Seiten einbinden
 */
function wpc_amp_analytics( $amp_template ) { ?>
    <amp-analytics type="googleanalytics">
    <script type="application/json">
    {
      "vars": {
        "account": "UA-XXXXX-Y"  // Mit Deiner Tracking ID austauschen
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"
        }
      }
    }
    </script>
    </amp-analytics>
<?php }
add_action( 'amp_post_template_footer', 'wpc_amp_analytics' );

/**

amp-analytics in den Footer der AMP-Seiten einbinden

function wpc_amp_analytics( $amp_template ) { ?>

<amp-analytics type="googleanalytics">

{

"vars": {

"account": "UA-XXXXX-Y" // Mit Deiner Tracking ID austauschen

"triggers": {

"trackPageview": {

"on": "visible",

"request": "pageview"

}

</script>

</amp-analytics>

<?php }

add_action( 'amp_post_template_footer', 'wpc_amp_analytics' );

Mit diesem Code kannst du Pageviews tracken. Für Event-Tracking oder Social-Interactions kannst Du Dich auf der offiziellen Seite von Google zu dem Thema umsehen.

Plugin: AMP Analytics

Wie könnte es anders sein, gibt es zu diesem Problem auch bereits erste Plugins zum Download.

Ich habe kurz mal AMP Analytics in Version 0.0.2 installiert und die AMP-Seite wurde sowohl validiert als auch der Besuch in Google Analytics getrackt. Somit dürfte das Plugin seinen Zweck erfüllen. Viel Einstellungsmöglichkeiten gibt es nicht, Du kannst dort lediglich Deine Tracking ID hinterlegen.

Download QR-Code

AMP Analytics

Entwickler: Valet

Preis: Kostenlos

Soweit ich mitbekommen habe, kann man auch über PageFrog den Analytics-Code integrieren. Wurde von mir nicht getestet, weshalb ich dazu keine Einschätzung oder Empfehlung abgeben kann. Solltest Du unter Umständen PageFrog bereits installiert haben, schau Dich in den Einstellungen um.

AMP-Seiten validieren

Über die Chrome DevTools kannst Du Deine AMP-Seite validieren und checken, ob alles in Ordnung ist.

Rufe dazu einfach Deine AMP-URL auf (einfach /amp/ ans Ende setzen) und füge an die URL noch #development=1 an (also z.B. www.deinedomain.de/url-zum-beitrag/amp/#development=1). Öffne anschließend in den Chrome DevTools die Konsole auf.

Wenn dort AMP validation successful. steht, hast Du es geschafft und Deine Seite entspricht den Richtlinien!

Ich hoffe, ich konnte Dir mit dieser kleinen Anleitung helfen und Du kannst nun erfolgreich die Besucher Deiner AMP-Seiten in Google Analytics tracken.

Denis Brediceanu

Digital Brand Strategist und Gründer von WPcorner und Lunatale aus Leidenschaft. Mit WPcorner möchte ich kleinen Unternehmen, Startups und Solopreneuren dabei helfen ihre eigene Website zu erstellen und zu vermarkten.

4 Kommentare

Andres am 6. Januar 2017 um 12:59

Hey tolles Guide. Sag mal weißt du auch wie man den Google Tag Manager per functions.php einbindet?

Gruß

Andres
Antworten
Denis Brediceanu am 6. Januar 2017 um 13:21

Hi Andres,

Der Google Tag Manager lässt sich analog zum AMP-Tracking ebenfalls via functions.php einbinden. Das würde ungefähr so aussehen:

function google_tag_manager() { ?> #Hier Code für GTM einfügen# <?php } add_action('wp_head', 'google_tag_manager');

1
2
3
4
5
6
7

function google_tag_manager() { ?>

#Hier Code für GTM einfügen#

<?php
}
add_action('wp_head', 'google_tag_manager');

Antworten
Mtesa am 4. März 2017 um 18:35

Wie füge ich die Anonymisierung hinzu ???
Antworten
- Denis Brediceanu am 5. März 2017 um 22:15
  
  Hi Mtesa,
  
  wie im Artikel bereits geschrieben, werden Daten aus AMP-Dokumenten immer anonymisiert übertragen.
  Zitat Google: „Data from AMP documents is always IP anonymized.“
  Wenn du dein „normales“ Google Analytics um die IP-Anonymisierung erweitern willst, empfehle ich dir diesen Artikel von mir: https://wpcorner.de/wordpress/google-analytics-wordpress-einbinden/
  Dort steht alles beschrieben. Hauptsächlich musst du deinen Tracking-Code um folgende Zeile erweitern:
  „ga(’set‘,’anonymizeIp‘,true);“
  Antworten