MENU

Next.jsで作ったWebサイトにGoogle Analyticsを導入する

【過去に書いたブログ記事のリライト版です】

目次

Next.jsで作ったWebサイトにGoogle Analyticsを導入する

Next.jsを用いて作成したブログサイトにGoogle Analyticsを導入する手順をまとめてみました。

WebサイトにGoogle Analyticsを設定することで、サイトへの流入人数などが結果として見えるようになります。

ブログやWebサイトの運営においては、これがモチベーションになると思うので、WebサイトにGoogle Analyticsを設定してみました。

手順を忘れないうちにまとめておきます。

Google Analyticsの導入について

基本的にGoogle Analyticsの導入・設定は、公式を参考に設定しています。

内容は転載になる部分が多いかもしれません。

前回と同様に、自分備忘録を兼ねていますので、ご了承ください。

Google Analyticsのトラッキングコードの設定

まずは、Google Analyticsのトラッキングコードを取得します。

下記のサイトがわかりやすかったので、リンクから確認してみてください。

初心者だと結構見つけるまで時間がかかって大変だと思います。

手順に従ってトラッキングコードを探していくと、「UA-トラッキングコードの番号-1」という形式のコードがあると思います。

トラッキングコードの確認ができたならば、プロジェクトのルートディレクトリに「.env」ファイルを作成し、その中に、以下のように記載します。

NEXT_PUBLIC_GOOGLE_ANALYTICS_ID = UA-トラッキングコードの番号-1

Next.jsでは、.envに環境変数を記述すると、これから作成するファイルなどにおいてprocess.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_IDとすることで外部ファイル.envNEXT_PUBLIC_GOOGLE_ANALYTICS_IDに代入したトラッキングコードを読み取ることができます。

この読み取った値は、プロジェクトのビルド時に変数などに代入され使用されます。

これで最初の設定が終わりです。

gtagファイルの作成

次に、ルートディレクトリにlibs/gtag.jsを作成します。

ここには主にGoogle Analyticsを起動する設定を記載しています。

// Google Analyticsの設定
export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID

// PVを測定する
export const pageview = (path) => {
  window.gtag('config', GA_TRACKING_ID, {
    page_path: path,
  })
}

// GAイベントを発生させる
export const event = ({ action, category, label, value }) => {
  window.gtag('event', action, {
    event_category: category,
    event_label: label,
    value: value
  })
}

①トラッキングコードの設定

// Google Analyticsの設定
export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID

上記のように、変数名「GA_TRACKING_ID」という定数に、先ほど.envで設定したトラッキングコードを代入されます。

このコードで、ビルド時にトラッキングコードが代入され、使用することができるようになります。

②PV数の測定設定

// PVを測定する
export const pageview = (path) => {
  window.gtag('config', GA_TRACKING_ID, {
    page_path: path,
  })
}

PV(Page view)数の測定は、上記コードにより行います。

Google Analyticsの公式に記載のある基本的なコードは以下のような形です。

gtag('config', 'GA_MEASUREMENT_ID', <parameters>);

<parameters>は、Google Analyticsの初期化方法を設定するオブジェクトのようです。

カスタマイズできるキーとして、page_pathを設定します。

そしてこのpage_pathに対し、表示しているページのURLを引数pathに受け、定義したpage_pathに渡すことで、カスタマイズキーに対しデータを渡しています。

また、JavaScriptのwindowプロパティで表示しているページからgtagを探し出し(window.gtag)、pageviewに対しデータを渡しています。

ちなみにGoogle Analyticsの公式では、

サイトに gtag.js を追加すると、gtag.js スニペットにはデフォルトでページビューを送信する config コマンドが含まれています。このコマンドにパラメータを追加して、ページビューの動作を設定します。

と書かれています。

windowプロパティとは?
Windowが持つdocumentプロパティにはページのDOMの要素が入っていて、documentを使うことでいろんなDOM要素(head, body, p, div等)にアクセスができるというもの

③Google Analyticsイベントを発生させる

// GAイベントを発生させる
export const event = ({ action, category, label, value }) => {
  window.gtag('event', action, {
    event_category: category,
    event_label: label,
    value: value
  })
}

公式によると、

グローバル サイトタグが追加されたページのイベントを送信するには、次の構文で gtag.js の eventコマンドを使用します。

とされています。

通常の形式は、

gtag('event', '<eventname>', {<eventparams>});

であり、パラメータの設定も推奨設定がありますが、カスタム イベントの Google アナリティクスでの使用方法についてというページで、以下のとおりカスタム設定の仕方が載っていましたのでこれに従い、設定しているようです。

※イベント送信とは、ここでは「Google Analyticsの発動」を指します。

// Google Analyticsの公式で示されている構文
gtag('event', <action>, {
  'event_category': <category>,
  'event_label': <label>,
  'value': <value>
});

今回の設定では、この公式に従い、各パラメータを設定します。

【ごめんなさい…💦】
各パラメータの説明はうまくできなかったので、こちらを参照ください。

これでGoogle Analyticsのイベントを発動させる関数は設定できました。

pages/_document.jsに設定を追記する

次に、pages/_document.jsを作成し、以下の設定を追記します。

