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

Question

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

Oma*_*oug 5 javascript dynamic-import google-tag-manager reactjs next.js

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

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

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

<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) */}

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 0

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

归档时间：	3 年，11 月前
查看次数：	10185 次
最近记录：	3 年，9 月前