Google跟踪代码管理器代码说明

Question

有人可以解释Google跟踪代码管理器（容器）代码并帮助我学习：

<script>
(
function(w,d,s,l,i){
w[l] = w[l] || [];
w[l].push({'gtm.start': new Date().getTime(), event:'gtm.js'});
var f = d.getElementsByTagName(s)[0],
var j = d.createElement(s),
var dl = l! = 'dataLayer' ? '&l=' +l : '' ;
j.async = true;
j.src = '//www.googletagmanager.com/gtm.js?id='+i+dl;
f.parentNode.insertBefore(j,f);
}
)
(window, document,'script','dataLayer','GTM-xxxxx');
</script>

线：

为什么以开括号开头？ （“（function ...”）wdsli的5个参数是什么？
1. 将“ w”数组的“ L”元素设置为自身或设置为空数组。
2. 将一个对象推入w数组的最后一个位置，即2个属性和2个值。
3. 将var f设置为s数组的第一个元素。
4. 将var j设置为元素s（但是“ d。”是什么？）。
5. 异步加载为true，此处全部清除。
6. Javascript来源，在这里全部清除。
7. 绝对不知道这是做什么的，与DOM有关吗？
8. 这似乎是函数调用吗？ 函数原型中的首字母似乎与这些括号内的参数相对应？

另外，如果html页面中尚不存在此代码，那么此代码将如何在自身之前自动生成一个dataLayer？ 我知道它必须在此容器代码之前出现，否则GTM无法使用dataLayer中的数据。

在这里完全迷失了，所以不胜感激！

编辑2：我完全忘记了一行，而我最难以理解这一行：

var dl = l != 'dataLayer' ? '&l=' +l : '' ;

“如果变量dl（dataLayer？）设置为值l（dataLayer？），但不存在“ dataLayer”，那么（有点奇怪）+ l（添加dataLayer）否则为空/空字符串

谢谢！

Answer 1

1.为什么它以开放的括号开头？ （“（function ...”）5个参数w ， d ， s ， l ， i什么？

这是一个IIFE ，请查看调用括号（第9点），以了解5个参数是什么

2.将“ w”数组的“ L”元素设置为自身或设置为空数组

w是window ， l是'dataLayer' ，也就是说if (!window['dataLayer']) window['dataLayer'] = []; 否则window['dataLayer'] = window['dataLayer']

3.将一个对象推入w数组的最后一个位置，其中包含2个属性和2个值

是。

4.将var f设置为s数组的第一个元素

s是'script' ，因此f被设置为d document的第一个<script>

5.将var j设置为元素s（但是“ d。”是什么？）

j是调用document.createElement('script')

6.异步加载为true，此处全部清除

在元素 j上设置属性

7. javascript来源，此处全部清除

大

8.绝对不知道这是做什么的，与DOM有关吗？

就是说，从document的第一个<script> （我们称为f ）中找到它的.parentNode ，然后在f之前附加新的<script>元素j

9.这似乎是函数调用？ 函数原型中的第一个字母似乎与这些括号内的参数相对应？

这是IIFE的关闭和调用，因此此处传递的内容与开始时的参数名称相对应。

另外，如果html页面中尚不存在此代码，那么此代码将如何在自身之前自动生成一个dataLayer？

见第2点

Answer 2

在进行解释之前，我想指出这是精简的代码，这就是为什么它很难阅读的原因。 他们这样做是为了避免不必要重复使用相同的值，而这会占用宝贵的字节。

一种。 为什么以开放的父母身份开始？ 因为它们封装了一个以后称为传递的函数(window, document,'script','dataLayer','GTM-xxxxx') 。
湾 什么是5个参数w d s l i ？ 它们在后面的代码中传递。 它们分别是window, document ， script ， dataLayer和GMT-xxxxx 。
将w数组的l元素设置为自身或设置为空数组。 如果w[l]已定义为一个数组，则不要覆盖它。 否则，请创建它（您不能在未初始化的数组上调用数组函数）。 这基本上是在（传递值之后）说的是：
```
 window['dataLayer'] = window['dataLayer'] || [] 
```
将一个对象推入w数组的最后一个位置，2个属性和2个值您有一个正确的
将var f设置为s数组的第一个元素是什么意思：
```
 var f = document.getElementsByTagName('script')[0] 
```
这将获得第一个script标签。
将var j设置为元素s （但是d是什么？），这实际上意味着：
```
 var j = document.createElement('script') 
```
异步加载true，在这里所有这些都非常简单
javascript源，这里再次全部清楚 ，简单
绝对不知道这是做什么的，与DOM有关吗？ 这意味着：
1. 获取f元素的父级（即封装节点），在这种情况下，该父级可能是<head>
2. 在f元素之前插入j元素（这是一个新的<script> ）
这似乎是函数调用？ 函数原型中的第一个字母似乎与这些括号内的参数相对应？ 是

Google跟踪代码管理器代码说明

问题描述

2 个解决方案

解决方案1
1 2015-04-15 22:37:29

解决方案2
1 已采纳 2015-04-15 22:52:03

Google跟踪代码管理器代码说明

问题描述

2 个解决方案

解决方案1 1 2015-04-15 22:37:29

解决方案2 1 已采纳 2015-04-15 22:52:03

解决方案1
1 2015-04-15 22:37:29

解决方案2
1 已采纳 2015-04-15 22:52:03