Zenn
📈

VitePressにGoogle Analytics(GA4)を導入する

2025/02/17に公開
Google Analytics
TypeScript
VitePress
tech

はじめに

  • VitePressで作った自ブログに、Google Analytics(GA4)を導入し、アクセス解析をしたい。

TL;DR

  • Google Analytics(GA4)でプロパティを作成し、Googleタグを取得する(G-XXXXXXXXXX 形式)
  • VitePressの設定ファイル( .vitepress/config.mts )を開き、以下を記載する
    • Googleタグ G-XXXXXXXXXX は取得したものに置き換える
.vitepress/config.mts
export default defineConfig({
  // (中略)
  head: [
    ["script", { async: "true", src: "https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"}],
    ["script", {}, "window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-XXXXXXXXXX');"]
  ],
  // (後略)
})

Google Analyticsのセットアップ

アカウントを作る

  • Google Analyticsは、「アカウント」と「プロパティ」が1対多の関係で紐づいている。基本的に1Webサイト=1プロパティとなる。
  • 既にアカウントが存在する場合はそのアカウントを、存在しない場合は以下の手順で作成する。

まずはGoogle Analyticsにログインし、左メニューより「管理」を選んで、「新規」を押下する。

アカウント名を入力し、「次へ」を押下する。

プロパティ名を入力し、タイムゾーン設定を「日本」、通貨を「日本円」に設定し、「次へ」を押下する。

業種は適切なものを、ビジネスの規模は個人の場合「小規模」を選択し、「次へ」を押下する。

「ウェブ/アプリのトラフィックの分析」を選択し、「作成」を押下する。

データ収集の開始

  • データを収集するには、「Googleタグ」と呼ばれる識別子と、その識別子をクエリパラメータに付与したJavaScriptファイルを読み込ませる必要がある。
  • セットアップ方法は以下の通り。

先の画面よりそのままデータストリームの設定画面に移るため、「ウェブ」を選択する。

ウェブストリームの設定ページで、URLとストリーム名を入力し、「作成して続行」ボタンを押下する。

表示されたHTMLコードの中に、Googleタグ G-(10桁の英数字)が埋め込まれているので、これを控えておく。（スクショで黒塗りしている部分）

VitePressの設定を変更

  • VitePressの設定ファイル .vitepress/config.mts に head オプションを記載することで、ビルド時に書き出されるHTMLファイルのheadタグを埋め込むことができる。
  • 以下のようにheadオプションに2行追加する。スクリプト中の G-XXXXXXXXXX は、自分のGoogleタグに置き換えること。
.vitepress/config.mts
export default defineConfig({
  // (中略)
  head: [
    ["script", { async: "true", src: "https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"}],
    ["script", {}, "window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-XXXXXXXXXX');"]
  ],
  // (後略)
})
  • ちなみに、 head で指定する配列は以下の形式で指定する。
["タグ名", { 属性 }, "タグ内の内容"]
  • 上記設定を記載すると、以下のように書き出される。
<script async="true" src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script>

設定反映を確認

  • 設定反映後、デプロイしたら一度ページにアクセスしてみる。開発者コンソールを開き、headタグ内にscriptタグが埋め込まれていれば、設定完了。

  • Google Analyticsの画面に戻り、「インストールをテスト」を押下する。

  • 正しく設定されているようであれば、正しく検出された旨が表示される。

  • GAを設置したページを何度か再読み込みしたり、別端末からアクセスしてみて、少し経ってからGoogle Analyticsのトップページを訪れると、アクティブユーザにカウントが表示される。
  • もし時間を置いても表示されないようであれば、以下を確認する。
    • uBlock等の広告ブロックが無効になっていること。（重要）
    • 正しいプロパティを表示していること。
    • 正しいGoogleタグを設定していること。
    • ビルドが正常に完了し、headタグ内にスクリプトが埋め込めていること。

参考

https://github.com/vuejs/vitepress/issues/1131

Discussion