GitHub Pagesで、GA4/GTMのテスト環境を構築する

Last updated at 2024-06-27Posted at 2024-01-22

はじめに

私は新卒の頃、未経験ながらGoogle Analyticsを使用してWebサービスのアクセス解析を担当していました。しかし、当時はGAやGTMの計測の仕組みまで理解できていませんでした。

今振り返ると、GAやGTMの理解を深めるには個人の環境に導入して触ってみるのが最適だと感じたため、マーケターなどの非エンジニアの方向けにGitHub Pagesを利用したGA4/GTMのテスト環境構築について書いていきます。

GitHub Pagesとは

公式ドキュメントには、以下のように記載がありますが、一言でまとめると無料で簡単に静的なWebページを公開できるサービスです。

GitHub Pages は、GitHub のリポジトリから HTML、CSS、および JavaScript ファイルを直接取得し、任意でビルドプロセスを通じてファイルを実行し、ウェブサイトを公開できる静的なサイトホスティングサービスです。

一般的にWebページを公開するには、サーバを契約したりなど手間とコストがかかります。

準備

作業に取り組む前に以下の作成が必要となりますので、ご準備ください。

GitHub アカウント
GA4 プロパティ
GTM コンテナ

手順

では、実際に以下の手順に沿ってGitHub PagesでGA4/GTMのテスト環境を構築し、GA4のpage_viewイベントを送信してみます。

GTMスニペットを実装したHTMLファイルを用意する
GitHub Pagesで1.で作成したHTMLファイルを公開する
GTM上でGA4のpage_viewタグを設定し、GTMコンテナを公開する

GTMスニペットを実装したHTMLファイルを用意する

まずは、GTMコンテナ内の管理タブ > Google タグマネージャーをインストールからGTMスニペットをコピーします。

テキストエディタ等で以下のようなHTMLファイルを作成し、指定の箇所にGTMスニペットを記述します。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GA4 Debug</title>
    <!-- Google Tag Manager -->
    <script>
      (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', '${containerId}');
    </script>
    <!-- End Google Tag Manager -->
  </head>
  <body>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=${containerId}" height="0" width="0" style="display: none; visibility: hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    <h1>GA4 Debug</h1>
  </body>
</html>