すべてのページにGoogle Analytics（GA4）のタグを埋め込む簡単な方法

Google Analyticsのタグをすべてのページに埋め込むのは結構大変ですよね。

WordPressなど動的なページならやりようがありますが、静的なページの場合は困ります。

下記のようなやり方があるので、ご紹介します。

前提として以下のものが必要です。

• headタグがあること。
• jQueryが使えること。
• 静的なページであること（WordPressなど、動的なページであれば、ほかに方法があります）。

以下の手順で記述していきます。

1.Google Analytics（GA4）のタグを記述したHTMLファイル（ここでは、ga.htmlとする）を用意する。

Google Analyticsで指定されるタグそのままでよいので、HTMLファイルに記述します。

＜測定ID＞にはGoogle Analyticsで指定されているものを記述します。

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

  gtag('config', '＜測定ID＞');
</script>

2.ga.htmlをheadタグに読み込むJavaScriptを記述したJavaScriptファイル（ここでは、ga.jsとする）を用意する。

※すでにすべてのページに読み込んでいるJavaScriptファイルがあれば、そのファイルに記述する方が良いです。そうすれば、3.の作業は不要になります。

※ga.jsはjsフォルダにあるものとします。

<!-- Google Analytics -->
$(function () {
  $.get("../ga.html",function(data){
    $("head").append(data);
  });
});

3.すべてのページにga.jsをインポートする。

headタグに以下を記述します。

  <script src="/js/ga.js" type="text/javascript"></script>

以上で、終わりです。

このようにすれば、タグの内容が何かしらの理由で変更になっても、簡単に変更ができるようになります。