跟踪Google Analytics中的所有出站链接

I've been using a script to track outbound links for a couple of months now. The script WORKS, but in the report generated by Google Analytics many URLs are having a trailing ":80" (default port number) at their end. Read on for more details.

我一直在使用脚本来跟踪出站链接几个月了。该脚本为WORKS，但在Google Analytics生成的报告中，许多网址末尾都有一个尾随“：80”（默认端口号）。请阅读以获得更多详情。

It's maybe important to mention that the website tracking these outbound links has a tremendous amount of outbound traffic (multiply your fantasy by ∞).

可能很重要的是，跟踪这些出站链接的网站有大量的出站流量（将您的幻想乘以∞）。

The script's purpose

It tracks ALL outbound links and tag them as "Outbound Links" in Google Analytics.

它会跟踪所有出站链接，并将其标记为Google Analytics中的“出站链接”。

The script is heavily commented and has a few instances of console.log() to help debugging (these are kept commented out).

该脚本有很多注释，并有一些console.log（）实例来帮助调试（这些实例被注释掉）。

"Outbound Links" show on GA alright, under:

GA上的“出站链接”显示在下面：

Content > Events > Top Events > "Outbound Links" [click on it] > [report showing all urls clicked]

内容>活动>热门活动>“出站链接”[点击]> [报告显示所有点击的网址]

The problem

Under the "Outbound Links" report, where I get all the links that were clicked, I get ":80" at the end of at least 2/3 of all links reported (probably more). GA treats http://example.com and http://example.com:80 as different links, separating them in the report. That's of course not desired.

在“出站链接”报告中，我获得了所有被点击的链接，在报告的所有链接中至少有2/3结束时得到“：80”（可能更多）。 GA将http://example.com和http://example.com:80视为不同的链接，在报告中将它们分开。这当然不是所希望的。

Worth mentioning:

值得一提：

Links that end with ":80" always have more hits than their equivalent without ":80", anything from 40% to 60% more hits.

以“：80”结尾的链接总是比不具有“：80”的等价物具有更多的点击量，任何点击量都会增加40％到60％。

The wanted solution

• Merge the links that end with ":80" with those without it, OR
• 将以“：80”结尾的链接与没有它的链接合并，或者
• Avoid appending ":80" to links, if possible.
• 如果可能，请避免在链接中附加“：80”。
• Bonus: Understand why we get links ending with ":80" at all.
• 奖励：了解为什么我们得到以“：80”结尾的链接。

The script

// 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');
        }
        */
    });
});

7 个解决方案

#1

The reason for the :80 in your output is because of e.currentTarget.host

输出中80的原因是因为e.currentTarget.host

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

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

I'm not sure why you are tracking that in addition to your already functional url variable, but you can always insure that :80 is not there with a simple string replace

我不确定你为什么要跟踪你已经正常使用的url变量，但是你可以随时确保：80不存在简单的字符串替换

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

_gat._getTrackerByName（）._ trackEvent（“Outbound Links”，e.currentTarget.host.replace（'：80'，''），url，0）;

#2

Fresheyeball answer is the correct one, but because many people have been asking for a complete answer, I'm going to post the final script with Fresheyeball's contribution.

Fresheyeball的答案是正确的，但由于很多人一直在寻求一个完整的答案，我将用Fresheyeball的贡献发布最终剧本。

The short version

// 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);
            }
        }
    });
});

The complete version (commented and 'debug-able')

// 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');
        }
        */
    });
});

#3

The problem with window.open is that the referrer will be lost. A better solution is to use onmousedown instead of onclick. Having done some tests, I know this work better that using window.open or using setTimeout. You got some false positive from people clicking the right mouse button and not choosing "Open in new tab" or "Open in new window", but onclick doesn't always fire for middle and right click on all browser. It's a choice between the lesser of two evils here.

window.open的问题是引用者将丢失。更好的解决方案是使用onmousedown而不是onclick。完成了一些测试后，我知道使用window.open或使用setTimeout可以更好地工作。人们点击鼠标右键并且没有选择“在新标签页中打开”或“在新窗口中打开”，你会得到一些误报，但是onclick并不总是触发所有浏览器的中间和右键单击。这是两个邪恶中较小的一个之间的选择。

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);
   });
});

#4

use location.hostname instead of location.host . hostname does not include the port.

使用location.hostname而不是location.host。 hostname不包含端口。

#5

This small piece of code worked for me :

这段小代码对我有用：

    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")});

          }
    });

#6

Google has an officially supported library that does this stuff for you.

谷歌有一个官方支持的库，可以为你做这些事情。

https://github.com/googleanalytics/autotrack

https://github.com/googleanalytics/autotrack

So your entire Analytics snippet would be something like:

因此，您的整个Google Analytics代码段将类似于：

<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');

// Replace the following lines with the plugins you want to use.
ga('require', 'eventTracker');
ga('require', 'outboundLinkTracker');
ga('require', 'urlChangeTracker');
// ...

ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
<script async src="path/to/autotrack.js"></script>

#7

Here's my solution using Google suggested code

这是我使用Google建议代码的解决方案

Put this right after your GA tracking code (probably in <head>)

在你的GA跟踪代码之后把它放好（可能在中）

// 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