After going through a lot of blog posts and discussions on the internet. I found a working solution with a magic code snippet.
As you know the new Google Analytics 4 (GA4) will be the only analytics processing the data and working from July 1, 2023. Read more here.
Also read: GA4 Setup for non-technical
The universal analytics is shutting down processing of the data. Also we can not migrate the data from Universal Analytics (GA3) to GA4, that’s sad. Whilst we have these problems, many sites which are using AMP and put a lot of efforts and time on building AMP pages, did not have direct solutions to get GA4 working on AMP pages. No solution on topics here also.
Google Analytics 4 + Google AMP
There are two ways to implement it.
- Custom Code for AMP with <amp-analytics>
- A WordPress plugin (no code required)
So lets dive in..
1. Custom Code for AMP with <amp-analytics>
After reading the article of David, here’s the magic code snippet to use on AMP pages, that just works!
<amp-analytics type="googleanalytics" config="https://amp.analytics-debugger.com/ga4.json" data-credentials="include"> <script type="application/json"> { "vars": { "GA4_MEASUREMENT_ID": "G-XXXXXXXXXX", "GA4_ENDPOINT_HOSTNAME": "www.google-analytics.com", "DEFAULT_PAGEVIEW_ENABLED": true, "GOOGLE_CONSENT_ENABLED": false, "WEBVITALS_TRACKING": false, "PERFORMANCE_TIMING_TRACKING": false } } </script> </amp-analytics>
Note: Please replace “G-XXXXXXXXXX” with your GA4 measurement ID in the above snippet and place that code in footer of your AMP pages.
Also you can self host this ga4 json in your project or site and then use self-hosted ga4.json path in “config” attribute of `<amp-analytics>` to make it more reliable. https://amp.analytics-debugger.com/ga4.json
Please go through this article for advanced configuration and tracking data with GA4 on AMP pages – https://www.thyngster.com/how-to-track-amp-pages-with-google-analytics-4
2. A WordPress plugin (no code required)
For WordPress CMS, you can use this plugin to make it work on AMP – https://wordpress.org/plugins/amp-google-analytics-4-support/
You can see the backend options after activating this plugin.
This ultimately outputs this which is required for AMP GA 4 tracking.
Credits:
Roland Farkas – https://github.com/rolandfarkasCOM
David Vallejo – https://github.com/thyngster – https://github.com/analytics-debugger/google-analytics-4-for-amp/blob/main/ga4.json
Thanks. That worked like a charm! 🙂
Great! 👍
How can we test or debug amp implementation?
Hi JC,
You can see realtime report of GA4 and add filter by “Pages” containing “amp” in it. That should show you the views on AMP pages in GA4.
Debugging is kind of hard in AMP though. What are you trying to debug?
I just installed the plugin but still can see any live traffic in Analytics 4.
Have you setup the correct GA4 ID as shown in the screenshot?
That should work fine by default, unless you have any other conflicting plugins for same.
I have configured Analytics 4 corectly but is still shows this message “This property’s setup is not complete. Settings may be completed for you based on your original Universal Analytics (UA) property, unless you opt out in the connected UA property.”. How to fix it, please reply. Thanks