gtag.jsとanalytics.jsの違いとは？Googleアナリティクスに使われるスクリプトについて。

Webサイトのアクセス解析と言えばGoogle Analyticsです。

サイトのheadなどにトラッキングコードを設置することでサイト訪問者の解析を行うことが出来ますが、使用できるスクリプトにはグローバルサイトタグ（gtag.js）とアナリティクスタグ（analytics.js）の２種類があります。

では「gtag.js」と「analytics.js」は何が違うのか？どちらを使えばよいのか？
公式サイトで調べても分かりにくいので簡単にまとめました。

執筆時現在はどちらのスクリプトを使用していても特に問題ありません。

2022.5.3追記

GA4の場合はgtag.jsが必要です。ページ下部にこの内容を書き加えました。

この記事の目次

アナリティクス：gtag.jsとanalytics.jsの違い

この２つの違いを簡単に言うと「gtag.js」が新しい仕様。
そして「analytics.js」が古い仕様です。
※古いといっても現役です。gtagに比べてという意味です。

初代urchin.js～旧世代ga.js(dc.js)
2014年～：analytics.js
2017年～：gtag.js

という感じに進んでおります。
ga.js以前のスクリプトは既にサポートが終了しています。
なので多くの方がanalytics.jsまたは、gtag.jsのどちらかを使っているはずです。

メモ

Chromeなどのブラウザでデベロッパーツール（開発者ツール）を起動してから、更にCtrl ＋ Fで検索欄を立ち上げ、analyticsやgtagなどのキーワードでHTMLソース（head内）を検索すれば分かります。

新規で発行されるタグはgtag用

執筆時現在、Webサイトに新規でGoogleアナリティクスを導入しようとすればgtag.jsを読み込むためのトラッキングコードが発行されます。

【UAプロパティの場合】
アナリティクス管理画面＞サイドバーメニュー＞管理＞トラッキング情報＞トラッキングコード

にアクセスすれば「グローバルサイトタグ（gtag.js）」という見出しが現れますが、これがgtag.js用のコードです。

GA4という新しいプロパティーの場合は以下です。

【GA4プロパティの場合】
アナリティクス管理画面＞サイドバーメニュー＞管理＞データストリーム＞サイト名＞タグ設定手順の中

現在アナリティクスからanalytics.jsを使用するトラッキングコードを直接発行することは出来ませんが、analytics.jsは引き続き使用することが出来ます。

あくまで執筆時現在はanalytics.jsよりも新しいgtag.jsにアップグレードすると、そのままよりも更にメリットがありますよ！という感じの内容となっています。

gtag.js（グローバルサイトタグ）とは？

ここでgtag.jsを導入するメリットは何なのかが気になるところです。

About the global site tag
The global site tag (gtag.js) is a single tag you can implement onto your website in order to use a variety of Google products and services. The tag works with products like Google Ads, Campaign Manager, Display & Video 360, Search Ads 360, and Google Analytics. Instead of having to manage multiple tags for different products, you can just use the global site tag and implement it once across your entire website.
引用元：About the global site tag | Global site tag (gtag.js)

【Google翻訳による日本語訳】
グローバルサイトタグについて
グローバルサイトタグ（gtag.js）は、さまざまなGoogle製品やサービスを使用するためにWebサイトに実装できる単一のタグです。このタグは、Google広告、キャンペーンマネージャー、ディスプレイと動画360、検索広告360、Googleアナリティクスなどの製品で機能します。さまざまな製品の複数のタグを管理する代わりに、グローバルサイトタグを使用して、Webサイト全体に一度実装することができます。

とのことです…ブログ運営者の目線ではここで？になります...

で、調べるとGoogle広告（出す側）とアナリティクスを連携してリマーケティングすることが出来たり、Webサイト上でのイベントの取得（どこがクリックされたか？）などの情報も簡単にアナリティクスに送信することが出来るとのこと。

その他にも「ログイン」というイベントや「ショッピングカートに追加」という様々なイベントの送信もできるらしいです。

外部リンク

【参考】
Google アナリティクスのイベントを測定する | ウェブ向けユニバーサルアナリティクス（gtag.js）

で？具体的にどう良いのか？
後述するgtag.jsの埋め込みコードの「gtag('config', 'GA_MEASUREMENT_ID');」部分にて、該当するサービスのタグIDを追加するだけでアナリティクスと他サービスなどを簡単に連携できるのだそう。

gtag.jsを使用していればGoogleが提供するサービスごとに別のタグを用意する必要はないということです。
この色々なサービスの中の１つがアナリティクスということなのでしょう。
普通にPVやUUを測るくらいならanalytics.jsのみを読み込んでおけばOKっぽい。

追記

2023年7月よりアナリティクスが新しいプロパティGA4に完全移行します。
これに伴い、analytics.jsではGA4が使えません。詳細はページ下部にて。

gtag.jsとanalytics.jsのコード比較

ではそれぞれの埋め込みコードを見比べてみます。

gtag.js用のコード

gtag.jsを使用する場合は下記のコードを<head>タグの直後に埋め込む。
GA_MEASUREMENT_IDにはアナリティクスのプロパティIDが入ります。

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

  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

外部リンク

【参考】
サイトに gtag.js を追加する | ウェブ向けユニバーサルアナリティクス（gtag.js） | Google Developers

gtagの場合はハイライトしてある「gtag('config', 'GA_MEASUREMENT_ID');」という部分に自サイトのアナリティクスのプロパティIDが入ります。

これによってsrcで参照したURLからanalytics.jsが読み込まれる模様です。
gtag.jsを使用しているからと言ってanalytics.jsが読み込まれなくなるわけではなく、analytics.jsもヘッダーに読み込まれます。

gtagの読み込みでanalytics.jsも読み込まれる

gtag.js用のコードのconfig部分に他サービスのIDを追加すればそのサービスに使用するスクリプトが読み込まれるという事っぽいです。

analytics.js用のコード

続いてanalytics.jsを読み込むコードです。
圧縮されているので見にくいですが、JavaScriptでヘッダーにトラッキングコードを動的に生成するものです。

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

外部リンク

【参考】
サイトに analytics.js を追加する | ウェブ向けアナリティクス（analytics.js）

アナリティクス以外のサービスを使いたい場合、このコードの他にそのサービス専用のコードも設置する必要があるという事ですね。

gtag.jsの設置場所

アクセス解析の為だけならanalytics.jsのみの使用でも何ら問題ないです。
（追記：2023年7月よりgtag.jsが必須となりそうな流れです。）

ただ新しい方が良いだろう！ということでanalytics.jsからgtag.jsに移行するにはどうすれば良いのか？

gtag.jsの設置場所は<head>（head要素の開始タグ）の直後とされています。

また、既にanalytics.jsを導入している場合、旧コードの読み込みを新コードに変更するだけでOKとのことです。

つまり、<head>～</head>までの間で

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

と記述してある部分を

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

  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

に変更するだけです。

外部リンク

【参考】
analytics.js から gtag.js に移行する | ウェブ向けユニバーサルアナリティクス（gtag.js）

注意ポイント

コードはアナリティクス管理画面のトラッキングコードから確認して下さい。
自分のものをヘッダーにコピペすればOKです。