javascript - Google アナリティクスですべてのアウトバウンドリンクを追跡する

Question

スクリプトを使用してアウトバウンドリンクを追跡してから数か月が経ちました。スクリプトは機能しますが、Google アナリティクスによって生成されたレポートでは、多くの URL の末尾に「:80」(デフォルトのポート番号) が付きます。詳細については、以下をお読みください。

これらのアウトバウンドリンクを追跡している Web サイトには、膨大な量のアウトバウンドトラフィックがあることに注意してください (想像力を ∞ 倍してください)。

スクリプトの目的

すべてのアウトバウンドリンクを追跡し、Google アナリティクスで「アウトバウンドリンク」としてタグ付けします。

スクリプトには多くのコメントが付けられており、デバッグに役立つように console.log() のインスタンスがいくつかあります (これらはコメントアウトされています)。

「Outbound Links」は、GA で次のように表示されます。

コンテンツ > イベント > トップイベント > 「アウトバウンドリンク」 [クリック] > [クリックされたすべての URL を示すレポート]

問題

クリックされたすべてのリンクを取得する「アウトバウンドリンク」レポートでは、報告されたすべてのリンクの少なくとも 2/3 (おそらくそれ以上) の最後に「:80」が表示されます。GA はhttp://example.comとhttp://example.com:80を別のリンクとして扱い、レポート内でそれらを分離します。もちろん、それは望ましくありません。

言及する価値があります：

":80" で終わるリンクは常に、":80" を付けないリンクよりもヒット数が多く、40% から 60% ヒットします。

望んでいた解決策

":80" で終わるリンクをそれがないリンクとマージする、または
可能であれば、リンクに「:80」を追加しないでください。
おまけ: 「:80」で終わるリンクを取得する理由を理解してください。

スクリプト

// Outbound Link Tracking with Google Analytics
// Requires jQuery 1.7 or higher (use .live if using a lower version)
$(function() {
    $("a").on('click',function(e){
        var url = $(this).attr("href");
        // Console logs shows the domain name of the link being clicked and the current window
        // console.log('e.currentTarget.host: ' + e.currentTarget.host);
        // console.log('window.location.host: ' + window.location.host);
        // If the domains names are different, it assumes it is an external link
        // Be careful with this if you use subdomains
        if (e.currentTarget.host != window.location.host) {
            // console.log('external link click');
            // Outbound link! Fires the Google tracker code.
            _gat._getTrackerByName()._trackEvent("Outbound Links", e.currentTarget.host, url, 0);
            // Checks to see if the ctrl or command key is held down
            // which could indicate the link is being opened in a new tab
            if (e.metaKey || e.ctrlKey) {
                // console.log('ctrl or meta key pressed');
                var newtab = true;
            }
            // If it is not a new tab, we need to delay the loading
            // of the new link for a just a second in order to give the
            // Google track event time to fully fire
            if (!newtab) {
                // console.log('default prevented');
                e.preventDefault();
                // console.log('loading link after brief timeout');
                setTimeout('document.location = "' + url + '"', 100);
            }
        }
        /*
        else {
            console.log('internal link click');
        }
        */
    });
});

score 12 · Accepted Answer

Fresheyeball さんの回答が正解ですが、多くの人が完全な回答を求めているため、Fresheyeball さんの投稿で最終的なスクリプトを投稿します。

ショートバージョン

// Outbound Link Tracking with Google Analytics
// Wallace Sidhrée - http://dreamyguy.com/
// Requires jQuery 1.7 or higher (use .live if using a lower version)
$(function() {
    $("a").on('click',function(e){
        var url = $(this).attr("href");
        if (e.currentTarget.host != window.location.host) {
            _gat._getTrackerByName()._trackEvent("Outbound Links", e.currentTarget.host.replace(':80',''), url, 0);
            if (e.metaKey || e.ctrlKey || this.target == "_blank") {
                var newtab = true;
            }
            if (!newtab) {
                e.preventDefault();
                setTimeout('document.location = "' + url + '"', 100);
            }
        }
    });
});

完全版 (コメント付きで「デバッグ可能」)

