谷歌分析代码说明 [英] Google Analytics Code Explanation

问题描述

有人可以一步一步"、一行一行"解释这段代码吗?我想了解更多关于异步代码以及谷歌如何加载他们的脚本，如何对用户隐藏"javascript(我知道我无法隐藏它，但是至少让它像谷歌那样，而不是在一个文件中显示所有代码)

Can someone explain this code 'step by step','line by line'? I would like to learn more about Asynch code and how Google loads their script, how to 'hide' javascrippt from users (I know that I can't hide it but at least make it something like Google does, not to show all code in one file)

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

  ga('create', 'UA-xxxxxxxx-x', 'xxxxxx.com');
  ga('send', 'pageview');
</script>

推荐答案

首先，我会通过一个美化器来传递它，例如http://jsbeautifier.org/

First of all, I would pass this through a beautifier, e.g. http://jsbeautifier.org/

 (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-xxxxxxxx-x', 'xxxxxx.com');
 ga('send', 'pageview');

然后让我们评估闭包

(function (i, s, o, g, r, a, m) {
...
 })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

通过替换每个命名参数:i, s, o, g, r 与其对应的值 window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'

by replacing each of the named parameters: i, s, o, g, r with their corresponding values window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'

请注意，a 和 m 参数没有输入值，更像是结果变量.

Note that a and m parameters do not have input values and are more like result variables.

这大致(不关心变量范围等)相当于

This would be roughly (not bothering about variable scope, etc.) equivalent to

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

 ga('create', 'UA-xxxxxxxx-x', 'xxxxxx.com');
 ga('send', 'pageview');

简而言之，这段代码的本质是创建一个带有以下行的新脚本标记:

In short what this code does in essence, is that it creates a new script tag with the line:

a = document.createElement('script'),

然后找到第一个脚本标签

Then finds the first script tag

m = document.getElementsByTagName('script')[0];

然后它将新创建的脚本标记设置为异步执行(有关异步执行的更多信息可以在 用外行的术语理解异步代码如果你需要的话)

Then it sets the newly created script tag to asynchronous execution (More insight on async execution could be obtained at Understanding Asynchronous Code in Layman's terms should you need it)

a.async = 1;

上一行中的1等价于true，使用1只是因为它更短.

1 in the line above is equivalent to true, it is used 1 just because it is shorter.

然后设置这个脚本标签的src

After that the src of this script tag is set

 a.src = '//www.google-analytics.com/analytics.js';

请注意，上面没有在 URL 中指定协议(http 或 https).这将允许在当前浏览器协议中加载脚本.

Note that above no protocol (http or https) is specified in the URL. This would allow for the script to be loaded in the current browser protocol.

最后它被插入到第一个脚本标签之前，这样浏览器就可以开始加载它了.

And finally it is inserted before the first script tag, so the browser could start loading it.

 m.parentNode.insertBefore(a, m)

所以要总结:

1. 我们创建了一个脚本标签
2. 我们将其设置为异步加载async=true
3. 我们在文档中的第一个脚本标签之前插入这个脚本标签

<小时>

与谷歌分析相关的细节.

---

Specifics related to google analytics.

 window['ga'] = window['ga'] || function () {
     (window['ga'].q = window['ga'].q || []).push(arguments)
 }, window['ga'].l = 1 * new Date();

定义名为 ga 的全局函数，该函数将其参数推入队列数组(名为 q)

defines global function named ga that pushes its arguments in a queue Array (named q)

然后用线条

 ga('create', 'UA-xxxxxxxx-x', 'xxxxxx.com');
 ga('send', 'pageview');

它将这些事件"推送到队列数组中.

it pushes these "events" in the queue Array.

当脚本加载时，它会检查 GoogleAnalyticsObject 的值，该值之前被设置为指向 ga 的名称，行

When the script is loaded, it checks the value of GoogleAnalyticsObject, which earlier was set to point to the name of ga with the line

 window['GoogleAnalyticsObject'] = 'ga';

希望能帮到你

这篇关于谷歌分析代码说明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！