Googleアナリティクス 複数ドメイン計測でのtaget=”_blank”


Googleアナリティクスで複数ドメインを跨いで計測するには、ちょっと工夫が必要です。
まず、

_gaq.push(['_setAllowLinker', true]);

として、複数ドメイン計測を可能にした上に、
onClick属性に

 _gaq.push(['_link', "[リンク先URL]"]); return false;

を追加してあげればOKです。
これで、URLパラメータにcookie情報を付与して、リンク先に遷移します。このURLパラメータを読み込むことでセッション情報を維持しています。

しかし、aタグの属性でtarget=”_blank”を指定して、
別ウィンドウで開こうとするとうまく機能しません。

たとえば、

<a href="http://www.yahoo.co.jp/" target="_blank" onclick="_gaq.push(['_link', this.href]); return false;">Yahoo1</a>

このようなコードで計測しようとすると、新規ウィンドウが開かずに、
普通にページが遷移してしまいます。
「target=”_blank”」の位置を変えても全く動作は変わりません。
「return false;」を削除すると、新規ウィンドウが開きますが、同一ウィンドウ上でもページ遷移が行われてしまいます。

これは、”_link”メソッドにリダイレクトが含まれているからだと思われます。”_link”を受け取ると、リンク先URLにcookie情報を付与して、新しいURLを作り、そのURLへリダイレクトするという作りになっているようです。
なので、”_link”メソッドを使って、新規ウィンドウを開くことは諦めた方がよさそうです。その代わりに、「window.open(「リンク先URL」)」でリンク先のURLにパラメータを付与したものを記載できれば良いと思われます。

そこで、GAのトラッキングAPIを見てみると、「_getLinkerUrl」というものがあり、cookie情報をパラメータとして付与したURLを返してくれそうな気がします。
http://code.google.com/intl/ja-JP/apis/analytics/docs/gaJS/gaJSApiDomainDirectory.html#_gat.GA_Tracker_._getLinkerUrl

これを使って、

<a href="http://www.yahoo.co.jp/" target="_blank" onclick="window.open(_gaq.push(['_getLinkerUrl', this.href])); return false;">Yahoo1</a>

とすれば、新規ウィンドウでパラメータ付きのURLのページが開くはずです。。。

しかし、これがうまく動かないんです。。。
実はこの「_getLinkerUrl」は非同期コードでは動きません!ひどいです!(他にもいくつか_get~というメソッドが非同期では動かないのがあります。。。)

かといって、自分でcookie情報を読み込んで、色々と作業するのは面倒すぎます。

色々調べたのですが、ここだけ同期用のトラッキングコードを使ってしまうのが一番楽そうです。

_gat._getTrackers()[0]._getLinkerUrl([リンク先URL])

こんな感じで同期用コードの_getLinkerUrlを使うことができます。
これをwindow.open()中で使えば、うまくいきそうです。
こんな感じになります。

<a href="http://www.yahoo.co.jp/" target="_blank" onclick="javascript:window.open(_gat._getTrackers()[0]._getLinkerUrl(this.href))">Yahoo2</a>

これでcookie情報をパラメータに付与した形で、新しいウィンドウが立ち上がります。
 
 

面倒なので一括で指定したい

いちいち、aタグにonclick属性をシコシコ書いていくのは面倒なので、1つのJSファイルで一気に指定できるようにしたいですよね。
jQueryを利用して一気にやってしまいましょう。
 

作戦

  • 設定で測定対象ドメインを決める
  • クリックしたリンクのリンク先URLが測定対象ドメインで、かつ自ドメインではない場合、_link(またはwindow.open(~~))を走らせる
  • デフォルトの操作をストップさせる(preventDefault)

という流れでいこうと思います。
aタグのonclickイベントにバインドさせる場合、preventDefault()を付けてないと普通のリンククリックのイベントが動いてしまうので、ちゃんと動作をストップさせないとうまく動作しません。

こんな感じのソースコードになります。

$(function(){
    var _gaConf = {
        internalDomain :
            //計測対象のドメインをココに記載
            [
            ".livedoor.com",
            ".yahoo.co.jp",
            "localhost"
            ]
    }

    //target="_blank"だったらwindow.open()。そうでなかったら'_link'を利用。
    var makeGaLink = function(atag){
        var targetAttri = $(atag).attr("target");
        if(targetAttri === "_blank"){
            window.open(_gat._getTrackers()[0]._getLinkerUrl($(atag).attr("href")));
        }else{
            _gaq.push(['_link', $(atag).attr("href")]);
        }
        return false;
    }

    //aタグにバインド
    $("a").click(function(evt){
        var targetUrl, i;
        targetUrl = $(this).attr("href");
        for(i=0; i<_gaConf.internalDomain.length; i++){
            if(targetUrl.indexOf(_gaConf.internalDomain[i]) !== -1 && targetUrl.indexOf(location.host) === -1){
                //パラメータを付けてリンク先へ移動
                makeGaLink($(this));
                //デフォルトの動作をストップ
                evt.preventDefault();
            }
        }
    });
});

