Nextjs: how to integrate google analytics in amp pages

Question

Nextjs: how to integrate google analytics in amp pages

502 Views Asked by Singh At 20 October 2024 at 21:00

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>
  );
};

Original Q&A

There are 1 best solutions below

**Singh** · Accepted Answer

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

Nextjs: how to integrate google analytics in amp pages

There are 1 best solutions below

Related Questions in NEXT.JS

Related Questions in GOOGLE-ANALYTICS

Related Questions in AMP-HTML

Related Questions in AMP-ANALYTICS

Trending Questions

Popular # Hahtags

Popular Questions