skip to content
私的歌詞倉庫

Next.js製のブログにGoogle Tag Managerを入れた

/ 3 min read

Updated:
View more blogs with the tag react , View more blogs with the tag typescript
Table of Contents

追記（2024-08-28）

App Routerじゃないと正常に計測しないようだったのでgtag.jsに戻しました！

はじめに

このブログ（Next.js製）はgtag.jsを使ってGoogle Analyticsの計測をしていたのですが、ふとある日、アナリティクスを見るといつの間にか計測していませんでした。

昔は動いてたよな〜？と思いつつ、設定画面を見るとGoogle Tag Manager（GTM）を使った導入方法が案内されていたので、導入してみました。

導入

今回はNext.js製のブログに入れたいので、@next/third-partiesを使って計測します。今回はyarnでインストールします。ついでに使わなくなった、@types/gtag.jsも削除しておきます。

Terminal window
yarn remove types/gtag.js
yarn add @next/third-parties

実際に計測する設定をします。headタグのすぐ下に入れます（headタグ内にいれるわけではないようです）。

自分が使っているブログテンプレートのmorethan-logは、Scriptsコンポーネント内にもともとGTMを使って計測するような処理が残っていたのでそちらを置き換えました。

import { GoogleTagManager } from "@next/third-parties/google"


const Scripts: React.FC = () => (
  <>
    {CONFIG?.GoogleTagManager?.enable === true && (
      <>
        <GoogleTagManager gtmId="G-XXXXXX" />
    )}
  </>
)


export default Scripts

置き換えた後に、アナリティクスの画面上でテストをクリックして、計測できていることを確認します。

アナリティクスの画面上の、プロパティ設定 → データの収集と修正 → データストリーム → ウェブストリームの詳細 →実装手順 → 手動でインストールする からテストできます。

GTMをテストする画面

GTMをテストする画面

終わりに

@next/third-partiesを使って、GTMを使って計測できることの旨味はいまいち分かってないですけど、計測できるようにしてみました。

計測できるようになったので、アナリティクスの数値を見つつブログを書こうと思います！

参考文献