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>

行：

为什么以开括号开头？（＆＃34;（功能......＆＃34;）w d s l i的5个参数是什么？
1. 设置＆＃34; L＆＃34; ＆＃34; w＆＃34;的元素数组到自身或空数组。
2. 将对象推入w数组的最后一个位置，2个属性和2个值。
3. 将var f设置为s数组的第一个元素。
4. 将var j设置为元素s（但＆＃34; d。＆＃34;？）是什么。
5. 异步加载为true，此处全部清除。
6. Javascript来源，这里都清楚。
7. 绝对不知道这个人做了什么，与DOM有关的东西？
8. 这似乎是函数调用？函数原型中的第一个字母似乎对应于这些括号内的参数？

此外，如果页面html中已经存在某个数据，那么此代码究竟是如何生成数据层的？我知道它必须在此容器代码之前，否则GTM无法使用dataLayer中的数据。

完全迷失在这里，所以任何帮助都非常感激！

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

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

＆＃34; IF变量dl（dataLayer？）设置为值l（dataLayer？）但没有＆＃34; dataLayer＆＃34;然后（奇怪的东西）+ l（添加dataLayer）ELSE nothing / empty string

谢谢！

Answer 1

1。为什么它从一个开放的父母开始。（“（function ...”）5个参数是什么w，d，s，l，i？

这是 IIFE ，查看调用括号（点9）以查看5个args是什么

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被设置为<script>中的第一个d，document

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

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

的结果

6。异步加载true，全部清除

在元素上设置属性 j

7。 javascript源码，全部清除

大

8。绝对不知道这个人做了什么，与DOM有关的东西？

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

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

这是关闭和调用 IIFE ，因此这里传递的内容对应于开头的参数名称

此外，如果页面html中还没有这个代码，那么这段代码究竟是如何生成一个dataLayer的呢？

请参阅2

点

Answer 2

在我得到解释之前，我想指出这是缩小的代码，这就是为什么它如此难以阅读。他们这样做是为了让他们不必反复重复使用相同的值，这会占用宝贵的字节。

一个。 为什么它以一个开放的parenth开始？因为它们封装了一个稍后称为传入(window, document,'script','dataLayer','GTM-xxxxx')的函数。

湾 5个参数是什么w d s l i？以后会在代码中传递它们。它们分别是window, document，script，dataLayer和GMT-xxxxx。
将l数组的w元素设置为自身或设置为空数组。如果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. 在j元素
这似乎是函数调用？函数原型中的第一个字母似乎对应于这些括号内的参数？是

Google代码管理器代码说明

2 个答案: