token拦截器阻止连接_如何防止广告拦截器阻止您的分析数据

token拦截器阻止连接

TL;DR There's dataunlocker.com service coming soon (subscribe!), along with the open-sourced prototype you can use for Google Analytics or Google Tag Manager (2020 update).

TL; DR即将推出dataunlocker.com服务 (订阅！)，以及可用于Google Analytics(分析)或Google Tag Manager(2020更新)的开源原型 。

TL;DR There's dataunlocker.com service coming soon (subscribe!), along with the open-sourced prototype you can use for Google Analytics or Google Tag Manager (2020 update).The article from 2017s below explains the used principles behind these solutions, as well as it is described in the solution's readme.

TL; DR即将推出(订阅！) dataunlocker.com服务 ，以及可用于Google Analytics(分析)或Google 跟踪代码管理器(2020更新)的开源原型 。 下面的2017年代文章解释了这些解决方案背后的使用原理，并在解决方案的自述文件中进行了描述。

When your product is just getting started out, every single user matters. So does the data about how they interact with your product.

当您的产品刚刚入门时，每个用户都很重要。 有关它们如何与您的产品交互的数据也是如此。

If you’ve tried using analytics solutions like Google Analytics, you may have faced an issue where your analytics collection was blocked by ad blockers.

如果您尝试使用Google Analytics(分析)之类的分析解决方案，则可能会遇到一个问题，即广告拦截器阻止了您的分析集合。

According to PageFair, up to 30% of Internet users use ad blockers in 2017, and this number is constantly growing.

根据PageFair的调查 ， 2017年 ， 多达30％的互联网用户使用广告拦截器，并且这一数字还在不断增长。

This article will explain some technical approaches you can take to prevent ad blockers from also blocking your analytics. We’ll use Google Analytics in this article, though much of this could be applied to other analytics tools.

本文将介绍一些可用来防止广告拦截程序也阻止您的分析的技术方法。 我们将在本文中使用Google Analytics(分析) ，尽管其中许多可以应用于其他分析工具。

您可以通过一些方法绕过广告拦截器 (Some ways you can bypass ad blockers)

Almost all ad blockers work through the same methods: they disallow some http(s) browser requests for content at URLs that match a certain mask from their filtering base.

几乎所有广告拦截器都通过相同的方法工作：它们禁止某些http(s)浏览器对URL上与其过滤基础中的特定掩码匹配的URL的内容的请求。

Most ad blockers blacklist www.google-analytics.com by default, and block any attempts by the Google Analytics JavaScript library to send or retrieve the data from its analytics servers.

大多数广告拦截器默认都会将www.google-analytics.com列入黑名单，并阻止Google Analytics(分析)JavaScript库从其分析服务器发送或检索数据的任何尝试。

Luckily for developers, ad blockers don’t block requests to our own domain names by default, because doing this may hurt the web application’s functionality. This gap reveals a way to avoid analytics blocking until your web service become well-known enough for some of its URLs appear in ad blocker filters.

幸运的是，对于开发人员而言，广告拦截器默认情况下不会拦截对我们自己域名的请求，因为这样做可能会损害Web应用程序的功能。 这种差距揭示了一种方法，可以避免分析阻塞，直到您的Web服务众所周知，使其某些URL出现在广告阻止程序过滤器中为止。

In fact, even after some URLs appear in the content filtering base, you can start playing with ad blockers by inventing terrible things, such as hourly changing analytics URLs (though this is beyond the scope of this article). Some of these approaches are applied by services like DataUnlocker.com and Adtoniq, which offer users adblocker-free experience even when ad blockers are turned on.

实际上，即使某些URL出现在内容过滤基础中，您也可以通过发明糟糕的事情(例如每小时更改一次的分析URL)来开始使用广告拦截器(尽管这不在本文讨论范围之内)。 其中的一些方法由DataUnlocker.com和Adtoniq等服务应用，即使打开了广告拦截器，该服务也可以为用户提供无广告拦截器的体验。

对我们将要做什么的高级解释 (A high-level explanation of what we’re going to do)

In this article, we’ll assume that we have no permission restrictions on the server side. We will write the demo solution (a few lines of code) for the Node.js platform. Once you understand how this works, you should be able to port this solution to any programming language or platform.

在本文中，我们假设服务器端没有权限限制。 我们将为Node.js平台编写演示解决方案(几行代码)。 了解了它的工作原理后，您应该可以将此解决方案移植到任何编程语言或平台上。

The solution I’ll describe is pretty minimal, and if you’re an experienced web developer, it may only take you a few minutes to put it in place.

我将介绍的解决方案非常少，如果您是一位经验丰富的Web开发人员，则只需几分钟即可将其安装到位。

