Anatomy

ANATOMY BLOG

マクロ視点のアクセス解析と品質管理ツール「ANATOMY(アナトミー)」のブログです

2017年11月7日火曜日

analytics.jsからgtag.jsへ移行する方法のまとめ


Googleアナリティクスのスニペットコードがanalytics.js(ユニバーサルアナリティクス)からgtag.js(Global Site Tag)に変更されました。
既存のanalytics.jsスニペットコードを変更しなくても、Googleアナリティクスでのアクセス解析は引き続き可能です。

しかし、analytics.jsの一世代前に当たるga.jsは既に2016年でサポートを終了していて、analytics.jsも数年後にはサポート終了となる可能性があります。
そこで今回は、analytics.jsのスニペットコードをgtag.jsに移行する際の方法をまとめました。
Googleタグマネージャーを使わずに移行したい方や、gtag.jsとの違いを理解したい方はぜひ参考にしてください。


analytics.jsからgtag.jsへ移行する方法の目次
  1. gtag.jsの基本構文
  2. gtag.js記述上の注意事項
    1. トラッキングIDは2箇所に必要
    2. gtag('config')はページビューを送信する
  3. gtag.jsへの移行手順
    1. 前半の固定部分の置き換え
    2. 後半の固定部分の置き換え
    3. ページビュー送信の置き換え
    4. イベントの置き換え
    5. クロスドメインの置き換え
    6. カスタムディメンションとカスタム指標の置き換え
  4. デバッグ方法

gtag.jsの書き方

gtag.jsへの移行方法を説明する前に、gtag.jsの基本構文を説明します。
以下がgtag.jsの標準のスニペットコードです。

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

  gtag('config', 'UA-XXXXXX-XX');
</script>

gtag.jsではgtag関数を使用して、トラッキングIDやカスタムディメンションなど、Googleアナリティクスへ送信する情報を指定します。

トラッキングコードをカスタマイズする場合は、gtag('config')直前の空白行にコードを挿入するか、gtag('config')を編集します。
カスタマイズしない場合は、上記コードに置き換えるだけでgtag.jsへの移行は完了です。

gtag.js記述上の注意事項

analytics.js用のトラッキングコードをgtag.jsに移行するにあたり、いつくかの注意点があります。

注意点1:トラッキングIDは2箇所に必要

analytics.jsではトラッキングID(UA-XXXXXX-XX)が1箇所のみでしたが、gtag.jsではトラッキングIDが2箇所になりました。
1か所目は<script>タグで指定されたURLで、2か所目は<script>タグ内のコードの一部です。
トラッキングコードをコピペして編集するような場合には注意してください。

注意点2:gtag('config')はページビューを送信する

ここがとにかく混乱しやすいです。

gtag.jsのスニペットコードを見ると、ページビューを送信しているようなコードが見受けられません。
実はgtag.jsでは、gtag('config')関数がページビューを送信しています
したがって、gtag('config')関数の位置は非常に大事で、基本的にはJavaScriptコードの末尾に配置します(標準のスニペットコードでもそうなっている)。

一見すると、analytics.jsのga('create')関数に似ていますが、設置場所や機能が異なっています。
どちらかというと、gtag('config')ga('send', 'pageview')に近いですね。

gtag.jsへの移行手順

それでは移行手順を説明します。

以下のanalytics.jsのスニペットコードで説明します。
<!-- 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-XXXXXX-XX', 'auto', {allowLinker: true});
ga('set', 'dimension1', 'xxxxx'); 
ga('require', 'linker'); 
ga('linker:autoLink', ['source.com', 'destination.com']);
ga('send', 'pageview', {
  'page': '/contact/step1',
  'title': 'お問い合わせ Step1'
});
</script>
<!-- End Google Analytics -->
まず、前半の固定部分を置き換えます。
UA-XXXXXX-XX部分は各サイトのトラッキングIDに置き換えてください。
移行前
<!-- 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');
移行後
<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-XX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments)};
  gtag('js', new Date());
次に後半部分です。
ga('create')行は削除してください。

移行前
ga('create', 'UA-XXXXXX-XX', 'auto', {allowLinker: true});
移行後
(削除)
それ以外の変更点は、この後詳しく説明していきます。

ページビュー送信

移行前
ga('send', 'pageview');
移行後
gtag('config', 'UA-XXXXXX-XX');

