如何通过Google Tag Manager for Next-J设置Google分析？

kzipqqlq 于 2022-11-29 发布在 Go

关注(0)|答案(9)|浏览(253)

以前我是使用react-ga npm模块插入谷歌分析在我的下一个js应用程序.它是简单的这样：

import ReactGA from 'react-ga'

export const initGA = () => {
  ReactGA.initialize('UA-*******-*', {
    titleCase: false
  })
}

export const logPageView = () => {
  if (window.location.href.split('?')[1]) {
    ReactGA.set({page: window.location.pathname + '?' + window.location.href.split('?')[1]})
    ReactGA.pageview(window.location.pathname + '?' + window.location.href.split('?')[1])
  } else {
    ReactGA.set({page: window.location.pathname})
    ReactGA.pageview(window.location.pathname)
  }
}

然后我在我的头中调用logPageView函数（插入到我的应用程序的每个页面中），如下所示：

componentDidMount () {
    if (!window.GA_INITIALIZED) {
      initGA()
      window.GA_INITIALIZED = true
    }
    logPageView()
  }
  componentWillReceiveProps () {
    if (!window.GA_INITIALIZED) {
      initGA()
      window.GA_INITIALIZED = true
    }
    logPageView()
  }

现在我想使用Google标签管理器来处理分析页面浏览。2我该怎么做呢？

next.js

来源：https://stackoverflow.com/questions/45848142/how-to-set-up-google-analytics-through-google-tag-manager-for-next-js

9条答案

按热度按时间

pgccezyw1#

为了使用Google Tag Manager，您应该在每个页面上注入标记管理器脚本。由于_document.js是每个页面的 Package 器，您应该将GTM脚本添加到_document.js的head部分，如下所示：

<Head>
  <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-*****');`,
  }}>
  </script>
  ...
</Head>

现在你已经准备好在你的next-js应用中使用Google Tag Manager了。你只需要处理页面浏览量和其他GTM Jmeter 板中的分析相关的东西。
要为单页应用程序（如nextjs）设置google analytics pageview，你可以按照以下步骤操作。

