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

2021-11-13
サイト構築

gtagとanalyticsの違い_eyecatch

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

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

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

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

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

この2つの違いを簡単に言うと「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を読み込むためのトラッキングコードが発行されます。

アナリティクス管理画面 > サイドバーメニュー > 管理 > トラッキング情報 > トラッキングコード

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

現在アナリティクスから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.

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

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

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

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

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

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

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

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

gtagとanalyticsの違い_001

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 -->

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

gtag.jsの設置場所

アクセス解析の為だけならanalytics.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>

に変更するだけです。

注意ポイント

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

WordPressでの設置方法

人気CMS、Wordpressの場合はテーマによってGoogleアナリティクスのトラッキングコードの設定項目があります。具体的には「UA-」以降の「00000000-1」の数字部分のみを入力するだけで設定できるという機能です。

この機能では動的に上記のような埋め込みコードを作成しているので、やはりソースコードを見ないとanalytics.jsか、gtag.jsのどちらを使用しているのか見分けることが出来ません。

もしもanalytics.jsを使用しているのであれば、この設定欄を空にして出力しないように設定した後、テーマに付属している<head>出力機能の所にgtag.jsの埋め込みコードをコピペすればanalytics.jsからgtag.jsへの移行が完了できます。

外部リンク

GoogleタグをチェックするChromeの拡張機能もあるようです。
【公式サイト】
Tag Assistant Legacy (by Google) - Chrome ウェブストア

基本的には<head>内にコードを埋め込む感じでOKですが、テーマによって千差万別なので詳しいやり方は書けません。ご了承ください。

まとめ

analytics.jsとgtag.jsの違いについてでした。
2021年現在もanalytics.jsは現役ですので、早急にgtag.jsに切り替えなければいけないということはないです。

ただアナリティクスの管理画面から発行されるタグがgtag.jsを使用するものに変わっているのと、gtag.jsの今後の拡張性を考えると切り替えておいてもデメリットはないかと思います。

Googleの進化止まらず!
これまでのハウツーもすぐに過去のものになっていくね・w・

-サイト構築

ありがとうございました。
良かったらシェアしてネ・w・

© 2022 ソロ学