ページビューを送信するコードはgtag('config')です。
UA-XXXXXX-XX部分はご自身のトラッキングIDに置き換えてください。

仮想ページビューの場合

移行前
ga('send', 'pageview', {
  'page': '/contact/step1',
  'title': 'お問い合わせ Step1'
});
移行後
gtag('config', 'UA-XXXXXX-XX', {
  'page_path': '/contact/step1',
  'page_title': 'お問い合わせ Step1'
});

仮想ページビューの場合もconfigコマンドを使います。
analytics.jsの場合と同じく、第3引数にURLやタイトルを設定しますが、キーの名前が変更されています。
以下の表に基づいて、名前を変更します。
名前が紛らわしいので、気をつけて変更してください。
変更前のキー(analytics.js) 変更後のキー(gtag.js) 説明
page page_path URLのうち、ドメイン名より後ろの部分。
title page_title ページタイトル
location page_location http(s)://から始まる絶対URL

このほか、analytics.jsでは第3引数にページパスを指定する書式もありますが、gtag.jsではサポートされていません。
次のように明示的に'page_path'として記載する必要があります。
移行前
ga('send', 'pageview', '/contact/step1');
移行後
gtag('config', 'UA-XXXXXX-XX', {
  'page_path': '/contact/step1'
});

イベント

移行前
ga('send','event','カテゴリ','アクション','ラベル', '値');
移行後
gtag('event', 'アクション', {'event_category': 'カテゴリ','event_label': 'ラベル', 'value': '値'});

イベントを送信するコードはgtag('event')です。
ただ、analytics.jsでは第3引数以降、カテゴリ・アクションの順に指定していましたが、gtag.jsでは第2引数でアクションを指定します。
イベントカテゴリは第3引数のオブジェクト内に指定するようになりました。
アクションの位置が入れ替わる点に要注意です。

オブジェクトを指定する書式の場合

移行前
ga('send','event', {
  eventCategory: 'カテゴリ',
  eventAction: 'アクション',
  eventLabel: 'ラベル',
  eventValue: '値'
});
移行後
gtag('event', 'アクション', {
  'event_category': 'カテゴリ',
  'event_label': 'ラベル',
  'value': '値'
});

このほか、analytics.jsでは第2引数や第3引数にオブジェクトを指定する書式もあります。この場合、第2引数にアクションを指定し、第3引数は以下の表に基づいてオブジェクトのキーを変更します。
変更前のキー(analytics.js) 変更後のキー(gtag.js) 説明
eventCategory event_category イベントカテゴリ
eventAction 指定不可 イベントアクション。第2引数に指定します。
eventLabel event_label イベントラベル
eventValue value イベントの値

クロスドメイン

移行前
ga('require', 'linker');
ga('linker:autoLink', ['source.com', 'destination.com']);
移行後
gtag('set', 'linker', {
  'accept_incoming': true,
  'domains': ['source.com', 'destination.com']
});

クロスドメイン対応する場合、analytics.jsでは_gaパラメータを付与するためにlinkerプラグインを使用していましたが、gtag.jsでは不要になりました。
あとは、ga('linker:autoLink')コマンドをgtag('set', 'linker')に置き換えます。

accept_incomingallowLinkerと同じ意味で、_gaパラメータを認識させるかどうかを表します。
クロスドメインなので、accept_incomingtrueに設定します。

カスタムディメンションとカスタム指標

移行前
ga('set', 'dimension1', 'xxxxx');
移行後
gtag('set', 'dimension1', 'xxxxx');
カスタムディメンションやカスタム指標を設定するコードの移行は簡単で、gaをgtagに置き換えるだけです。

デバッグ方法

gtag.jsへの移行が終わればテストをしてみましょう。
うまく計測できていないようなら、Chromeの拡張機能「Google Analytics Debugger」でデバッグすることをお勧めします。
デベロッパーツールを開くとConsoleタブに切り替えると、アクセス中のページから送信されているビーコンの情報が分かります。

上記の例では、トラッキングIDがUA-XXXXXX-XX、dimension1がYYYYYY、URLがhttp://example.com/へのページビューが送信されています。
反映までに時間がかかるカスタムディメンションのような項目のデバッグは、このツールを使う方が早いです。

まとめ

以上、analytics.jsからgtag.jsへの移行方法を解説しました。
既存のトラッキングコードが複雑になっている場合は、この記事の手順に沿って進めるとよいと思います。

Related Posts Plugin for WordPress, Blogger...