javascript - 带GA等参数的异步JS调用

Question

我正在尝试创建客户端 JS 代码，它将使用一些参数调用外部 JS 服务器端脚本，我正在查看 Google Analitycs 示例，因为这正是我想要实现的目标，但是我真的不明白如何实现它有效...

(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','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');

我想知道服务器端脚本如何解析这些元素。我尝试进行逆向工程 http://www.google-analytics.com/analytics.js代码，但我不明白..

我可以找到使用相同方法显示客户端-服务器异步通信的简单片段吗？

Answer 1

该脚本根本不与服务器通信。这只是加载analytics.js库，这是实际执行跟踪的文件。

跨域边界传输数据的最简单方法是动态创建图像标签，将其指向执行处理(并返回透明 1x1 图像)的服务器端脚本并附加跟踪参数。您需要跟踪一个 ID，用于识别重复访问者并将页面 View 拼接到 session 中，因此您需要一些可以读取、写入和更新 Cookie 的函数。这就是analytics.js 文件所做的事情之一。

还有其他方式发送数据 - 例如 Google Analytics 使用 sendBeacon-method如果可供使用的话。这样做的优点是它不等待服务器响应(因此如果浏览器卸载文档，它不会被取消)。然而，这并不总是可用，在这些情况下，图像请求被用作后备。

因此，向服务器发送数据的最简单方法是创建图像 url 并动态创建图像。

img = new Image(); 
img.src ="http://myserver.com?param1=foo&param2=bar";

您甚至不需要将其添加到 DOM，无论如何都会发送图像。