Google AnalyticsでNext.jsブログ記事のPV(ページビュー)を測定する設定方法【Type Script】

2021-09-11 / Last Update : 2022-05-03

Google Analytics適用のため、Next.jsチュートリアルからの変更点

このブログはこちらの記事に書いた通り、Next.jsのチュートリアルのブログ作成テンプレートを元に作成されています。

先に全体像を掴みます。Google Analyticsを適用するための変更手順は以下の通りです。

Google Analyticsに登録して測定IDを取得する
gtag.tsというファイルを作る
next-env.d.tsにgtagの型を定義する
_app.tsxでnext/routerを使い、SPAでも子ページのPVを測定できるようにする
ページのヘッダにGoogle Analyticsのインストールを記述

以上です。順番に見ていきます。

Google Analyticsに登録して測定IDを取得する

多分見るタイミングによって詳細な手順が変わるかと思いますが、私がやったときの手順を記載します。

まずはGoogle Analyticsにアクセスして、自分の状況に合わせてアカウントを作成していきます。Googleアカウントでログインした状態で進めるとスムーズ。

アカウントにプロパティというものがあるので、これを適当な名前で作成してwebサイト用のアクセスログデータを取得する準備をします。

プロパティの中にデータストリームという項目があります。ここにwebサイトの情報(URLとかわかりやすい名前)を記述します。

データストリームが作成されると、測定IDが表示されます。G-XXXXX01234みたいな英数字文字列です。これを使うのでコピっておきます。

グローバルサイトタグ(gtag)を作成する

さて、ここからはコーディングになります。ルートディレクトリから見て/lib/gtag.tsを作成し以下を記述します。

export const GA_MEASUREMENT_ID = 'YOUR_ID'

export const pageview = (url) => {
  window.gtag('config', GA_MEASUREMENT_ID, {
    page_path: url,
  })
}

YOUR_IDを前の章で取得した自分の測定IDに置き換えます。

windowはJavaScriptで使えるDOM文書を収めるグローバル変数です。ユーザが今開いてるページの情報をとってこれるものと思っておけば多分OK。

参考 : MDN Web Docs | Window

ちなみにgtagというのはグローバルサイトタグのことで、なんでこんなもの作るかというと、Google Analyticsの仕様のため。デベロッパーガイドに使い方が詳しく書いてありますので興味あればどうぞ。

参考： Google Analytics | ページビューの測定

gtagの型を定義する

interfaceでwindowオブジェクトのメソッドgtag()の型宣言します。これがないとgtag.tsがエラーになります。

interface Window{
  gtag(
    type: 'config',
    googleAnalyticsId: string,{ page_path: string });
}

SPAでも子ページのPVを測定できるようにする

以下をpages/_app.tsxに書きます。このファイルはNext.jsのチュートリアルとTypeScript化が終わっていれば既にあるはずです。

import Router from 'next/router'
import * as gtag from '../lib/gtag'

Router.events.on(
  'routeChangeComplete',
  url => gtag.pageview(url)
)

NextのRouterを使って、ユーザーが記事をクリックしてURLが変化した場合にgtagにそのページのURLを教えてあげます。

Next.jsはSPA(シングルページアプリケーション)なので、この記述がないとindex(webサイトのトップページ)にアクセスされたときしかPVが測定できなくなってしまいます。

ページのヘッダにGoogle Analyticsのインストールを記述

最後の手順です。components/layout.tsxのimportとHead部分に追記します。

import { GA_MEASUREMENT_ID } from '../lib/gtag'

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