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

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

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

## GitHub Pagesとは
[公式ドキュメント](https://docs.github.com/ja/pages/getting-started-with-github-pages/about-github-pages#github-pages-%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)には、以下のように記載がありますが、一言でまとめると無料で簡単に静的なWebページを公開できるサービスです。

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

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

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

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

## 手順

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

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290540/88d81d09-1e7e-dde7-6025-5d843d435a2c.png)

テキストエディタ等で以下のような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>
```

### GitHub Pagesで1.で作成したHTMLファイルを公開する

GitHub上のRepositoriesタブ > New で新規リポジトリを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290540/636dfe2f-c111-ecde-56dd-715bcf33c34b.png)


リポジトリの作成画面にて、任意の「Repository name」を入力し、公開設定はPublicを選択します。

GitHub Free及びOrganizationのGitHub Freeでは、公開設定がPrivateでGitHub Pagesを使用することはできません。（2024/1/22時点）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290540/bad1ce99-05bd-c25d-c158-67b3a4dbcbd7.png)

以下添付画像の赤枠から作成したリモートリポジトリのmainブランチに直接index.htmlファイルをアップロードします。

個人でリモートリポジトリのみを使用するため、上記方法を取っています。本来の複数人で開発を進めるGitHubの利用方法とは異なります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290540/66db5932-4fa7-cbfe-34ae-20a2cda7619b.png)

以下のような形で、追加されていれば問題ありません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290540/33c12190-ff6a-83e8-d583-f7d7a9599dff.png)

GitHub上のSettingsタブ > Pages でGitHub Pagesの公開設定を行います。「Build and deployment」下のBranchでビルドするブランチとディレクトリを選択します。

mainブランチのrootディレクトリを選択し、saveをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290540/42b9f994-c969-d297-836d-e6282d81775b.png)

数分経つと、ビルドが完了しURLが発行されます。URLにアクセスしてみると、想定通りページが公開されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290540/7dd862d1-90ec-a212-493d-7e31b257f256.png)

### GTM上でGA4のpage_viewタグを設定し、公開する

最後に、GA4にpage_viewイベントを送信します。GTM上で設定する前に、GA4の測定IDを確認します。

GA4管理画面の管理（左下の歯車マーク） > データの収集と修正 > データストリーム > 作成したデータストリーム をクリックします。

※データストリームは、「ストリームを追加」から新規作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290540/6cc31d59-8dda-80ce-d336-7a2f49f43d64.png)

測定IDをコピーします。また、拡張計測機能は不要なため、オフにしておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290540/ac63e075-5281-4d31-1d65-d61c82484901.png)

GTM上で、2種類のタグ（GoogleタグとGA4イベントタグ）を作成し、GTMコンテナを公開します。タグの設定で、測定IDの入力が必要になります。

![534c2ae7-702b-47d2-b3bb-1460ffcf6d65.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290540/d9d13b79-6e74-343c-1eef-fdb8087689cb.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290540/ac9e45db-c59b-a5cc-5be0-bf28af6e67c2.png)

GTMコンテナ公開後にページにアクセスしてみると、GA4プロパティ側でアクセスログが計測されているのが分かります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290540/c79a7bc5-d4cc-87d6-fd35-82946c1076ed.png)

## おわりに

今回、GitHub Pagesを利用してGA4/GTMのテスト環境を構築してみましたが、一般的なWebページの公開手順と比較しても手間とコストがかからず便利でした。

GA4やGTMを利用する非エンジニアの方は、今回の記事を参考にテスト環境を構築してみてはいかがでしょうか。

どなかたの参考になれば、幸いです。