Web制作者がgtag.jsで知っておきたいGoogleアナリティクスの今

Googleアナリティクスの新規プロパティ作成時に発行されるトラッキングコードが、gtag.js に変わりました。

こんにちは、Googleアナリティクス大好きカグア！です。gtag.js というのは2017年9月25日現在ベータ版として提供されていますトラッキングコードです。次期バージョンと見られ、現在英語版ヘルプまでは公式に情報公開されています。

本記事では、現時点でわかっていることと、今後いろいろと出てきます情報を読む上での前提知識レベルの内容を提供することを目的としています。詳しくは公式ヘルプや自己責任にてご実行下さい。

＞＞人気の「Googleタグマネージャ: 本」最新一覧はこちら。
Amazonで詳しく見る

追記：2017年10月5日　ビーコン送信の確認方法を追記。
追記：2017年9月29日　確認したところ、analytics.js の表記と、ベータの表記はなくなっていました。
追記：2017年9月28日　Search Consoleとの連携について言及。

関連記事
＞＞Googleアナリティクス基礎：パラメーターの設定や使い方＜完全版＞
＞＞Googleアナリティクス基礎：クロスドメイントラッキングの設定
＞＞Googleアナリティクス基礎：設定してるのに動かない時の対応

新しいトラッキングコード

gtag.jsとは

2017年9月25日時点ではまだベータ版のGoogleアナリティクスの最新トラッキングコードです。すでに、管理＞プロパティの列＞トラッキング情報 のメニューから確認することができます。

そしてなんと、新規にGoogleアナリティクスでプロパティ作成しますと、ベータ版ながら以下の最新コードがデフォルトで貼り付け指示されます。

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

コードを見ていただきますとわかるように、Googleタグマネージャベースです。トラッキングID（プロパティID）を入れる箇所が2つになる、という点にご注意下さい。

gtag.jsの変更点

前述のように、ベースが変わりますので、前回の ga.js から analytics.js への変更のときのように、命令の置換 では、ないことに注意しましょう。

• 設置はheadタグ直下
• そもそもPVの送信を送る
• イベントトラッキングなど命令はほぼすべて変更

HEADタグ直下に配置

これは、おそらくGoogleオプティマイズ絡みだと思います。A/BテストをするときのWebテスト機能を実装するときも、たしかHEAD直下において、すぐリダイレクトするようにしていました。

HEAD直下なので、コードを間違えると、ページが真っ白にもなりかねません。注意しましょう。

基本PV送信する

これまでは、ga(‘send’,～) というSEND命令を実行しなければ、Googleアナリティクスへはデータ送信がされませんでした。

しかし、今回の変更から、「データ送信するほうがデフォルト」と変更されたようです。つまり、送信したくないときは、あえて「送信しない」とシグナルを送らなければいけなくなりました。

gtag(‘config’, ‘GA_TRACKING_ID’, { ‘send_page_view’: false });

＞＞Add gtag.js to your site  |  Analytics for Web (gtag.js)  |  Google Developers

通常使う分には、送信が基本だと思いますので、気に留めておくくらいで良いかとは思います。こちらに詳しく掲載されています。
＞＞Google アナリティクスの新しい計測タグ「gtag.js (BETA)」が登場！ – KOBIT

イベント計測など個々の変更点は各自で調べる

このようにデータ送信の設計思想自体の変更ですので、イベントトラッキングやクロスドメインなど、これまで別途設定が必要だったノウハウは、ほぼ全てリプレースとなります。

しばらくはヘルプと実際の計測結果を検証しながら、実装への計画を考える、ということになるかと思います。

それでは、定番オプションの、イベントトラッキングとクロスドメインについて見ていきましょう。

追記：新規に始める人はもうgtag.js一択

2017年9月29日確認したところ、これまでは併記されていた analytics.js のコードと、ベータの表記がなくなっていました。

つまり、これからGoogleアナリティクスを始めようという人は、gtag.js が当たり前のものとして刷り込まれていくことになります。Web担当者は、そうした人から質問に備えておきましょう。

変更点（イベント・クロスドメイン）

イベントトラッキング

通常のページビューとは異なるデータ送信をしますので、datalayerという書き方をして、別途gtag.jsにシグナルを送って下さい。
＞＞Event tracking with gtag.js  |  Analytics for Web (gtag.js)  |  Google Developers

こんな感じです。ここでポイントなのは、gtag.js では、カテゴリー名に予約後があるという点です。

gtag(‘event’, ‘event_name’, {
‘event_category’: categoryName,
‘event_label’: labelName
});

あらかじめgtag.jsのほうで定義されているイベント名にしますと、自動的にカテゴリー名などが割り振られますので、命名するときは予約語を確認しましょう。

いっぽうで、自動的にカテゴライズされるという面では便利になる人もいるかと思います。

クロスドメイントラッキング

Googleタグマネージャでクロスドメイン計測をしたときも、参照元除外やホスト名結合フィルタなどは、別途設定しますので、それらは同様かと思います。

ドメインをまたぐリンクを持つサイト側で、以下のような設定を追記することになります。

gtag(‘config’, ‘GA_TRACKING_ID’, {
‘linker’: {
‘domains’: [‘example.com’]
}
});

なお、「移行先ドメインがドメインを自動的にリンクするように設定されている場合、デフォルトでリンカーパラメータを受け入れ」るとのことなのですが、おそらく、「cookiedomain:auto」のことだと思うのですが、だとすればデフォルトでautoですので、大丈夫です。

このあたりはまだ未検証です、すみません。

オプトアウトアドオンなど

試してはいないのですが、ここまでコードや設計思想がかわりますと、オプトアウトアドオンなども機能しなくなるのでないかと思っています。その他、ツール類は影響を受けるのかと思います。

試したかたがいらしたら、ぜひシェアしてくださるとありがたいです。

その他の変更点

eコマースなど拡張されたものもある

こちらによりますと、拡張eコマースは強化されたような書き方をしていますね。
＞＞Enhanced ecommerce with gtag.js  |  Analytics for Web (gtag.js)  |  Google Developers

カスタムディメンションはconfig時に送信可能

カスタムディメンションの送信はこちらの記事が、おすすめ。
＞＞gtag.jsでページビューのときにカスタムディメンション送信 – Qiita

こちらの記事でも別の書き方が書かれています。
＞＞従来とは違うgtag.jsのクリック計測からその他の計測方法について | SNBI – アクセス解析/マーケティングを中心に生きた知識をお届け

gtag.jsになって、一番面倒になったのは、カスタムディメンションかもしれませんね。これは、ちゃんと知識をアップデートしておかないと、置いてかれるほどですね。

デベロッパーツールでのビーコン送信確認はcollectで大丈夫

確認しましたが、gtag.js は最初にGoogleタグマネージャを呼び出しますが、それでもそのGTM内で動かしているのは、ユニバーサルアナリティクスなので、ビーコン送信の確認はこれまでの collect?v=～ で大丈夫です。

Googleタグマネージャで実現していることはおそらく実現

おそらくマルチトラッキングなど、Googleタグマネージャで自動的に処理してくれる便利な面は実現していると思われます。

たとえばマルチトラッキング。Googleアナリティクスでは、あえて second.tracker ～ みたいなことを宣言しなくてはいけませんでしたが、Googleタグマネージャで使う分には自動的に付与してくれています。

公式ドキュメントを見ますと、これだけ書いてくれればいいよ、とありますので、Googleタグマネージャのそれが効いているものと思われます。

gtag(‘config’, ‘GA_TRACKING_ID_2’);

GoogleタグマネージャでのGoogleアナリティクスの扱いになれているかたは、移行は楽かもしれません。

このように、さらっと公式にデフォルトに登場しましたgtag.jsですが、WEB制作者としては、どのように接するのがベストでしょうか。

ちょっと考えてみました。

トラッキングコード移行のベストウェイ

移行におけるメリット・デメリット

とりあえずは様子見でよいという意見もあります。たしかにまだベータ版とされていますので、急ぐ必要はないかとは思います。
＞＞Google アナリティクスの新タグ「gtag.js」はまだ使わないという判断が良いと思う。 – google analytics – 運営堂

重要なことは、今回の変更はベース技術がGoogleタグマネージャよりになった、という点。選択肢としては以下になるかと思います。

• そのまま変更せずに使う
• gtag.jsへ移行する
• Googleタグマネージャへ移行する

それでは個別に見ていきましょう。

そのまま使い続ける

現状でも、2つ前のトラッキングコードである ga.js、こちらも現役で使えています（サポートや機能更新はなし）。ですから、今回も 現状正式版の最新である analytics.js であれば、しばらく問題なく使えるだろう、という予想はたちます。

ですから、もっともリスクが少ない選択肢は、現状維持です。ただ、しばらくは、です。

といいますのも今回の更新は、前回の、ga.js から analytics.js へ変わったときのように、命令置換でなんとかなるものではない、なのです。つまり、gtag.js で困ったときにネットに出てくる古い情報を置換で対応できなくなる可能性が高くなります。

Googleアナリティクスは基本、自己責任で自分で何とかしなくてはなりません。ですから、ネットにどう情報が出てくるかということはとても重要になり、そういう点では、analytics.js 、Googleタグマネージャ、gtag.js のどの情報が多く出てくるのかを念頭におきつつ、使い続けることになるかと思います。

gtag.js へ移行する

現状、Googleアナリティクスがデフォルトで発行してくるコードですから、これがもっともGoogleの意向にそっているという点では、安心できる道です。しかし、情報源はほとんどなく、何かするにしても英語の公式ヘルプを見ながら作業する、ということになります。

また、ベータ版ですので、どうなるかわからないという不安要素はゼロではありません（これまでベータとして出したものは、ヤーメタはないです。試作品とした登場した autotrack.js は今はラボに行っています）。
＞＞Autotrack — Google Analytics Demos & Tools

Googleタグマネージャへ移行する

おそらくこれがもっとも現実的かつ建設的な道かと思います。そもそも、gtag.js 自体がGoogleタグマネージャベースの技術と見られますので、安心感があります。

・そのまま使い続けることのデメリット
機能追加やアップデートが行われないため、かかわるエンジニアなどが減っていく可能性。それにより情報が減るリスク。

・gtag.jsに移行するデメリット
とにかく学習コストが大きい。ベータ版なので、今後変更する可能性もゼロではない。イベントトラッキングやクロスドメイントラッキングなど、設定や設置のリプレースコスト。

・Googleタグマネージャに移行するデメリット
おそらく現状ではこれがもっともコストが少ないのかなあと考えますが、ちょっと後述します。

Googleタグマネージャへの移行のデメリット

Googleタグマネージャへ移行するデメリットとしては、これらかと思います。

• オプティマイズなどウェブテスト関連で一部いろいろと難しいという声があること。
• ごくまれにではありますが、Googleタグマネージャにかぎらず、タグマネジメントツール全般のデメリット。
  （タグマネジメントツールが落ちたらショックが大きい、有料化したらまず不可避など）
• Googleタグマネージャへの移行コストがかかるということ。

GoogleアナリティクスをGoogleタグマネージャに移行するときに、イベントトラッキングのonclickを削除しなくてはいけないとか、それなりのコストは発生します。

ただ逆に言えば、今後これらのコストをいつ払うのか、というだけな気もします。

Googleタグマネージャの情報もだいぶ出揃ってきていますので、情報収集については下地はできてきたかなという気はします。

