在应用程序完全加载后，如何将 Google 跟踪代码管理器加载到 next.js 应用程序？

Question

我正在构建一个 next.js 应用程序，并希望仅在加载整个页面后加载 Google 跟踪代码管理器 (GTM)。 这背后的目标是提高网站性能。

有没有人想出一种方法，我只能在应用程序完全加载后才能运行第三方 JS 代码（如 GTM）？

我目前正在添加使用“常规”方式将 GTM 注入我的 next.js 应用程序（来源），方法是将<script>标记添加到<Head>并将<noscript>标记添加到_document.js中的<body>标记文件：

<Head>
      {/* Google Tag Manager */}
      <script
        dangerouslySetInnerHTML={{
          __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
                new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
                j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
                'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
                })(window,document,'script','dataLayer','GTM-XXXXXXX');`
        }}
      />
          {/* End Google Tag Manager */}
...
...
</Head>

<body style={{ backgroundColor: theme.palette.primary.background }}>
       {/* Google Tag Manager (noscript) */}
       <noscript
          dangerouslySetInnerHTML={{
            __html: '<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe>'
          }}
      />
      {/* End Google Tag Manager (noscript) */}

Answer 1

您如何衡量绩效？

直接来自 Next.js 文档： https://nextjs.org/docs/basic-features/script#afterinteractive ，您想这样做：

<Script
  strategy="afterInteractive"
  id="your-id"
  dangerouslySetInnerHTML={{
    __html: `
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer', 'GTM-XXXXXX');
  `,
  }}
/>

afterInteractive只是将脚本放在结束 body 标记之前，因此它会在页面交互后加载。

您最好将<noscript>标记放在_document.tsx中，这样更整洁。

我已经写了一篇关于如何做到这一点的相当深入的文章： https://morganfeeney.com/how-to/integrate-google-tag-manager-with-next.js

Answer 2

虽然不是一个简单的话题，但您可以尝试 Effect Hook，它可以在 React 更新 DOM 后运行一些额外的代码。 https://reactjs.org/docs/hooks-effect.html

Answer 3

下面是实现 Google 跟踪代码管理器脚本延迟加载的代码示例。

您可以使用 Next Js 提供的内置 Script 组件。

import Script from "next/script";

<Script strategy="lazyOnload" dangerouslySetInnerHTML={{ __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
            })(window,document,'script','dataLayer','GTM-XXXXXXX');`, }} />

在应用程序完全加载后，如何将 Google 跟踪代码管理器加载到 next.js 应用程序？

问题描述

3 个解决方案

解决方案1
3 2022-04-16 07:27:51

解决方案2
0 2022-02-01 11:03:30

解决方案3
0 2022-02-01 11:33:25

在应用程序完全加载后，如何将 Google 跟踪代码管理器加载到 next.js 应用程序？

问题描述

3 个解决方案

解决方案1 3 2022-04-16 07:27:51

解决方案2 0 2022-02-01 11:03:30

解决方案3 0 2022-02-01 11:33:25

解决方案1
3 2022-04-16 07:27:51

解决方案2
0 2022-02-01 11:03:30

解决方案3
0 2022-02-01 11:33:25