We’re going to use a simple proxying approach without the need to diving into the Google Analytics measurement protocol. In short, the solution looks as following:

我们将使用一种简单的代理方法，而无需深入研究Google Analytics(分析)测量协议 。 简而言之，解决方案如下所示：

1. First, download the Google Analytics JavaScript library itself and host it on your server.

   首先， 下载 Google Analytics(分析)JavaScript库本身，并将其托管在您的服务器上。

2. Then alter the code in the downloaded library to change the target host from www.google-analytics.com to your own domain name using find-replace.

   然后更改下载的库中的代码，以使用find-replace将目标主机从www.google-analytics.com更改为您自己的域名。

3. Replace the link from the default Google Analytics script in your codebase to modified one.
   将代码库中默认Google Analytics(分析)脚本中的链接替换为已修改的链接。

4. Create a proxy endpoint to Google Analytics servers on your back end. One important step here is to additionally detect the client’s IP address and write it explicitly in requests to Google Analytics servers to preserve correct location detection.

   在后端创建指向Google Analytics(分析)服务器的代理端点。 此处的一个重要步骤是另外检测客户端的IP地址，并将其显式写入Google Analytics(分析)服务器的请求中，以保留正确的位置检测。

5. Test the results. You’re done!
   测试结果。 你完成了！

完整的技术实施演练 (The full technical implementation walkthrough)

All the code and described steps below are available on GitHub. The description below explains the method basics, and of course the suggested approach can be improved to be even more “anti-blocking.”

GitHub上提供了下面的所有代码和描述的步骤。 下面的描述说明了方法的基本原理，当然，可以将建议的方法进行改进，使其更加“防阻塞”。

In Google Analytics, you start by acquiring a unique tracking ID for your property (web service). We will use UA-98253329–1 tracking ID in this article for the demonstration. Don’t forget to replace the tracking code to your one.

在Google Analytics(分析)中，您首先需要获取媒体资源(网络服务) 的唯一跟踪ID 。 在本文中，我们将使用UA-98253329–1跟踪ID进行演示。 不要忘记将跟踪代码替换为您的跟踪代码。

Google suggests adding this minified code to your web services to enable analytics:

Google建议将此精简代码添加到您的网络服务中以启用分析：

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script',
'https://www.google-analytics.com/analytics.js','ga');ga('create', 'UA-98253329-1', 'auto');ga('send', 'pageview');
</script>

In a few words, this code loads the Google Analytics JavaScript library if it wasn’t loaded before by inserting the script tag to the document. This library includes all the logic of analytics collection, and it is the only thing we need to proceed.

简而言之，如果之前未加载此代码，则可以通过将script标记插入文档中来加载Google Analytics(分析)JavaScript库。 该库包含分析收集的所有逻辑，这是我们唯一需要进行的工作。

步骤1：下载并修补Google的分析库 (Step 1: Download and patch Google’s analytics library)

Download the script directly from https://www.google-analytics.com/analytics.js, open it with any text editor and replace all occurrences of:

直接从https://www.google-analytics.com/analytics.js下载脚本，使用任何文本编辑器将其打开，并替换所有出现的内容：

www.google-analytics.com

with this exact string:

使用这个确切的字符串：

"+location.host+"/analytics

By patching the analytics library in this way, it will start making requests to the local host (my.domain.com/analytics) endpoints instead of www.google-analytics.com. Place this patched analytics.js file on your server after the replacement.

通过以这种方式修补分析库，它将开始向本地主机( my.domain.com/analytics)端点而不是www.google-analytics.com发出请求。 替换后，将此修补的analytics.js文件放置在您的服务器上。

步骤2：用已修补的脚本替换分析脚本 (Step 2: Replace the analytics script with the patched one)

Let’s modify the Google Analytics embedding code in that way so it use our patched library instead of default one:

让我们以这种方式修改Google Analytics(分析)嵌入代码，以便它使用我们的修补库而不是默认库：

<script>
(function(i,s,o,r){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date()})(window,document,'script','ga');ga('create', 'UA-98253329-1', 'auto');ga('send', 'pageview');
</script>
<script src="/analytics.js" async></script>

Note that here browser will search for the patched analytics script in the document root of your server, in this case, my.domain.com/analytics.js. Check whether you put the script in the document root or changed the path in script tag above. You can also check the results by running a test on your local server (see the readme for how to run the GitHub example).

请注意，此处浏览器将在服务器的文档根目录(本例中为my.domain.com/analytics.js)中搜索已修补的分析脚本。 检查是否将脚本放在文档根目录中或更改了上面脚本标签中的路径。 您还可以通过在本地服务器上运行测试来检查结果(有关如何运行GitHub示例的信息，请参见自述文件 )。

