GitHub Pages: GA4の設定

Table of Contents

GitHub Pages開発環境
- 技術スタック
- 作業ディレクトリ構成
Google Analyticsの設定
- Google Analyticsの利用登録
- 記事ページへの埋め込み
References

GitHub Pages開発環境

技術スタック

項目
ウェブホスティングサービス	GitHub Pages
静的サイトジェネレーター	jekyll
editor	Visual Studio Code
Analytics	Google Analytics 4
OS	Ubuntu 20.04 LTS

作業ディレクトリ構成

current working directory
├── _post #ブログのpost格納フォルダ
├── ...
└── _img  #ブログで用いる画像ファイル格納フォルダ

Google Analyticsの設定

方針は

GA Propetyの作成
Measurement IDを各ページに逐次埋め込む

Google Analyticsの利用登録

利用登録手順は以下です：

Google Analyticsにアクセスします。
Account設定をします（基本的には自分のGoogle Accountを入力）
Adminをクリックします。
Create Propertyという項目があるのでクリックします
Property setupをします
最後に利用規約に同意したらGoogle Analyticsのダッシュボードが開く

GAは無料で使えるのか？

プロパティのサービス料金は、1 つのプロパティに紐づけられているすべての（該当する）プロファイルのヒット数を集計して算出されます。「ヒット」とは、最終的にデータとして本サービスに送信されて処理される、操作の集合を指します。例えば、ページビューや e コマースのヒットなどがあります。他にも、さまざまなライブラリによる本サービスの呼び出しがヒットにあたる場合がありますが、このような場合に限定されるわけではありません。GAは 1 アカウントにつき 1 か月あたり 1,000 万ヒットを上限としてお客様に無料で提供されます。

記事ページへの埋め込み

測定対象を指定します：

Adminをクリック
Data Streamsをクリック
Add streamをクリック
測定対象URLを指定する
Global site tag (gtag.js)が発行されます
gtag.jsタグをHTMLの<head>セクションにコピーします。また、ウェブサイトビルダー（WordPress、Shopifyなど）をお使いの場合は、グローバルサイトタグをウェブサイトビルダーのカスタムHTMLフィールドにコピーしてください。

例

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-12345"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-12345');
</script>

References

Share Buttons
Share on:

Feature Tags
Leave a Comment
(注意：GitHub Accountが必要となります）

GitHub Pages作成環境の構築 1/N