ピックアップコラム
-
Pickup!
【2020年】SEO対策会社の特徴(費用)と今後
2017年9月末に、Googleアナリティクスの新規プロパティ作成時に発行されるトラッキングコードが、従来のanalytics.jsからgtag.js変わりました。2017年10月頃より新規にプロパティーを作成すると、gtag.jsを貼り付けるよう指示されます。今回は、このgtagに変更点の概要と移行方法や移行すべきかどうかをご紹介します。
目次
Googleアナリティクスとは、Googleが提供するアクセス解析ツールで、サイトの訪問者はどのくらいか、どこから来たのか、どの画面を閲覧したのか、スマホからアクセスしたのか・パソコンからアクセスなのかなどのデータが計測することができます。
データを計測するためには、トラッキングコードと呼ばれるJavascriptのコードが読み込みます。なおこのコードは必ずヘッダータグに埋め込む必要があります。
今回、このトラッキングコードがgtagに変更となりました。次から変更点を見ていきましょう。
アナリティクスの管理画面から、トラッキング情報が見ることができます。閲覧方法は管理→プロパティの列→トラッキング情報のメニューです。
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 });
analytics.jsでは、ga(‘send’, ‘pageview’)というように記述しないと、アナリティクスにはデータが送信されませんでした。しかし、今回のgtag.jsではデフォルトでデータを送信するようになり、逆に、送信したくない場合には、以下のように送信しない命令を記述する必要があります。
通常はコンテンツのページビュー数などで使われているアナリティクスですが、プログラムや資料がダウンロードされた数をしりたい、外部サイトに流入させた数を知りたいといった場合どうすればよいのでしょうか?しかし、何も設定しなければ管理画面にもデータは表示されません。そんな時に計測できるように設定するのがイベントです。
今までは、カテゴリ・アクション・ラベルをすべて設定する必要がありましたが、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 イベント リファレンスとパラメータ リファレンス
イベントを発生させたい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でも問題なくイベントは計測できますので、移行して不具合が出るようでしたら旧式に戻すのも一つの方法です
受付時間:平日10:00~19:00(土・日・祝日を除く)