You should see something like this in browser’s developer tools:

您应该在浏览器的开发人员工具中看到以下内容：

Ultimately we want the act of downloading your patched analytics.js to return a successful response — a 200 (OK) or a 304 (not modified) status. But at this point, the request to my.domain.com/analytics/collect should respond with 404 status, since we haven’t implemented the proxy server yet.

最终，我们希望下载修补后的analytics.js的操作返回成功的响应，即200(确定)或304(未修改)状态。 但是在这一点上，对my.domain.com/analytics/collect的请求应以404状态响应，因为我们尚未实现代理服务器。

步骤3：实现最简单的代理服务器 (Step 3: Implementing the Simplest Proxy Server)

Now we’re going to code a bit. Our goal is to implement the proxy server, which will transport our analytics requests from our server to the real Google Analytics server. We can do this in many ways, but as an example, let’s use Node.js and Express.js with the express-http-proxy package.

现在我们要编写一些代码。 我们的目标是实现代理服务器 ，该代理服务器会将我们的分析请求从我们的服务器传输到真正的Google Analytics(分析)服务器。 我们可以通过多种方式来执行此操作，但作为示例，让我们将Node.js和Express.js与express-http-proxy包一起使用。

Gathering all the files in the example together (see GitHub), we should end up with the following JavaScript server code:

一起收集示例中的所有文件( 请参阅GitHub )，我们应该以以下JavaScript服务器代码结束：

var express = require("express"), proxy = require("express-http-proxy"), app = express();app.use(express.static(__dirname)); // serve static files from cwdfunction getIpFromReq (req) { // get the client's IP addressvar bareIP = ":" + ((req.connection.socket && req.connection.socket.remoteAddress)|| req.headers["x-forwarded-for"] || req.connection.remoteAddress || "");return (bareIP.match(/:([^:]+)$/) || [])[1] || "127.0.0.1";
}// proxying requests from /analytics to www.google-analytics.com.
app.use("/analytics", proxy("www.google-analytics.com", {proxyReqPathResolver: function (req) {return req.url + (req.url.indexOf("?") === -1 ? "?" : "&")+ "uip=" + encodeURIComponent(getIpFromReq(req));}
}));app.listen(1280);
console.log("Web application ready on http://localhost:1280");

A few last lines here do the proxying. The only trick we do here is instead of just proxying, we detect and append the client’s IP address explicitly in a form of a measurement protocol URL parameter. This is required to collect precise location data, because all the requests to Google Analytic originally come from our server’s IP address, which remains constant.

最后几行进行代理。 我们在这里做的唯一技巧不仅仅是代理，我们还以度量协议URL参数的形式显式检测并附加客户端的IP地址。 这是收集精确位置数据所必需的，因为对Google Analytic的所有请求最初都来自我们服务器的IP地址，该IP地址保持不变。

After setting up our server proxy, we can check whether the request to our /collect endpoint now successfully returns a 200 OK HTTP status:

设置服务器代理后，我们可以检查对/ collect端点的请求现在是否成功返回200 OK HTTP状态：

We can use, for example, an anonymous connection to verify that location is also picked up correctly.

例如，我们可以使用匿名连接来验证是否也正确提取了位置。

This “proxy server” approach is a fast workaround for analytics that enables your services to avoid ad blockers. But this method relies on the browser side, and if the browser script for some reason does not send analytics information to our servers, we get nothing.

这种“代理服务器”方法是一种快速的分析方法，可帮助您的服务避免广告拦截。 但是这种方法依赖于浏览器端，并且如果浏览器脚本由于某种原因没有将分析信息发送到我们的服务器，我们将一无所获。

The last possible step if you want to implement a solid solution is to send analytics directly from the server by using server-side libraries available for different languages (NodeJS, Python, Ruby, PHP). This approach will definitely avoid any content blockers, as every request to analytics servers comes directly from our servers.

如果要实现可靠的解决方案，最后一个可能的步骤是使用适用于不同语言( NodeJS ， Python ， Ruby ， PHP )的服务器端库直接从服务器发送分析。 这种方法肯定会避免任何内容阻止，因为对分析服务器的每个请求都直接来自我们的服务器。

Again, the demo application is available on GitHub, feel free to test it! Let me know if you have any feedback or interesting experiences using this approach.

同样，该演示应用程序可在GitHub上使用 ，请随时对其进行测试！ 如果您有任何反馈或使用此方法的有趣经历，请告诉我。

Thanks for reading!

谢谢阅读！

翻译自: https://www.freecodecamp.org/news/save-your-analytics-from-content-blockers-7ee08c6ec7ee/

token拦截器阻止连接