Good content takes time and effort to come up with.

Please consider supporting us by just disabling your AD BLOCKER and reloading this page again.







Add Analytics To AMP (Accelerated Mobile Pages) Pages


Add Analytics To AMP (Accelerated Mobile Pages) HTML Pages


AMP GOOGLE ANALYTICS ACCELERATED MOBILE PAGES
23rd July 2020 1 min read
Share On     Share On WhatsApp   Buy Me Coffee | StackCoder Buy Coffee


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.


Google Analytics ID | StackCoder

Google Analytics ID | StackCoder


Conclusion


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


Related AMP Articles


Getting Started With AMP (Accelerated Mobile Pages)

Setup AMP (Accelerated Mobile Pages) In PHP Laravel







Author Image
AUTHOR

Channaveer Hakari

I am a full-stack developer working at WifiDabba India Pvt Ltd. I started this blog so that I can share my knowledge and enhance my skills with constant learning.

Never stop learning. If you stop learning, you stop growing