赞(0）回复(0）举报 2022-11-29

vhipe2zx2#

不需要任何特殊的库，这里的一些答案看起来并不完整。

import Head from 'next/document'  

<Head>
  <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-XXXXXX');`}} />
</Head>
    
<body style={{ margin: 0 }}>
   <noscript dangerouslySetInnerHTML={{ __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
        height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
      }}
    />
    <Main />
    <NextScript />
</body>

赞(0）回复(0）举报 2022-11-29

c9x0cxw03#

由于您使用的是nextJS，因此不需要添加来自Google Analytics的纯javascript，您所需要的只是GA跟踪ID。
然后创建util函数：

export const event = ({ action, category, label, value }) => {
  window.gtag('event', action, {
    event_category: category,
    event_label: label,
    value: value
  })
}

并将其添加到your _document.js中：

<script
  dangerouslySetInnerHTML={{
  __html: `
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '${GA_TRACKING_ID}');
`}}
/>

之后，您只需要在页面/组件中导入util函数并调用：

gtag.event({
  action: 'submit_form',
  category: 'Contact',
  label: this.state.message
})

参考：example of NextJS with GA

赞(0）回复(0）举报 2022-11-29

sf6xfgos4#

我发现了一个更好的实现方法，我们可以使用react-gtm-module库。
正如Ryan Elainska在他们的博客中提到的，我的NextJS安装的_app.js文件中的Google Tag Manager in Next.js：

import App, { Container } from 'next/app'
import React from 'react'
import './app.css'
import TagManager from 'react-gtm'

const tagManagerArgs = {
  id: 'GTM-XXXXXXX'
}

class MyApp extends App {
  componentDidMount () {
    TagManager.initialize(tagManagerArgs)
  }

  render () {
    const { Component, pageProps } = this.props
    return (
      <Container>
        <Component {...pageProps} />
      </Container>
    )
  }
}

export default MyApp

赞(0）回复(0）举报 2022-11-29

70gysomp5#

正在使用react-gtm-module，并在componentDidMount内的_app.js中进行配置

componentDidMount() {
    const tagManagerArgs = {
      gtmId = 'GTM-00001'
    }

    TagManager.initialize(tagManagerArgs);
  }

这是我的解决方案更新于2020年2月11日

赞(0）回复(0）举报 2022-11-29

mwg9r5ms6#

我在next.js应用程序中使用redux。
如果您使用redux，这是一个非常好的解决方案：还原信标+React-gtm-模块。
这是初始化代码。这段代码可以用_app. js中的hooks或componentDidMount触发，如果你使用redux，也可以用redux操作触发。

const dataLayer = { ...your dataLayer config... }
const tagManagerArgs = {
  gtmId: process.env.GTM_ID,
  auth: process.env.GTM_AUTH,
  preview: process.env.GTM_PREVIEW,
  dataLayer
}
TagManager.initialize(tagManagerArgs)

下面是使用eventMap创建中间件

import { EventsMapper, createMiddleware } from 'redux-beacon'
import GoogleTagManager from '@redux-beacon/google-tag-manager'

const gtm = GoogleTagManager()

export const eventsMap: EventsMapper = action => {
  switch (action.type) {
    default:
      return []
  }
}

export const gtmMiddleware = createMiddleware(eventsMap, gtm)

赞(0）回复(0）举报 2022-11-29

sczxawaw7#

老职位，但我最近写了关于这一点，并详细2解决方案在这里：https://morganfeeney.com/how-to/integrate-google-tag-manager-with-next-js。
在Next.js v11.0.0之前，最简单的方法是使用custom _document。
在custom _document中添加如下GTM脚本：https://nextjs.org/docs/advanced-features/custom-document

import Head from 'next/document';
...

<Head>
  <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-XXXX');`,
    }}
  />
</Head>

<body>
  <Main />
  <NextScript />
  <noscript
    dangerouslySetInnerHTML={{
      __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX" height="0" width="0" style="display: none; visibility: hidden;" />`,
    }}
  />
</body>

但如何跟踪页面访问量？

当使用客户端路由进行导航时，window.onLoad不会触发，因此即使添加了脚本，它也不会执行预期的操作。
我的首选方法是使用如下函数：

export const gtmVirtualPageView = (rest) => {
  window.dataLayer?.push({
    event: 'VirtualPageView',
    ...rest,
  });
};

然后在_app.tsx中添加以下配置：

import '../styles/globals.css';
import { useEffect } from 'react';
import { useRouter } from 'next/router'
import { gtmVirtualPageView } from '../lib/gtm';

function MyApp({ Component, pageProps }) {
  const router = useRouter()

  useEffect(() => {
    const mainDataLayer = {
      pageTypeName: pageProps.page || null,
      url: router.pathname,
    };

    window.onload = () => window.dataLayer?.push({...mainDataLayer});

    gtmVirtualPageView(mainDataLayer);

  }, [pageProps])

  return <Component {...pageProps} />
}

export default MyApp

这允许通过pageProps将数据传递到dataLayer。

赞(0）回复(0）举报 2022-11-29

hc8w905p8#

Next.js从v11 recommends开始使用它们的<Script>标记，正确的地方是添加它的App component。
pages/_app.jsx

import React from 'react';
import Script from 'next/script';

const App = ({ Component, pageProps }) => {
  return (
    <>
      <Script id="gtm" 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='+i+dl;f.parentNode.insertBefore(j,f);
          })(window,document,'script','dataLayer','GTM-XXXXXXX');
        `}
      </Script>
      <noscript>
        <iframe
          src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
          height="0"
          width="0"
          style="display:none;visibility:hidden"
        ></iframe>
      </noscript>

      <Component {...pageProps} />
    </>
  );
};

export default App;

您可以看到，这个解决方案在nestjs-starter中的gtag上的工作方式与此类似，我也从env var中设置了标记。
对于v10和更低版本，请根据Google指南使用常规的<script>标签。

赞(0）回复(0）举报 2022-11-29

ijxebb2r9#

我推荐一个OSS库nextjs-google-analytics，如github中所述，并在npm中发布。它的<GoogleAnalytics/>组件是NextJS的<Script/>的一个 Package 器，如其他答案中所提到的，并具有额外的特性，如trackPageViews道具，它自动跟踪访问者路线的变化。它是一个小库，但IMO使您的代码库整洁。

赞(0）回复(0）举报 2022-11-29

我来回答

如何通过Google Tag Manager for Next-J设置Google分析？

9条答案

相关问题

热门标签

最新问答