Google Analytics代码说明 [英] Google Analytics Code Explanation

问题描述

有人可以一步一步解释这段代码吗？
我想了解更多关于Asynch代码以及Google如何加载他们的脚本，以及如何
'隐藏'用户的javascrippt（我知道我不能隐藏它，但至少使
隐藏它就像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' ， '// www.google-analytics.com/analytics.js','ga'）; 
 
 ga（'create'，'UA-xxxxxxxx-x'，'xxxxxx.com'）; 
 ga（'send'，'pageview'）; 
< / script> 
  

解决方案

首先，我会通过美化器，例如 http://jsbeautifier.org/

 （函数（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; $ （a，m）
}）（window，document，'script'，'//www.google-analytics.com/analytics.js'，'ga'）; b $ b m.parentNode.insertBefore 
 
 ga（'create'，'UA-xxxxxxxx-x'，'xxxxxx.com'）; 
 ga（'send'，'pageview'）; 
  

之后，让我们评估关闭$ p> （函数（i，s，o，g，r，a，m）{
...
}）（window，document，'script'，' //www.google-analytics.com/analytics.js'，'ga'）;


替换每个命名参数： i，s，o，g ，r 及其相应的值窗口，文档，'script'，'//www.google-analytics.com/analytics.js'，'ga' $ b

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

这大致（不会影响变量范围等），相当于

 （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.parentN ode.insertBefore（a，m）
}）（window，document，'script'，'//www.google-analytics.com/analytics.js'，'ga'）; 
 
 ga（'create'，'UA-xxxxxxxx-x'，'xxxxxx.com'）; 
 ga（'send'，'pageview'）; 
  

简而言之，这段代码实质上是用它来创建一个新的脚本标签：

  a = document.createElement（'script'），
  

然后找到第一个脚本标签

  m = document.getElementsByTagName '脚本'）[0]; 
  

然后它将新创建的脚本标记设置为异步执行（有关异步执行的更多见解可以在如果您需要，可以通过Layman的条款了解异步代码）

  a.async = 1; 
  

上面一行相当于 true ，因为它更短，所以它被使用1。

之后，此脚本标记的src被设置

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

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

最后，它被插入第一个脚本标记之前，因此浏览器可以开始加载它。 / p>

  m.parentNode.insertBefore（a，m）
  

因此要汇总：

1. 我们创建一个 script 标记


2. 我们将它设置为异步加载 async = true


3. 在文档中的第一个脚本标记之前插入此脚本标记

---

细节与Google分析相关。

  window ['ga'] = window ['ga'] || function（）{
（window ['ga']。q = window ['ga']。q || []）。push（arguments）
}，window ['ga']。l = 1 * new Date（）; 
  

定义名为 ga 的全局函数，然后用行

  ga（'create'，'UA-xxxxxxxx-x'，'xxxxxx.com'）; 
 ga（'send'，'pageview'）; 
  

它会将这些事件推入队列Array。

加载脚本时，它检查 GoogleAnalyticsObject 的值，该值早先设置为指向 ga 与行

  window ['GoogleAnalyticsObject'] ='ga'; 
  

希望这可以帮助您

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>

解决方案

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

After that lets evaluate the closure

(function (i, s, o, g, r, a, m) {
...
 })(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'

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 in the line above is equivalent to true, it is used 1 just because it is shorter.

After that the src of this script tag is set

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

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)

So to summarize:

1. We create a script tag
2. We set it to load asynchronously async=true
3. We insert this script tag, before the first script tag in the document

---

Specifics related to google analytics.

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

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

Then with the lines

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

it pushes these "events" in the queue Array.

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';

Hope this helps

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