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

SEO対策
SEO解析
2021.03.02

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

 

アナリティクスの概要

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

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

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

Google Analyticsについては下記の記事でも解説しております。

アナリティクスとは？導入方法や使い方を解説！
アナリティクスとは？導入方法や使い方を解説！
アナリティクスはGoogleが提供しているアクセス解析ツールです。 無料ではありますが、細かいデータが分かるので活用しているサイト運営者は少なく…

アナリティクスの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でも問題なくイベントは計測できますので、移行して不具合が出るようでしたら旧式に戻すのも一つの方法です

SEO情報・WEB制作ナレッジコラム一覧
SEOやWEB制作に関する情報を検索する

コラム

最新コラム

全て見る

人気コラム

全て見る

カテゴリー検索

過去の記事

ご質問やご相談などお気軽にお問い合わせください。

お電話でのお問い合わせはこちら

03-5829-9912

受付時間：平日10:00~19:00(土・日・祝日を除く)