「_gaq.push(['_setAllowLinker', true]);」を設定したうえで、jQueryとこのJavaScriptを読みこめば、うまく動くと思います!
上の例だと「yahoo.co.jp」と「livedoor.com」へのリンクには全部cookie情報を付与した形でのリンクになります。

IE6/7ではテストしてないので、動くかどうかわかりません!

9 Comments

  1. Maria より:

    貴重な記事のアップありがとうございます。
    クロスドメインのトラッキングがうまくできていなかったので早速試させて頂きました。
    一点ご質問させていただきたいのですが、知識不足で恐縮なのですが、cookieがutmbのみ正しく引き継がれていないのですが、何か解消方法ご存知でしょうか。
    飛び先のドメインでutmbのみ更新されてしまっているように見受けられます。
    もし何かご存知でしたら教えてください。

    • yosimox より:

      ごめんなさい。よくわからないです。

      ただ、今の仕様ではutmbとutmcはセッション情報で利用しないはずです。
      utmvのキャンペーン周りが変わったとき、セッションが変わるという風になっていると思います。
      実際、Googleアナリティクスのデータをみて、リンク元のページが参照ドメインとして出てきますか?
      出てくるようだったら、セッションが切れているので、うまくいっていないと思います。
      リンク先ページでも
      _gaq.push(['_setAllowLinker', true]);
      が必要なので、ちゃんと設定できているか確認してみてください。

      後はちょっとわからないです。。

  2. Kurata より:

    クロスドメイントラッキングの方法はどれも難しすぎて
    こちらで紹介しているやり方が、とてもわかりやすいと思ったので、
    私も早速試させていただきました!

    問題なく計測できているようなので、
    あとは長いパラメータを削除できるように
    もう少し頑張ってjsを追加していきたいと思います!

    どうもありがとうございます。

  3. [...] Web Analytics or Die Googleアナリティクス 複数ドメイン計測でのtaget=”_blank” [...]

  4. yuko より:

    初めまして
    新ドメインへの引っ越しで、試行錯誤やっていて、
    こちらにスクリプトを公開してくださっていることに心より感謝します。

    どうしてもうまくできなくて、1点質問させてください。
    異なるドメインへリンクした場合 そこがランディングページになり、結果ユニークユーザーが2になってしまいます(初回のみ)
    具体的には、test1(Aドメイン)-test2(Bドメイン)-test3(A) と移動した場合、
    test2のランディングページはtest2になってしまいます(test3のランディングページはtest1)

    しかしながら、2回目に移動した場合は、正しく遷移しています。
    訪問数、ユニークユーザーともに正しく(短時間なので増加なく)
    すべてのページのランディングページは、test1で 正しい計測結果となります。

    トラッキングコードとこちらのjsファイルを置く場所が悪いのか(headの中に置いています)
    順番や、外部ファイルにしているせいなのか、いろいろやってみるもののうまくいきません。

    なにか考えられる原因など、アドバイスを頂けるならとても幸いです。
    ご返答頂けるならとても幸いです。どうぞよろしくお願い致します。

  5. yuko より:

    原因が分かったので、書き込ませて頂きます。

    (1)他のスクリプトと競合していたため誤作動をおこしていました(回避)
    (2)リダイレクトで転送したページが一部存在したため(a href=別ドメイン にすべて差し替え)

    以上で正しい遷移ができました!
    こちらのスクリプトは target=”_blank” の遷移ができる点がとてもありがたくて、
    またドメイン名もまとめて記述でき大変使いやすいです。

    パラメーターが目についたので、削除する方法を別のサイトで見てあてがってみたのですが
    (パラメーターに#ハッシュを付けて削除)
    一見ハッシュがついて、パラメーターが削除されるのですが、遷移はできていませんでした。
    http://www.pathfinder-style.net/archive/20111024001013.html(参考サイト)

    18行目
    _gaq.push(['_link', $(atag).attr("href")]); に , trueを付けて
    _gaq.push(['_link', $(atag).attr("href") , true]); #を表示

    _gaq.push(['_setAccount', 'UA-XXXXX-X']);
    _gaq.push(['_setDomainName', 'none']);
    _gaq.push(['_setAllowLinker', true]); ←追加
    _gaq.push(['_setAllowAnchor', true]);
    ↓以下8行追加
    _gaq.push(function(){
    if (location.hash && location.hash.match(/(#|&)(__utma)=.+/)) {
    if (‘replaceState’ in history)
    history.replaceState(”,document.title, window.location.pathname + location.search);
    else window.location.hash = ”;
    }
    });
    _gaq.push(['_trackPageview']);

    としてみました。
    プログラム的にこちらの#を付けて削除する方法は使えないのでしょうか。
    ご都合のよろしいときで結構なので、ご返答頂けるならとても幸いです。
    どうぞよろしくお願い申し上げます。

    • yosimox より:

      #以下がどうしても気になるなら、javascriptのwindow.history.pushstateでURLを書き換えてしまえばいいんではないでしょうか。
      HTML5がまともに動くブラウザしか動かないですが。。。

Leave a Reply