タグマネジメントという、ちょっとわかりづらい概念に変わるというところに抵抗がある人が一定数はいるかもしれませんが、そことの折り合いをどうつけるか、かなと。

Googleタグマネージャとオプティマイズ

現状、公式コミュニティなどで話題に上るのはウェブテスト関連です。とくにリダイレクト関連。

ページを非表示にするスニペットの直後に、変更済みの Google アナリティクス トラッキング コードが設定されていることを確認します。
＞＞ページを非表示にするスニペットを設定する – Optimize ヘルプ

これをGoogleタグマネージャで実践しようとしますと、タグの発行順など細かく管理する必要があります。

ただ、このあたりは、gtag.jsを使っても、原稿のanalytics.jsを使っていても、検証コストはかかるはずですので、時間が解決してくれるのかなとは思いますが、しばらくは混沌とした状況が続くものと思われます。

ASPやプラグインでの利用者は注意

WordPressのプラグインや、ブログASPや、AmebaOwnedなどのWEBサービスを使っているかたは、それらが発行するトラッキングコードのバージョンに従うことになります。おそらくは、ユニバーサルだと思いますが、それでもまだga.jsを使っているサービスも見ることもあります。

ですから、自分がどのバージョンのGoogleアナリティクスを利用しているのかを、把握しておきたいものです。そうでないと、トラブルがあったときに、どのバージョンの情報源にあたれば良いのかがわからなくなります。

今後ネット上には、以下のバージョンのGoogleアナリティクス関連情報が混在することになります。

• urchin.js（まず無いですが）
• ga.js（非同期版と書かれていることが多い）
• analytics.js （ユニバーサルアナリティクス）
• Googleタグマネージャ（ユニバーサルアナリティクス）
• Googleタグマネージャ（非同期タグ版※まず無いですが）
• gtag.js（最新版）

これらのどれに今後情報が集まるのかを予想して、移行を考えると良いかと思います。

Search Console対応など連携は未知

2017年9月28日のGoogleアナリティクス公式コミュニティで、「Search Consoleの認証がうまくいかなかった」という声が投稿されていました。Search Consoleで、Googleアナリティクスのコードがあると自動的にサイト管理者と認識してくれる、という機能ですね。

gtag.jsはベータ版ですので、他にもおそらく、タグアシスタントに反応しないのでは？ということなど、他サービスの連携も、ユーザー側で検証していかないといけない状況ですね。

しかし、Googleアナリティクスを新規で使い始める人は、いきなりこれですから、かなり入門のハードルが上がっちゃった気がしますね。入門の本とかを著す人は大変そうです。

思った以上に早かったデフォルト表示

今回、新規プロパティ作成時に「gtag.js」が出てくるのことは、正直ちょっと驚きました。

KOBITさんが9月初旬にgtag.jsの記事を書かれて私も知りましたが、話題になりはじめたのも、8月下旬と認識しています。
＞＞Google Analytics – New Global Site Tag Offers Unified Google Product Tracking | E-Nor Analytics Consulting and Training

それからわずか1ヶ月もせずに、公式のトラッキング情報に表示、という早さはこれまで見たことがありません。analytics.js のときはもっとゆっくり出始めていたと記憶しています。

Googleはこうした移行については、とても注意を払っていて、常に数字を見ながら影響度を考慮して実装を進めてくれます。それが今回、ベータ版にも関わらず、実装がここまで早かったということは、影響がそれほど大きくないと判断したと考えられます。

ということは、ほぼコードは完成していて、新規で始める人にはどんどん使ってもらって、ユーザーを増やしたいという意向が伺えます。Googleタグマネージャベース（こういう言い方も正しいとは言えませんが）のトラッキングを広めたいとの意向なのかなと思います。

タグマネージャの実装状況はまだ18%程度という調査もあります。そういう点ではまだこれからなのかもしれません。しかし、今後この流れが減っていくとは考えづらいでしょう。
＞＞タグマネージャ(GTM/YTM)の利用状況 2017年08月 | SEM Technology

