［GA］［Googleアナリティクス］iPhone7（iOS 10）safariでクリックイベント計測がうまくいかない時の対処方法。

2016年9月13日にiOS 10が配信されました。
さっそくアップデートしましたが今までの仕様に慣れていたので起動時や目覚ましタイマーを止める際に、一度ホームボタンを押さないといけない新しい仕様が若干煩わしいです。
※ ちなみに自分のiPhoneはiPhone 6です。

前置きはさておき本題です。
iOS 10にしてから普段通りクリックイベントの計測をしていたところ...
「あれ！？クリックイベントが正しく計測されてない」という事に気づきました。

前に書いた記事でiPhoneなんて怖くない！と思っていたのですが再び、調査しなきゃいけないのかと少し青ざめました、、、がなんとか計測できるようになったので覚書きです。

iOS 10からclickの処理の仕様が変わった？

詳しくはわからないですが前に書いた記事の中でクリックイベント計測がうまく取れない理由として“リンク先に飛ぶ処理の方が埋め込んだイベント計測の発火よりも速く処理されてしまうのが原因”ということを述べました。
そこでeventCallback関数を使用してリンクに飛ぶ前に計測用の処理を入れてしまおう！というのが前回のお話でした。

しかし...

明らかにiOS 9以下で計測できていたものが計測できなくなっているんです。

憶測ですがiOS 10のsafariからviewportのプロパティuser-scalable=noを指定しても画面を拡大できるようになったり独自の仕様を積んでいるのでこのリンクを押してからリンク先へ飛ぶ処理についても若干変更されたのかと思います。（多分）

clickがダメならtouchで計測する。

もうこれしかないかなと思いつつ実装してみたところ無事に計測できるようになったので記しておきます。

実装の流れ

①iPhone（iOS）をユーザーエージェントで判定
②iPhone（iOS）と他の端末との計測方法を変える
③iPhone（iOS）のみ、touchイベントを使い計測する
④他の端末は従来通りの計測方法で計測する

ソース

※ 今回もjQueryを使用しております。

/*①iPhone（iOS系）をユーザーエージェントで判定*/
var appleKit = false;
if(navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPod') > 0){
  appleKit = true;
}

//クリックイベント計測用
var eventGA = function(event,category,action,label,link,target){
  dataLayer.push({
    'event': event,
    'category':category,
    'action': action,
    'label': label,
    'eventCallback' : function(){
      /*別窓指定じゃない時だけ実行*/
      if(!target){
        document.location = link;
        return false;
      }
    }
  });
};

/*②iPhone（iOS）と他の端末との計測方法を変える*/
if(appleKit){
/*③iPhone（iOS）のみ、touchイベントを使い計測する*/

  $(".element").on("touchstart touchmove touchend",function(){
    /* touchstartの座標とtouchendの座標が同じ時 ＝ 疑似的なclick */
    if ('touchstart' == event.type){
      $(this).attr('data-touchstarted', '');
      return;
    }
    /*指を動かしたときは判定しない*/
    if ('touchmove' == event.type){
      $(this).removeAttr('data-touchstarted');
      return;
    }
    /*指をつけたところと指を離したところが同じ場合に処理*/
    if ('undefined' != typeof $(this).attr('data-touchstarted')){
      var link = $(this).attr("href");
      var target = ($(this).attr("target")) ? true : false;
      /*イベント送信！*/
      eventGA("event","category","action","label",link,target);
      
      /*フラグ削除*/
      $(this).removeAttr('data-touchstarted');
    }
  });

}else{
/*④他の端末は本来と同じように計測する*/
  $(".element").on("click" , function(){
    var link = $(this).attr("href");
    var target = ($(this).attr("target")) ? true : false;
    /*イベント送信！*/
    eventGA("event","category","action","label",link,target);
  });
}

説明はソース上にコメントアウトしておきましたが補足です。

touchstartのみだとリンクに触れた瞬間に計測が始まってしまうので、touchstart ＝ touchendのときに計測するようにする。
eventCallbackは、別窓でない時のみに使用する。（別窓リンクの場合は計測できるので）

「たった1つの要素を計測するのにこれだけ記述するのは、ちょっと...」って気がしますが本気で計測したい場合に使うと良いかもしれません。
暫定対応ではありますが、このやり方で計測していきたいと思います。

余談 Firefox クリックイベント計測ができない場合...?

たまにあるんですけど、Googleアナリティクスの管理画面を見ながら計測のテストをしているとFirefoxだけ計測がいきなり取れなくなることが...（僕だけでしょうか...）
その場合の自分の対処方法なんですが【新規ウィンドウを立ち上げる】と計測できるようになったりします。
※ 別タブやリロードではダメ

2016/11/2 追記

Firefoxやっぱりおかしいなーということでいろいろ試したのですが...

clickだと取れたり取れなかったり別窓ページ遷移の場合や同ページ内のクリックイベント計測であれば問題ないのですが、同窓ページ遷移の場合にうまくいかない事が多いですね。

そこで、clickからmousedownに変えたところ計測できるようになりましたが...
そうなると今度はキーボードからのクリックイベント計測はできなくなります。
キーボードもすべて網羅するのであれば、また別の実装方法を考えなくてはいけません。

あくまで“マウスを使ってクリックイベントを計測する”ということであれば、mousedownで計測すればよいかもしれませんが、、、要件定義次第ですね。

もし同じ事象でお困りの方は試してみてください。

それでは、また。

Fly higher! Sky is the limit!

webの現場で働く人のブログ