_document.jsは全てのページに共通で適用するHTMLコードを記載する際に使用します。

Google Analyticsの設定は全てのページに共通で持たせたいので、この_documnet.jsを使用します。

どのページにアクセスしてもGoogle Analyticsが機能するようにしていきます。

import Document, { Html, Head, Main, NextScript } from 'next/document'
import { GA_TRACKING_ID } from '../libs/gtag'

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="ja">
        <Head>
          {/* Google Analytics */}
            <>
              <script
                async
           src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
              />
              <script
                dangerouslySetInnerHTML={{
                  __html: `
                  window.dataLayer = window.dataLayer || [];
                  function gtag(){dataLayer.push(arguments);}
                  gtag('js', new Date());
                  gtag('config', '${GA_TRACKING_ID}', {
                    page_path: window.location.pathname,
                  });`,
                }}
              />
            </>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

①必要なimportをする

import Document, { Html, Head, Main, NextScript } from 'next/document'
import { GA_TRACKING_ID } from '../libs/gtag'

1行目は必要な要素のimportになりますが、2行目は先ほど作成したgtag.jsから設定したGA_TRACKING_IDを読み込み使用します。

②各ページに共通で追加する内容を書いていく

1行目は、デフォルトのDocumentをオーバーライド、拡張し、カスタムDocumentクラスを作成し、その中に実際に表示したい内容を書いていきます。

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="ja">
        <Head>
        // 今回は、ここに共通で設定する内容をここに書く
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
  )
  }
}

③Google Analyticsのグローバルサイトタグを追加する

今回追加している内容は以下のとおりです。

{/* Google Analytics */}
  <>
    <script
      async
       src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
    />
    <script
      dangerouslySetInnerHTML={{
      __html: `
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', '${GA_TRACKING_ID}', {
          page_path: window.location.pathname,
        });`,
       }}
    />
  </>

基本的には公式のコードを書いていきますが、他のファイルから読み込んでいるGATRACKINGIDを一部組み込んで設定をしている箇所があります。

誤記があると、うまくGoogle Analyticsが起動しないので注意してください。

【dangerouslySetInnerHTMLとは?】
dangerouslySetInnerHTMLを使用するのは、HTMLの内容をReact(JSX)ではそのまま描画できないからということみたいです。

後は公式に示されているコードをそのまま使用したり、windowプロパティを使用してサイト情報を取得したりして、Google Analyticsへの情報を渡しているということをしています。

これで共通で表示したいHeadの内容を_document.jsに記載できました。

次に_app.jsにGoogle Analyticsがページ遷移に応じて発動するように設定をしていきます。

pages/_app.jsに追記する

Google Analyticsがページ遷移に応じて発動するように設定をしていきます。

pages/_app.jsで作成したgtag.jsを読み込み、設定を追記していきます。

まずは追記する全体のコードはこちら。

<React.Fragment></React.Fragment>の中身はプロジェクトによって異なっている場合がありますので、今回は省略しています。

import { useRouter } from 'next/router'
import { useEffect } from 'react'
import * as gtag from '../libs/gtag'

function MyApp({ Component, pageProps }) {
  const router = useRouter()
  useEffect(() => {
    const handleRouteChange = (path) => {
      gtag.pageview(path)
    }

    router.events.on('routeChangeComplete', handleRouteChange)
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])
  
  return (
    <React.Fragment>

      // 中略

      <Component {...pageProps} />
    </React.Fragment>
  ) 
}

export default MyApp

①gtag.jsの読み込み

まずは、先ほど作成したgtag.jsを読み込みます。

import * as gtag from '../libs/gtag'

※ご自身で作成したプロジェクトの構造に合わせて読込先は変更してください。

②useRouterの設定

routerオブジェクトの取得し、その中身として現在のページパスも含めて取得しています。

これは③のuseEffectの中で現在のページパスを認識するための情報として使用しています。

const router = useRouter()

③useEffectの設定

useEffect(() => {
    const handleRouteChange = (path) => {
      gtag.pageview(path)
    }

    router.events.on('routeChangeComplete', handleRouteChange)
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])

Reactの機能であるuseEffectを使い、useEffectに設定された関数の発動タイミングを設定します。

useEffectの設定で、関数自体の発動はrenderの結果が画面に反映された後になります。

よって、useEffectにより「関数の実行タイミングをReactのレンダリング後まで遅らせている」ということのようです。

これに関しても、公式のサイトからそのまま設定しているので、特に変更もありません。

これで、Google Analyticsを起動した状態で、作成したサイトにアクセスすることで、リアルタイムアクセスが表示されると成功かなと思います。

最後に

今回は、Next.jsのプロジェクトに対し、Google Analyticsを導入する手順をまとめてみました。

ほとんど他のサイトや公式を参考にしましたが、結構わからないところが多かった印象です。

まだまだ勉強は必要になりそうです。

駆け出しアマチュアブロガー兼駆け出しアマチュア趣味プログラマーなので、この記事を読んで間違っているところがあった場合には教えてくださるとうれしいです。

それでは今回はここまでです。

最後まで読んでいただき、ありがとうございました。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

はじめまして、ふじです。
Python、Django、FastAPI、React.js、Next.jsを学習している、ずっと文系のプログラミング独学者です。

目次