Add Analytics To AMP (Accelerated Mobile Pages) HTML Pages

If your developing AMP pages for your website then adding direct Google Analytics or Other Analytics script code, it will lead to validation errors. As AMP pages don't support javascript.

But don't worry AMP has component called <amp-analytics> tag which can be used to add not only Google Analytics but Other Analytics too.

In this article, I will show you how to integrate with Google Analytics.

---

AMP Google Analytics Code

Basically, to make your Analytics works you need to add the following code

Include AMP Analytics Component

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

Add This Analytics Script At The End Of Body

<amp-analytics type="googleanalytics">
    <script type="application/json">
        {
            "vars": {
                "account": "GOOGLE ANALYTICS ID"
            },
            "triggers": {
                "default pageview": {
                    "on": "visible",
                    "request": "pageview",
                    "vars": {
                        "title": "TITLE OF THE CURRENT PAGE"
                    }
                }
            }
        }
    </script>
</amp-analytics>

Make sure to change the GOOGLE ANALYTICS ID & TITLE OF THE CURRENT PAGE respectively.

The following image shows how Google Analytics ID can be found, make sure to log in to your Google Analytics account.

---

Conclusion

Hope this article helped you. Please share it with your friends.

Random Articles For You

Route Model Binding In Laravel & Change Default Column id To Another Column

Sass or SCSS @function vs @mixin

PHP Built-In Web Server & Testing Your Development Project In Mobile Without Any Software

Laravel Custom Maintenance Page

Install MySQL In Ubuntu 20.04

Lazy Load YouTube And Other Videos In Website

@stack @push and @prepend In Laravel Blade

Factories To Speed Up Test-Driven Development In Laravel

Increase Session Timeout In Laravel

Getting Started With AMP (Accelerated Mobile Pages)

Install Linux, NGINX, MYSQL, PHP (LEMP Stack) on Ubuntu

Basic Server Security Setup For Ubuntu / Linux

Composer Install v/s Composer Update

Client-Side Form Validation With Javascript

Detect AdBlocker With Javascript And Increase Website Ads Revenue