GA

什么是`GA`

GA（Google Analytics），谷歌分析，免费提供集中分析业务相关数据所需的工具。

`GA`的作用

免费提供了各种 API，帮助收集、配置及报告用户与网络内容进行互动的数据。

GTM

什么是`GTM`

GTM（Google Tag Manager），Google 跟踪代码管理器免费提供简单、可靠且易于集成的代码管理。GTM是通过JavaScript或iframe(JavaScript不可用时)，可以让跟踪代码管理器触发代码。

`GTM`的作用

无需修改代码即可管理所有代码。

优势

免费

免费，还有丰富多样的功能！

灵活

可以根据各种用户行为设置触发条件，来触发特定标签代码。

轻松部署

在创建完触发条件和标签后，点击“Publish”按钮即可发布。

版本控制

每次发布都会创建一个新版本并记录下来，可以很容易的还原到某一个版本。

轻松集成

支持并集成所有Google和第三方跟踪代码。可以结合GA，去跟踪用户在网站内的行为。

使用：官方文档

在`<head>`中添加

<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],
            j = d.createElement(s),
            dl = l != "dataLayer" ? "&l=" + l : "";
        // 异步JavaScript，不会影响页面的解析
        j.async = true;
        j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
        f.parentNode.insertBefore(j, f);
  })(window, document, "script", "dataLayer", "GTM-XXXX");
</script>

在`<body>`中添加

在不支持JavaScript的网页中使用iframe

<!-- Google Tag Manager (noscript) -->
<noscript>
    <iframe
        src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
        height="0"
        width="0"
        style="display: none; visibility: hidden"
    >
    </iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->

工作原理：

Google跟踪代码管理器为异步代码，它在执行时不会阻碍其他元素显示在网页上。它还会导致通过 Google 跟踪代码管理器部署的其他代码也以异步方式部署，也就是说，如果代码加载速度慢，也不会妨碍其他跟踪代码。

异步语法的实现靠的是 dataLayer 对象。这个对象起到一个队列的作用，采用先进先出的数据结构收集 API 调用，代码就是根据这些 API 调用而触发的。要向队列中添加内容，请使用 dataLayer.push 方法。借助 dataLayer.push 方法，您可以通过变量向 Google 跟踪代码管理器传递额外的元数据，并指定相关事件。

可以指定在 Google 跟踪代码管理器的代码段之前创建 dataLayer 对象，如果尚未定义 dataLayer 对象，也可以让 Google 跟踪代码管理器来创建。

Google Analytics （GA）& Google Tag Manager（GTM）介绍及其原理

GA

什么是GA

GA的作用

GTM

什么是GTM

GTM的作用

优势