20

以前我使用 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()
  }

现在我想使用谷歌标签管理器来处理分析页面视图。我怎么能这样做？

4

7 回答 7

42

为了使用谷歌标签管理器，你应该在每个页面上注入你的标签管理器脚本。由于_document.js是每个页面的包装器，因此您应该将 GTM 脚本添加到_document.jshead 部分，如下所示：

<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 跟踪代码管理器了。您应该只继续从您的 GTM 仪表板处理综合浏览量和其他与分析相关的内容。

要为单页应用程序（如 nextjs）设置谷歌分析页面浏览，您可以按照以下步骤操作。

于 2017-08-23T19:44:49.953 回答
26

不需要任何特殊的库，这里的一些答案看起来不完整。只需在 _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>
于 2020-05-06T07:53:50.153 回答
13

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

参考：NextJS 与 GA 的例子

于 2018-10-08T23:05:55.207 回答
12

我找到了一种更好的实现方式。我们可以为此使用react-gtm-module库。

正如 Ryan Elainska 在他们的博客中提到的，我的 NextJS 安装文件中 Next.js中的Google Tag Manager ：_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
于 2019-08-13T05:56:57.697 回答
4

我在里面使用react-gtm-module和配置_app.jscomponentDidMount

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

    TagManager.initialize(tagManagerArgs);
  }

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

于 2020-02-11T09:05:45.763 回答
3

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

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

这是初始化代码。此代码可以通过 _app.js 中的钩子或 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)
于 2020-01-07T15:38:53.280 回答
0

旧帖子，但我最近在这里写了关于这个和详细的 2 个解决方案：https ://morganfeeney.com/how-to/integrate-google-tag-manager-with-next-js 。

在 Next.js v11.0.0 之前，最简单的方法是使用自定义 _document。

在自定义 _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。

于 2021-09-26T08:16:34.730 回答