ですから今後の流れとしては、Googleタグマネージャを意識した流れに乗っかるのが良いのかなと思います。Googleタグマネージャでできないことでも、いずれ時間が解決してくれるのかなと思います。

かつてのトラッキングテクノロジーからは卒業を迫られている、とも言えそうです。

Googleアナリティクスをgtag.jsで初めて使いはじめるかたは、しばらくはネット検索は情報が少ないため、あまり意味をなさなそうなので、注意してください。

Web制作者としてのベストウェイ

今後、トラッキング技術がGoogleタグマネージャベースのものに移行するとしますと、制作時に以下のことに注意すると良いと思います。

• オブジェクトのID指定など、計測したいものの命名ルールを考えておく。
• クロスドメイン設定などオプショナルな計測の知見はアップデートしておく。
  （もしくはGoogleタグマネージャなどどちらかに統一してしまうなど）

逆に、これまでの analytics.js がデフォルトの「トラッキング情報」メニューから消えたときが、移行時期と考えると良いかもしれません。

また手間ばかりでなく、jQueryなどJSライブラリもタグマネージャーで読み込んでしまえば良いのかも、という新しいアプローチにもつながるかもしれません。

現状ですと、Googleタグマネージャで、analytics.jsも、非同期版Googleアナリティクスも選べますので、そういう点では移行できるタイミングで、Googleタグマネージャに移行を進めるのが良いかもしれません。

ぜひ検討してみてください。

追記：管理メニューにもこんな項目が

現状のユニバーサルでも、管理メニューにこうした項目もいつの間にか出ていて、ついていくのが大変です。

Googleアナリティクスは、更新履歴と呼べるものがないため、ユーザー自身が注意して情報をアップデートする必要があります。

わたしも注意していきますが、定期的に以下の情報源をみなさんもチェックしておいて下さい。

＞＞衣袋 宏美（いぶくろ ひろみ）(@hibukuro)さん | Twitter
＞＞GA フォーラム | Googleアナリティクスの情報サイト（メルマガがとても便利です）
＞＞Googleアナリティクス・すべてのトピック – Google 広告主コミュニティ
＞＞

お疲れ様です。

できる逆引き Googleアナリティクス 増補改訂2版 Web解析の現場で使える実践ワザ 260 Googleタグマネージャ/オプティマイズ/データスタジオ対応 | 木田和廣, できるシリーズ編集部

Amazonで詳しく見る

こちらが、発売予定されたばかりでした・・・。ただGoogleタグマネージャなどの知見もありますのでおすすめではあります。

関連情報リンク

gtag.js 設定手順。
＞＞Set up tracking with gtag.js – アナリティクス ヘルプ

gtag.js のクロスドメイントラッキング。
＞＞Cross domain tracking with gtag.js – アナリティクス ヘルプ

gtag.js のイベントトラッキング。
＞＞Event tracking with gtag.js  |  Analytics for Web (gtag.js)  |  Google Developers

gtag.js 開発者向け公式情報。
＞＞Add gtag.js to your site  |  Analytics for Web (gtag.js)  |  Google Developers

ミツエーリンクスさんの記事。
＞＞Global Site Tag（gtag.js）について | マーケティングBlog | ミツエーリンクス

まとめ

今回、思った以上に公式に登場することとなったgtag.js。思った以上に、Googleタグマネージャなどdatalayer利用のトラッキングスキルの修得が不可避になってきたと言えるかもしれません。

ここしばらくは、Googleアナリティクス関連の情報から目が離せませんね。お互い気づいたことがあればシェアしましょう。なお、現状Googleタグマネージャを実装されているかたは、しばらくは様子見で良いかと思います。

ちなみに、gtag.js は、正式名称「Global Site Tag」です。

・　・　・　・　・

＞＞安っ！アマゾンで半額以下になっている食品タイムセール
セール特設ページを見る