Hello @dontwakeme
Thank you for contacting us! There is an upstream Github issue opened regarding GA4 support in AMP; there you can find the latest updates regarding the implementation of GA4 on the GitHub issue. Once upstream (product) support for AMP in GA4 is added, the AMP plugin for WordPress will make it available.
What can you do?
You may have heard about the AMP’s Bento initiative, which aims at enabling site owners to make use of high-performance AMP components without the same level of AMP validation constraints. With Bento you can use AMP components where needed, mixing AMP components with non-AMP components (e.g. custom JavaScript).
Why are we allowing invalid AMP?
The final goal is to achieve a good Page Experience for your site (see FAQ). Page Experience includes a set of standardized core metrics (Core Web Vitals) measuring how well a given web page performs, without needing to rely on AMP validation. That being said, overall AMP pages overwhelmingly achieve better PX than non-AMP pages, so using AMP is still worthwhile.
How can I enable Bento on my WordPress site?
The 2.2 version of the plugin included an experimental feature that starts to explore the implementation of Bento and how the AMP plugin would look without trying to maintain AMP validity. You have the ability now to mark elements/attributes which should be exempted from AMP validation.
To try out the feature, make sure that you are on the Standard template mode then add the data-px-verified-tag attribute in your script tag that isn’t valid AMP.
?? The user should make sure that the non-AMP markup doesn’t negatively impact the Page Experience.
?? The above will not work well in Transitional or Reader Mode as those already have non-AMP versions linked and might create validation errors on Google Search Console.
So how can I add GA4 to my site then?
Example: adding GA4 with data-px-verified attribute.
add_action( 'wp_head', function () {
?>
<script async src="https://www.googletagmanager.com/gtag/js?id=ABC123" data-px-verified-tag></script>
<script data-px-verified-tag>
window.dataLayer = window.dataLayer || [];
function gtag(){
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'ABC123');
gtag('config', 'G-XXXXXXXX');
</script>
<?php
});
PS: We also have plugin AMP Google Analytics 4 Support which is based on a trick solution it is not officially supported but a working solution. if you are looking for basic things.
Hope this is helpful!