// Outbound Link Tracking with Google Analytics
// Wallace Sidhrée - http://dreamyguy.com/
// Requires jQuery 1.7 or higher (use .live if using a lower version)
$(function() {
    $("a").on('click',function(e){
        var url = $(this).attr("href");
        // Console logs shows the domain name of the link being clicked and the current window
        // console.log('e.currentTarget.host: ' + e.currentTarget.host);
        // console.log('window.location.host: ' + window.location.host);
        // If the domains names are different, it assumes it is an external link
        // Be careful with this if you use subdomains
        if (e.currentTarget.host != window.location.host) {
            // console.log('external link click');
            // Outbound link! Fires the Google tracker code.
            _gat._getTrackerByName()._trackEvent("Outbound Links", e.currentTarget.host.replace(':80',''), url, 0);
            // Checks to see if the ctrl or command key is held down
            // which could indicate the link is being opened in a new tab
            // Also checks if target="_blank" on the link tag which indicates it should always be opened in a new tab
            if (e.metaKey || e.ctrlKey || this.target == "_blank")) {
                // console.log('ctrl or meta key pressed');
                var newtab = true;
            }
            // If it is not a new tab, we need to delay the loading
            // of the new link for a just a second in order to give the
            // Google track event time to fully fire
            if (!newtab) {
                // console.log('default prevented');
                e.preventDefault();
                // console.log('loading link after brief timeout');
                setTimeout('document.location = "' + url + '"', 100);
            }
        }
        /*
        else {
            console.log('internal link click');
        }
        */
    });
});

score 5 · Accepted Answer

:80出力の理由は、e.currentTarget.host

http://www.w3schools.com/jsref/prop_area_host.asp

すでに機能している変数に加えてそれを追跡している理由はわかりませんが、単純な文字列置換でそこにないurlことをいつでも保証できます:80

_gat._getTrackerByName()._trackEvent("Outbound Links", e.currentTarget.host.replace(':80',''), url, 0);

score 3 · Accepted Answer

window.open の問題は、リファラーが失われることです。より良い解決策は、onclick の代わりに onmousedown を使用することです。いくつかのテストを行った結果、window.open や setTimeout を使用するよりもうまく機能することがわかりました。マウスの右ボタンをクリックして「新しいタブで開く」または「新しいウィンドウで開く」を選択しない人から誤検知がありましたが、すべてのブラウザーで中クリックと右クリックに対して onclick が常に起動するとは限りません。ここでの 2 つの悪のうち、小さい方の選択です。

jQuery(function($){
  $('a:not([href*="' + document.domain + '"])').mousedown(function(event){
    // Just in case, be safe and don't do anything
    if (typeof _gat == 'undefined') {
      return;
    }

    var link = $(this);
    var href = link.attr('href');
    var noProtocol = href.replace(/http[s]?:\/\//, '');

    // Track the event
    _gat._getTrackerByName()._trackEvent('Outbound Links', noProtocol);
   });
});

score 2 · Accepted Answer

location.host の代わりに location.hostname を使用します。ホスト名にはポートが含まれません。

score 1 · Accepted Answer

この小さなコードは私のために働いた：

    var hostname = window.location.hostname; 

    jQuery("body a").click(function(){

          if(jQuery(this).attr("href").indexOf(hostname)== -1){

               ga('send', 'event', {'eventCategory': "Outbound Links", 'eventAction': "OnClick", 'eventLabel': jQuery(this).attr("href")});

          }
    });

score 1 · Accepted Answer

Googleが提案したコードを使用した私のソリューションは次のとおりです

これを GA トラッキングコードの直後 (おそらく<head>)に配置します。

// TRACK OUTBOUND LINKS
document.addEventListener("DOMContentLoaded", function() {
    var trackOutboundLink = function(url) {
       ga('send', 'event', 'outbound', 'click', url, {
         'transport': 'beacon',
         'hitCallback': function(){document.location = url;}
       });
    }

    var a = document.getElementsByTagName('a');

    for(i = 0; i < a.length; i++){
        if (a[i].href.indexOf(location.host) == -1 && a[i].href.match(/^http?s:\/\//i)){
            a[i].onclick = function(){
                trackOutboundLink(this.href);
            }
        }
    }
});
// END

javascript - Google アナリティクスですべてのアウトバウンド リンクを追跡する

スクリプトの目的

問題

望んでいた解決策

スクリプト

7 に答える 7

ショートバージョン

完全版 (コメント付きで「デバッグ可能」)

Related

Reference

javascript - Google アナリティクスですべてのアウトバウンドリンクを追跡する