Question

以前我在使用react-ga npm模块在我的下一个js app中插入谷歌分析。它就像这样：

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跟踪代码管理器来处理Google Analytics页面视图。我怎么能这样做？

Answer 1

要使用Google跟踪代码管理器，您应该在每个页面上注入代码管理器脚本。因为_document.js是每个页面的包装器。你应该在头部的 _document.js 中插入标签管理器的脚本，如下所示：

<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标记管理器，您应该只从标记管理器信息中心处理网页浏览和其他与分析相关的内容。

要为单页应用程序（例如nextjs）设置Google Analytics分析页面视图，您可以按照these步骤进行操作。

Answer 2

不需要任何特殊的库，这里的一些答案似乎不完整。只需在_document.js中将脚本添加到<Head>并将noscript添加到<body>

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>

Answer 3

由于您使用的是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
  })
}

并将其添加到_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

Answer 4

我在_app.js内的componentDidMount中使用react-gtm-module和配置

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

    TagManager.initialize(tagManagerArgs);
  }

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

Answer 5

我找到了实现它的更好方法。我们可以使用'react-gtm-module'库。

正如Ryan Elainska在他们的博客中提到的那样[Next.js中的Google跟踪代码管理器 ]（参考：https://ryanelainska.com/blog/google-tag-manager-in-react）：在我的NextJS安装文件的_app.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

Answer 6

我在next.js应用程序中使用 redux 。

如果您使用的是redux，这是一个很好的解决方案： redux-beacon + react-gtm-module 。

这是初始化代码。可以使用_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)

如何通过Google跟踪代码管理器为Next-Js设置Google Analytics？

6 个答案: