Google Analyticsでクリックイベントが取れない?!

Google Analyticsでクリックイベントが取れない?!

こんにちは、開発部の大浪です。

開発部には、最新の技術を使ったキャンペーンサイトを担当している人もいれば、数十台のサーバーを使ったサイトを担当している人もいます。

それぞれやっていることは違いますし、見えている世界も結構違うため、話をしていると新しい気づきが色々と出てくるのが楽しいです。

ちなみに、前回もご紹介しましたが、私の主な担当は小・中規模の動的サイトの開発です。
ブログでは、小粒でも実際にサービスで「使える」話題をお届けします。

前回の記事はコチラ

今回の話題は「Google Analyticsのイベントトラッキングが計測されない」です。

ここからはイベントトラッキングの実装をしたことがある方に向けた内容になります。
イベントトラッキングの実装についてご存知ない方は、下記を参考にしてください。

アナリティクス ヘルプ イベントについて
https://support.google.com/analytics/answer/1033068?hl=ja

GoogleDevelopers イベント トラッキング
https://developers.google.com/analytics/devguides/collection/analyticsjs/events?hl=ja

さて、例えば、このブログ「https://weblog.d2csol.co.jp/」に設置した別サイト「http://example.com/」へのリンクが押された数を、イベントトラッキングで集計しようとする場合、最も単純な実装方法は下記のようになります。

<a href="http://example.com/" onClick="ga('send', 'event', 'go_out', 'click', 'example.com');">リンク</a>

ところが、この実装方法では、Safariブラウザでイベントトラッキングが計測できません。
Mac、iPhoneどちらもです。

原因は、イメージしている挙動が

  1. リンククリック
  2. イベントトラッキング送信
  3. 2の送信が終わったらページ遷移

なのに対して、Safariブラウザの場合には、

  1. リンククリック
  2. イベントトラッキング送信
  3. 2の送信を途中で止めてページ遷移

と動くためです。

イベントトラッキングの実装セオリー

ではどうするか?という話をしようと思ったのですが、GoogleDevelopersに丁寧に説明されているページがありました。

今からそちらの内容を紹介しますが、ひとつだけ気をつけてください。
このページの説明は正しく、丁寧な内容だと思うのですが、書いてあるサンプルコードに問題があります。

まずは、一度サンプルコードの内容を確認いただいてから問題点と解消法を説明します。

ヒットが送信されたタイミングを確認する
https://developers.google.com/analytics/devguides/collection/analyticsjs/sending-hits?hl=ja#knowing_when_the_hit_has_been_sent

上記参考ページには次のポイントについての説明が書かれています。

  1. hitCallbackの仕組みが用意されていること
  2. タイムアウト処理を用意する必要があること

この2つの内容は実装する際に必ず考える必要があるものです。
特にタイムアウトに関しては、普通に開発していると発生しづらく、見落としがちなため、注意してください。
私がタイムアウトの必要性に気づいたのは、全国数百ヶ所にあるPCで使用するサイト開発に携わっていた時に、一部にエリアのPCはプロキシによる通信制限でhitCallbackが動かない、という事例を経験したからです。

問題と解消法

さあ、では、ここからは参考ページの問題点と解消法について説明します。

問題は、参考ページ内にタイムアウト処理を使いやすくするための、ユーティリティ関数として書いてある「function createFunctionWithTimeout」の処理です。
これを先ほどの例であげていた、別サイト「http://example.com/」へのリンクのイベントトラッキングで使用すると下記のような挙動になります。

  1. 「http://example.com/」へのリンクをクリック
  2. 「http://example.com/」へページ遷移
  3. ブラウザの戻るを実行
  4. 「https://weblog.d2csol.co.jp/」に戻る
  5. 自動で「http://example.com/」へリダイレクトされる!

この現象はiPhoneで発生します、恐らくほぼ毎回このように挙動するはずです。

何か起きているのか?

答えは、ブラウザの「戻る」を実行した瞬間に、タイムアウト用のページ遷移処理が実行されているから、です。

参考ページの説明に沿ってイベントトラッキングを実装すると、リンクがクリックされた際に下記の2つのページ遷移処理が用意されるようになります。

  • hitCallbackで開始するページ遷移処理   ← イベントトラッキングに成功した時用
  • タイムアウトで開始するページ遷移処理  ← イベントトラッキングに失敗または不可能な時用

【2.「http://example.com/」へページ遷移】の時のページ遷移は、hitCallbackのページ遷移処理で行われています 。

問題は【4.「https://weblog.d2csol.co.jp/」に戻る】をした時にタイムアウト用の処理がまだ元のページに残っていることにあります。

その為ページ遷移処理が実行され【5.自動で「http://example.com/」へリダイレクトされる!】が発生してしまいます。

ではどうすればいいのか?

「hitCallbackで開始するページ遷移処理」が起きたら「タイムアウトで開始するページ遷移処理」が動かないようにすれば解決します。
処理としては下記の通りです。

function createFunctionWithTimeout(callback, opt_timeout) {
    var called = false;

    var func = function() {
        if (!called) {
            called = true;
            callback();
        };
    };

    setTimeout(func, opt_timeout || 1000);

    return func;

}

これでSafariブラウザでも問題なく、ブラウザバックにも対応したイベントトラッキングの実装ができるようになります。

ただ、残念ながらイベントトラッキングを実装してしまうと、避けられない問題が残ります。
リンクにイベントトラッキングを実装した時に、PCブラウザで、Ctrl+Click(MacはCommand+Click)によってリンクを別のタブで開こうとしても、同ページでページ遷移してしまう問題です。

この問題については、次回説明します。
では、また次回。

D2Cソリューションズでは下記の職種について募集中です。
興味をもたれた方は、ぜひ下記の求人情報をご覧ください。
Webアプリ/ネイティブアプリの開発ディレクター
フロントエンドエンジニア(沖縄勤務)
サーバーサイドエンジニア
*2019年2月現在の情報です。
*ご覧にいただいた時点で募集が終了していた場合にはご容赦ください。

 

*株式会社D2Cソリューションズは2016年10月1日に株式会社D2C dotへと社名を変更しました。