web-dev-qa-db-ja.com

Next-J向けにGoogleタグマネージャーを使用してGoogleアナリティクスを設定するにはどうすればよいですか？

以前は、次のjsアプリにGoogle Analyticsを挿入するためにreact-ga npmモジュールを使用していました。そしてそれは単にこのようでした：

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-tag-managernextjs
9
Soorena

Googleタグマネージャーを使用するには、すべてのページにタグマネージャースクリプトを挿入する必要があります。 _document.jsはすべてのページのラッパーなので。次のように、headセクションの_ 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アナリティクスのページビューを設定するには、 these の手順に従ってください。

15
Soorena

NextJSを使用しているため、Googleアナリティクスから純粋な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
})

参照： GAを使用したNextJSの例

7
Darryl R. Norbert

私はそれを実装するより良い方法を見つけました。 '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
3
Sagar M

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)
0
Harry Hur