i'm wondering how can i integrate amp-analytics with Nextjs project.
I saw here that amp-analytics works with GA4
I couldn't find anything regarding amp-analytics and nextjs online.
I'm wondering if this is the correct way to integrate it with the nextjs project.
My sample (body in _document.js):
const Body: React.FC = () => {
const isAmp = useAmp();
return (
<body className={isAmp ? 'js' : 'no-js'}>
{!isAmp && (
<>
<script
dangerouslySetInnerHTML={{
__html: `
document.body.classList.remove('no-js');
document.body.classList.add('js');
`,
}}
/>
<amp-analytics type="gtag" data-credentials="include">
<script
dangerouslySetInnerHTML={{
__html: ` "vars" : {
"gtag_id": "xxxxxxxx",
"config" : {
"xxxxxxxxx": { "groups": "default" }
}
}`,
}}
/>
</amp-analytics>
</>
)}
<noscript
dangerouslySetInnerHTML={{
__html: `<iframe src="https://www.googletagmanager.com/ns.html?id=xxxxxxx" height="0" width="0" style="display: none; visibility: hidden;" />`,
}}
/>
<Main />
<NextScript />
</body>
);
};
So i figured out that doing like this it should work :
{isAmp && (
<amp-analytics type="gtag">
<script
type="application/json"
dangerouslySetInnerHTML={{
__html: JSON.stringify({
vars: {
['gtag_id']: '<GA_MEASUREMENT_ID>',
config: {
['<GA_MEASUREMENT_ID>']: { groups: 'default' },
},
},
linkers: {
enabled: true,
},
}),
}}
/>
</amp-analytics>
)}
This is added in _app.js
and in body