Google Analyticsのページ解析が機能しなかった件

Development

こんにちは！ サーバーサイド担当の井上です！

私達のチームでは業務中はslackで情報共有していますが、緊急時の連絡はLineで来ます。 サーバー側の人間としてはLineで会社のメンバーから連絡が来ると、また何か起こったかと緊張が走ります。 今回は表題の件を解決して無事リリースしたと思ったら帰宅途中にチームのグループにLineの連絡が来たお話。。。

状況

  • Wonderfullではアプリ内で一部webviewを利用。そのwebviewとwebページ(https://portal.wonderfull.jp)は同じシステムで稼働。
  • アナリティクスの計測などを分けるため、Webブラウザ用のページとアプリのwebview用のページを別URLで持つ 
      - {{domain}}/web/hogehogeと{{domain}}/app/hogehogeみたいな
  • AngularJS1.2を利用
  • viewファイルを別管理するのは改修が大変になるので見た目変わらないとこはtemplate化
  • ng-clickのfunctionでページ遷移を管理
//js

$scope.href = function(url){
    if(isApp){
        location.href = "/app" + url;
    } else {
        location.href = "/web" + url;
    }
} 
//view

<a href="javascript:void(0)" ng-click="href('/hogehoge')">/hogehogeへ</a>

問題点

hrefのリンク先ページのページビューのうち、参照URLがこのページのものを計測してる模様 つまり、href="javascript:void(0)"だと解析してくれない

修正方法

  • ng-hrefでリンク先を生成するfunction呼ぶ
    • 元々作った時はng-hrefでfunction動かすって発想がなかった…
$scope.setLink = function(url){
    if(isApp){
        return "/app" + url;
    } else {
        return "/web" + url;
    }
} 
<a ng-href="{{setLink('/hogehoge')}}">/hogehogeへ</a>

ページ解析動いた!!

と思っていたんですが・・・

リリース後、帰宅途中に一部リンクでページ遷移しないという連絡が。。。

調べてみると、この問題の起こっていた部分は今回の更新前は過去にABテストを行った時の名残で このようにクリック計測のfunctionをページ遷移の前に実行していました。

$scope.gaSend = function(label){
      ga('send', 'event', 'button', 'click', label);
    };
<a ng-click="gaSend('hogehoge_button_B'); href('/hogehoge')">/hogehogeへ</a>

これをページ解析できるように以下のように変更したところ一部リンクでページ遷移しなくなったようです。

<a ng-click="gaSend('hogehoge_button_B');" ng-href="{{setLink('/hogehoge')}}">/hogehogeへ</a>

同じaタグの中にng-clickとng-hrefを並べたのが原因でした。
PCのブラウザで確認した時は動いていたのですが、iPhoneではsafari・chrome・アプリ内webviewどれもページ遷移できませんでした。(ただしiPhone6sの3D Touchでは開けるというｗ)

フロントエンドの開発はユーザーの環境やブラウザによってちゃんと動かないことがあるので動作確認をしっかりしましょうという教訓になりました。。。