Learning AMP: Google Analytics Setup on Wordpress

Image for post
Image for post
Originally published at https://ampire.city

What Will I Learn?

Requirements:

AMP Analytics JSON Code Example

{ 
"vars": {
"account": "UA-XXXXXXXX-Y" },
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}

Getting Google Analytics ID

Image for post
Image for post
Google Analytics tracking ID could be found on Admin Settings > Your Property > Tracking Info > Tracking Code. Source: ampire.city

Installing AMP Analytics JSON Code

Method 1: via AMP for WordPress

Image for post
Image for post
Installing AMP Anaytics JSON code via AMP for WordPress. Source: ampire.city

Method 2: via Yoast SEO

Image for post
Image for post
Installing AMP Anaytics JSON code via Yoast SEO. Source: ampire.city

Method 3: via Code

add_action('wp_head', 'ampirecity_add_ga_code'); 
function ampirecity_add_ga_code(){
?>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXXXXX-Y" },
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
<?php
};
Image for post
Image for post
Theme Editor could be foud under Admin Menu > Appearance > Theme Editor. Source: ampire.city

Adding Google Analytics to AMP Wordpress Website

Travel Blogger, Web Designer & AMP Developer | Travel & History Journal: https://www.ctdots.eu | AMP Development & Web Design Tutorials: https://ampire.city

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store