Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@tetsuro731(テッツォ)

GA4の導入をGitHub Pagesで試してみる【Google Analytics4】

Last updated at Posted at 2024-08-13

はじめに

Google Analytics 4 (GA4)はwebサイトのログの分析に使えるツールだ。
Googleから提供されており、無料で使える。
試しにGA4使ってみたいなーと思ったものの、自分は本格的なwebサイトなんて持ってないことに気づいた。

そこでGitHub Pagesを使って簡易的なWebサイトを作ってそこにさくっとGA4の導入をしてみよう。
本当は収益を得られる自分のサイトを用意してから導入する方がよさそうだが、今回はまずGA4の導入方法を掴んで、具体的なビジネスモデルなどは後々考えよう。

GitHub Pagesの設定

Webサイトを作る方法はいろいろあるが、エンジニアであればGitHubの機能であるGitHub Pagesを使うのが簡単だ。

以下の説明を見ながらまずは土台となるWebページを作ろう。

アカウントはすでにあるものとして、適当なリポジトリを作成しよう。
自分の場合はアカウント名がtetsuro731でGA4_testという名前のリポジトリを作った。

git clone https://github.com/tetsuro731/GA4_test.git

このままだとリポジトリを作成しただけで表示するものが何もない。
とりあえず"Hello World"だけを表示する簡単なhtmlを書いてみよう。

index.html
<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

これをcommit&pushする。
次にGitHub Pagesの設定をする。
リポジトリの"Settings" → "Pages"からBranchの設定をmainに設定する。
そうすると以下の画像のようにURLが表示されてアクセスできるようになる。

スクリーンショット 2023-11-12 22.31.46.png

自分の場合は以下のURL。
https://tetsuro731.github.io/GA4_test/

アクセスしてちゃんと表示されていればOK。

スクリーンショット 2023-11-12 22.34.19.png

これでいったん超簡易的なWebページを準備できた。

GA4の設定

つぎにGA4側の設定に移ろう。
まずはGA4アカウントを作成する。
https://marketingplatform.google.com/intl/ja/about/analytics/

詳しい手順は以下のページを見ながら進めた。
https://border-haze.co.jp/web-recipe/ga4-basic/

今回はアカウント名を適当に自分のアカウント名である「tetsuro731」とした。
データの共有設定は全部デフォルト。

次にプロパティの設定も適当に「GA4_test」などとした。
タイムゾーンと通過はデフォルトでアメリカになっていたので日本に変更。

ビジネス目標は今回は技術目的なので適当に入れる。

プラットフォームはWeb, Android, iOSの3つがあるが、今回はウェブを選択。
URLの表示を求められるので、先ほどGitHub Pagesで作ったURLを入れて「ストリームを作成」する。

スクリーンショット 2023-11-12 22.40.01.png

これで基本設定は完了。以下の情報が表示されていることを確認する。

  • ストリーム名
  • ストリーム URL
  • ストリーム ID
  • 測定 ID

タグの設定

Webサイトの訪問データなどをGA4で計測するには、HTML内にタグ（トラッキングコード）を仕込む必要がある。
これを自動で管理してくれるツールがGTM (Google Tag Manager)であるが、まずは直接埋め込む方法でやってみる。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async 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>

このJavaScripではGoogleの解析スクリプト（gtag.js）を非同期で読み込んだあとに時刻とトラッキングIDの情報を取得、送信するものだ。

これを実際のWebページのheadタグの後に差し込めばよい。
だが、この方法だと実際にHTMLを手動で書き換える必要があり、いろいろとめんどくさい。
後述のGTM (Google Tag Manager)を使えばそのような作業をせずともタグを全部管理してくれる。

GTM (Google Tag Manager)の設定

以下も参考：https://border-haze.co.jp/web-recipe/gtm-basic/#index_id5

まずはGoogle Tag Managerの公式ページからアカウントを作成する。
https://tagmanager.google.com/#/home

アカウント名（tetsuro731とした）と国名（日本）を入力する。
コンテナ名には自分のサイトのURLを入れる。
tetsuro731.github.io/GA4_test/
利用規約に同意すればOK

以下のようなポップアップが出てくる。

Google タグ マネージャーをインストール
下のコードをコピーして、ウェブサイトのすべてのページに貼り付けてください。
1. このコードは、次のようにページの <head> 内のなるべく上のほうに貼り付けてください。
<!-- Google Tag Manager -->
略
<!-- End Google Tag Manager -->
2. 開始タグ <body> の直後にこのコードを次のように貼り付けてください。

<!-- Google Tag Manager (noscript) -->
略
<!-- End Google Tag Manager (noscript) -->

ということで、言われた通りの場所に貼り付ける。
リポジトリのmainにmerge&pushすればよい。
最終的なindex.htmlはこんな感じ。

index.html
<!DOCTYPE html>
<html>
<head>
    <title>Hello World</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','GTM-XXXXXXXX');</script>
    <!-- End Google Tag Manager -->
</head>
<body>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXXX"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    <h1>Hello World</h1>
</body>
</html>

GTM-XXXXXXXXの部分がGTM IDと呼ばれているところ。

GTMの管理画面から「新しいタグを追加」→「タグの設定」→「Googleタグ」を選択
GA4の画面からタグID（G-XXXXXXXXXX みたいなやつ）をコピペして貼る。
トリガーに映って「Initialization - All Pages」を選択。
適当にタグ名をつけて保存する。

ちなみにGoogleタグを選ぶ際に「Googleアナリティクス」→「Googleタグ」
としても同じっぽい。

貼り付けるコードの内容

コピペするだけなので中身を理解しなくても動くが、一応軽く説明しておく。
head内のスクリプトで定義されるfunction()は無名関数でページがロードされるとすぐに実行される。
j.async=true;であるため非同期となり、これにより他のwebページ上の処理を邪魔しないようにする。
w[l].push()でGTMのスタート時間やイベント名などをdataLayerに追加し、これによりGTMがいつ動作開始したかわかるようにする。
j.srcでJavaScriptファイルを読み込むためのURLを設定。

ちなみにbody内の<noscript>はJavascriptが無効だった場合にiframeでトラッキングコードが機能するようになっている。

毎回コードをコピペする必要ある？

今回はHTML内に直接コピペする方法を使ったが、WordPressなどを使う場合はプラグイン経由でGTMの設定ができたりするので、UIからちょこちょこやるだけで設定できるっぽい。

プレビューでタグの検証

GTMのプレビューから自分のURLを入力してConnectを押す。
"Tags Fired" と表示されてればOK。
プレビューで映ったwebサイトで試しに更新を2回ほどしてみる。

GA4の「レポート」→「リアルタイム」を見てみよう。

スクリーンショット 2024-08-13 23.04.07.png

自分の住所である東京から2回アクセスが来ていることがわかる。

本番公開

準備ができたので、GTMのUI右上から「公開」を選ぶ。
バージョン名に「test」とか適当な文字をいれて「公開」ボタンを押す。
再度URLから更新ボタンなどを押してGA4のレポートに反映されていることを確認する。
GTMからは「公開中」になっていることを確認する。

まとめと感想

  • 今回はGitHub Pagesから最小構成のWebページを作り、GTMを使ってGA4を導入してみた
    • GitHub Pagesはこのように簡単に無料でWebページが公開できるのでとても便利
  • 今回の内容は本当に「基礎の基礎」であるが、一度自分で立ち上げてみることで感覚を掴むことができると思う
  • 普段はPythonとかSQLばっかり書いてるので、たまにJSとかフロントっぽいの見ると勉強になるね
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?