如何将Google Tag Manager添加到NextJS网站

qjp7pelc 于 2023-05-06 发布在 Go

关注(0)|答案(1)|浏览(178)

bounty将在19小时后到期。回答此问题可获得+50声望奖励。Steve希望引起更多关注这个问题。

从this answer和this article中，我添加了一个<Script>，以便将Google Tag Manager添加到我的NextJS网站：
components/layout.tsx:

import React from "react";
 import Head from "next/head";
 import Script from 'next/script'

 <!-- skip some code -->

 <Head>
    <link rel="preconnect" href="https://cdn.sanity.io/" />
    <link rel="dns-prefetch" href="https://cdn.sanity.io//" />
  </Head>
  <Script id="google-tag-manager" strategy="afterInteractive">
    {
      (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=%27+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-xxxx');
    }
  </Script>

但是，脚本并不存在于前端。
components/layout.tsx是我网站中唯一一个带有<Head>或<head>的文件。
Google Tag Manager <noscript>位于前端，用于app/layout.tsx:

<body className="antialiased text-gray-800 dark:bg-black dark:text-gray-400">
    <noscript
      dangerouslySetInnerHTML={{
        __html: <iframe src="https://www.googletagmanager.com/ns.html?id=xxxx" height="0" width="0" style="display: none; visibility: hidden;" />,
      }}
    />

这样我就知道我已经保存了所有更改。
感谢帮助。

next.js

来源：https://stackoverflow.com/questions/76077818/how-to-add-google-tag-manager-to-a-nextjs-website

1条答案

按热度按时间

mefy6pfw1#

确保您实际上在_app.js文件中使用了布局：

// _app.js
import '../styles/globals.css';
import Layout from './layout';

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

export default MyApp;

在layout.tsx中，您可以按如下方式加载脚本：

// layout.js
import Head from 'next/head';

export default function Layout({ children }) {
  return (
    <>
      <Head>
        <link rel="preconnect" href="https://cdn.sanity.io/" />
        <link rel="dns-prefetch" href="https://cdn.sanity.io//" />
      </Head>
      <script
        id="google-tag-manager"
        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=%27+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-xxxx');`,
        }}
      />
      <main>{children}</main>
    </>
  );
}

请注意，我没有使用Next Script component，因为文档似乎没有提到任何关于在组件中使用子组件的内容。
Here is the full working example on Stackblitz.
另外，请确保您没有启用任何浏览器扩展，这些扩展会删除与跟踪相关的脚本。您可以在不同的浏览器或隐身模式下进行测试。

赞(0）回复(0）举报 2023-05-06

我来回答

如何将Google Tag Manager添加到NextJS网站

1条答案

相关问题

热门标签

最新问答