アナトミーBLOG
GoogleアナリティクスやGoogleタグマネージャーを使ったサイト分析のノウハウを公開しています

analytics.jsからgtag.jsへ移行する方法

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

そこで今回は、analytics.jsのスニペットコードをgtag.jsに移行する際の方法をまとめました。
Googleタグマネージャーを使わずに移行したい方や、gtag.jsとの違いを理解したい方はぜひ参考にしてください。

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に移行するにあたり、いつくかの注意点があります。

注意点① トラッキングIDの位置

analytics.jsではトラッキングID(UA-XXXXXX-XX)が1箇所のみでしたが、gtag.jsではトラッキングIDが2箇所になりました。

1か所目は<script>タグで指定されたURLで、2か所目は<script>タグ内のコードの一部です。

トラッキングコードをコピペして編集するような場合には注意してください。

注意点② gtag(‘config’)の位置

gtag('config')関数の位置は非常に大事で、基本的にはJavaScriptコードの末尾に配置します(標準のスニペットコードでもそうなっている)。

gtag.jsのスニペットコードを見ると、ページビューを送信しているようなコードが見受けられません。

実はgtag.jsでは、gtag('config')関数がページビューを送信しています

一見すると、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)説明
pagepage_pathURLのうち、ドメイン名より後ろの部分。
titlepage_titleページタイトル
locationpage_locationhttp(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)説明
eventCategoryevent_categoryイベントカテゴリ
eventAction指定不可イベントアクション。第2引数に指定します。
eventLabelevent_labelイベントラベル
eventValuevalueイベントの値

クロスドメイン

移行前

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への移行方法を解説しました。既存のトラッキングコードが複雑になっている場合は、この記事の手順に沿って進めるとよいと思います。

弊社ではGoogleアナリティクスを「見える化」するアクセス解析ツール「アナトミー」を扱っています。

Googleアナリティクス設定・最適化サービス」もご用意しておりますのでgtag.jsの設定が不安な方は、ぜひご相談ください。

関連記事

Page Top