背景

まあまずサイト運営者ならユーザーの把握のために色々な所にgaタグをつっこんで
ユーザ属性や傾向の解析に利用されていると思います。。。

自分の所のサービスでももれなくGoogleAnayticsへイベントデータを送信して
日々改善に役立てているのですが、これまたよくある話でiphoneの端末からのみ
イベントが取れなくてひっかかっちゃった所と解決はしたんだけどいいのかなこの実装ってのを
簡単にまとめてみます。。。

問題

元々の実装はこんな感じ
<a href="遷移先URI" onclick="ga(XXXXXXXXXXX);">うひょーiphoneとれねー</a>

うん、簡単でも悪魔のiphoneはこの実装が嫌いみたい

でiphone以外の端末だと問題なくイベントを取得できたわけですが
iphoneだとなぜかonclickが実行されず、
そのまま遷移先へ飛んでっちゃうという問題が発生しました。
こんな感じで~~iphoneだけとれなくても僕は気にしないの~~すが
修正が必要ということでまずはgaが実行されないなら別JSに分離して
そこで実行させちまおうとなったわけですね。

んでその実装のサンプルがこんなん

html

<a href="javascript void(0)" onclick="dummy(Link, eventCategory, eventAction, eventLabel, isTargetBlank);">うひょーiphoneとれねー</a>

dummy.js

function dummy(Link, eventCategory, eventAction, eventLabel, isTargetBlank) {
        ga(
            'send',
            'event',
            eventCategory,
            eventAction,
            eventLabel,
            {
                hitCallback: function(){
                    ga(
                        'xxxxxxxxxxxx',
                        'event',
                        eventCategory,
                        eventAction,
                        eventLabel,
                        {
                            hitCallback: function(){
                                if (isTargetBlank) {
                                    window.open(Link);
                                } else {
                                    location.href = Link;
                                }
                            }
                        }                       
                    );
                }
            }
        );
}

リンククリック時に上記jsが実行されてhitCallbackでgaでイベントを送信、
さらに任意のページへ遷移、となるはずでした。

私もそう思っておりました、GA!

ここでまた別の問題が。。。
ChromeなどブラウザによってはhitCallbackの処理での遷移が
ポップアップブロックによって阻まれるという。。。

落ち着け。。。まだ何か手があるはずだ、と探していましたらこちら
http://webtech-walker.com/archive/2010/06/14111405.html
先人は本当に偉大です。。。ありがとうございました。

先人のコードを参考に最終的には以下の形に！

html

<a href="javascript void(0)" onclick="dummy(Link, eventCategory, eventAction, eventLabel, isTargetBlank);">うひょーiphoneとれねー</a>

dummy.js

function dummy(Link, eventCategory, eventAction, eventLabel, isTargetBlank) {

        var w = '';
        if (isTargetBlank) {
            w = window.open('', '_blank');
        };
        ga(
            'send',
            'event',
            eventCategory,
            eventAction,
            eventLabel,
            {
                hitCallback: function(){
                    ga(
                        'XXXXXXXXXXX',
                        'event',
                        eventCategory,
                        eventAction,
                        eventLabel,
                        {
                            hitCallback: function(){
                                if (isTargetBlank) {
                                    w.location.href = Link;
                                } else {
                                    location.href = Link;
                                }
                            }
                        }
                    );
                }
            }
        );
}

まあこれで問題そのものの回避はできました、が

クリックイベントの中で非同期処理したあとに別ウィンドウで開くときに
ポップアップブロックに引っかかるのって。。。

他にスマートな回避のしかたないんですかね？

最期までご拝読ありがとうございました。
よろしければご意見等いただければ幸いです！

gaのイベントがiphoneから取得できなかった件

背景

問題