Nextjs：如何在 amp 页面中集成 google analytics

Question

我想知道如何将 amp-analytics 与 Nextjs 项目集成。

我在这里看到 amp-analytics 与 GA4 配合使用

我在网上找不到任何关于 amp-analytics 和 nextjs 的信息。

我想知道这是否是将它与 nextjs 项目集成的正确方法。

我的示例（_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>
  );
};

Answer 1

所以我发现这样做应该有效：

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

这是在_app.js和body中添加的

Nextjs：如何在 amp 页面中集成 google analytics

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-12-26 13:08:23

Nextjs：如何在 amp 页面中集成 google analytics

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-12-26 13:08:23

解决方案1
0 已采纳 2022-12-26 13:08:23