next.jsgoogle-analyticsamp-htmlamp-analytics

Nextjs: how to integrate google analytics in amp pages


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

Solution

  • 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