アナリティクスのイベントに関する変更点と移行方法
2017.12.28
2017年9月末に、Googleアナリティクスの新規プロパティ作成時に発行されるトラッキングコードが、従来のanalytics.jsからgtag.js変わりました。2017年10月頃より新規にプロパティーを作成すると、gtag.jsを貼り付けるよう指示されます。今回は、このgtagに変更点の概要と移行方法や移行すべきかどうかをご紹介します。
アナリティクスの概要
Googleアナリティクスとは、Googleが提供するアクセス解析ツールで、サイトの訪問者はどのくらいか、どこから来たのか、どの画面を閲覧したのか、スマホからアクセスしたのか・パソコンからアクセスなのかなどのデータが計測することができます。
データを計測するためには、トラッキングコードと呼ばれるJavascriptのコードが読み込みます。なおこのコードは必ずヘッダータグに埋め込む必要があります。
今回、このトラッキングコードがgtagに変更となりました。次から変更点を見ていきましょう。
Google Analyticsについては下記の記事でも解説しております。
アナリティクスのgtagの変更点の概要
アナリティクスの管理画面から、トラッキング情報が見ることができます。閲覧方法は管理→プロパティの列→トラッキング情報のメニューです。
1.headerタグに貼り付けるタグの変更
Googleアナリティクスで新規のプロパティーを作成すると、従来のanalytics.jsではなく、gtag.jsに対応した最新のコードを貼り付けるよう指示されます。headerタグに貼り付けるタグは以下のように変更されました。
▼analytics.js
<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-XXXXXXXXX-1', 'auto');
ga('send', 'pageview');
</script>
▼gtag.js
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXXXX-1');
</script>
このように大分スッキリした印象になりましたね。ただし、トラッキングIDの記述が2箇所に増えていることに
注意してください。
gtag('config', 'UA-XXXXXXXXX-1', { 'send_page_view': false });
2.何も記述しなくてもPVは送信される
analytics.jsでは、ga(‘send’, ‘pageview’)というように記述しないと、アナリティクスにはデータが送信されませんでした。しかし、今回のgtag.jsではデフォルトでデータを送信するようになり、逆に、送信したくない場合には、以下のように送信しない命令を記述する必要があります。
3.イベントはデフォルトの設定が用意されている
通常はコンテンツのページビュー数などで使われているアナリティクスですが、プログラムや資料がダウンロードされた数をしりたい、外部サイトに流入させた数を知りたいといった場合どうすればよいのでしょうか?しかし、何も設定しなければ管理画面にもデータは表示されません。そんな時に計測できるように設定するのがイベントです。
今までは、カテゴリ・アクション・ラベルをすべて設定する必要がありましたが、gtag.jsではsign_upという名称が設定され、カテゴリ・アクション・ラベルが自動で決まるようになりました。
また、event_nameによってデフォルトのカテゴリとラベルも決まります。例えばevent_nameにloginと記述すると、デフォルトカテゴリはengagementになります。
その他のデフォルトのカテゴリは以下を参照してください。
アナリティクスで推奨されるエベントとパラメータ
イベント名 |
パラメータ |
送信されるタイミング |
add_payment_info |
– |
ユーザが課金情報を追加したとき |
add_to_cart |
value、currency、items |
ユーザーがカートに商品を追加したとき |
add_to_wishlist |
value、currency、items |
ユーザーがほしいものリストに商品を追加したとき |
begin_checkout |
value、currency、items、coupon |
ユーザーがご購入手続きを開始したとき |
checkout_progress |
value、currency、items、
coupon、checkout_step、checkout_option |
ユーザーがご購入手続きを完了したとき |
exception |
description、fatal |
エラーが発生したとき |
generate_lead |
value、currency、
transaction_id |
– |
login |
method |
ユーザーがサイトにログインしたとき |
page_view |
– |
ユーザがウェブページを読み込んだとき。 |
purchase |
transaction_id、value、
currency、tax、shipping、
items、coupon |
ユーザーが購入を完了したとき |
refund |
transaction_id、value、
currency、tax、shipping、
items |
商品が払い戻されたとき |
remove_from_cart |
|
ユーザーがカートから商品を削除したとき |
screen_view |
screen_name |
ユーザーが新しい画面や新しいコンテンツを読み込んだとき。 |
search |
search_term |
ユーザーがサイトを検索したとき |
set_checkout_option |
checkout_step
checkout_option |
ユーザが、特定のご購入手続き手順のオプション値を選択したとき |
share |
method、content_type、
content_id |
ユーザーがコンテンツを共有したとき |
sign_up |
method |
ユーザーが Google アカウントやメールアドレスなどの方法で登録したとき |
timing_complete |
name、value |
時間指定アクティビティが完了したとき |
view_item |
items |
ユーザーが商品または商品の詳細を表示したとき |
view_item_list |
items |
ユーザーが商品のリストを表示したとき(インプレッション) |
view_promotion |
promotions |
ユーザーが内部プロモーションをクリックしたとき |
view_search_results |
search_term |
ユーザーが検索結果を表示したとき |
その他の詳細なイベント情報については以下のURLをご参照いただければと思います。
gtag.js イベント リファレンスとパラメータ リファレンス
4.クリック計測方法の変更
イベントを発生させたいhtmlの記述方法も変わりました。
▼analytics.js
<a href="http://aaa.com/" onclick="ga('send','event','カテゴリ','アクション','ラベル');">クリックしてね</a>
▼gtag.js
<a id="link" href="http://aaa.com/" onclick="gtag('event', 'アクション', {'event_category': 'カテゴリ','event_label': 'ラベル'});">クリックしてね</a>
以前は、sendを記述しなければなりませんが今回省略されました。また、カテゴリ、アクション、ラベルの順番だったのが、アクション、カテゴリ、ラベルと順番が変更になりました。
なお先ほどのlogin情報をaccessというカテゴリーでAAAというラベルをつけて計測する場合は以下のように記述します。
gtag('event', 'login', {
'event_category': access,
'event_label': AAA
});
旧タグから新タグへの移行方法
今回の仕様変更により、イベントトラッキングやクロスドメインなど、別途設定が必要だったものがほぼ修正する必要があります。そのため、実際の計測結果を検証しながら、移行することになるかと思います。
移行方法を以下に示します。今回は例として単純なpageviewを例にして解説します。
▼移行前
<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-XXXXXXXXX-1', 'auto');
ga('send', 'pageview');
</script>
▼移行後
<!-- 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-XXXXXXXXX-1');
上記のようにga(‘create’)行が削除します。また、ga(‘send’)がgtag(‘config’)に変わりpageviewのパラメータが削除します。
この他イベント情報を移行させる場合は前述のカテゴリー表と計測方法をご参照いただければと思います。
まとめ
いかがでしたか?簡単にご説明させていただきました。
しかし、現状では旧式のanalytics.jsでも問題なくイベントは計測できますので、移行して不具合が出るようでしたら旧式に戻すのも一つの方法です
関連