SEO対策なら株式会社ペコプラ > SEO対策実例・コラム > アナリティクスのイベントに関する変更点と移行方法

アナリティクスのイベントに関する変更点と移行方法

SEO対策実例・コラム

2017.12.28

2017年9月末に、Googleアナリティクスの新規プロパティ作成時に発行されるトラッキングコードが、従来のanalytics.jsからgtag.js変わりました。2017年10月頃より新規にプロパティーを作成すると、gtag.jsを貼り付けるよう指示されます。今回は、このgtagに変更点の概要と移行方法や移行すべきかどうかをご紹介します。

1.アナリティクスの概要
2.アナリティクスのgtagの変更点の概要
2-1.headerタグに貼り付けるタグの変更
2-2.何も記述しなくてもPVは送信される
2-3.イベントはデフォルトの設定が用意されている
2-4.クリック計測方法の変更
3.旧タグから新タグへの移行方法
まとめ

アナリティクスの概要

Googleアナリティクスとは、Googleが提供するアクセス解析ツールで、サイトの訪問者はどのくらいか、どこから来たのか、どの画面を閲覧したのか、スマホからアクセスしたのか・パソコンからアクセスなのかなどのデータが計測することができます。

データを計測するためには、トラッキングコードと呼ばれるJavascriptのコードが読み込みます。なおこのコードは必ずヘッダータグに埋め込む必要があります。

今回、このトラッキングコードがgtagに変更となりました。次から変更点を見ていきましょう。

アナリティクスの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のパラメータが削除します。

この他イベント情報を移行させる場合は前述のカテゴリー表と計測方法をご参照いただければと思います。