通过 javascript 加载谷歌标签管理器答案

【问题标题】：Load Google Tag Manager via javascript通过 javascript 加载谷歌标签管理器
【发布时间】：2015-10-31 18:36:14
【问题描述】：

我有一个包含 4 个步骤的提交表单的网站。用户通过 JavaScript 一步一步地移动，就像这样：

<div id="step1">

</div>
<div id="step2">

</div>
<div id="step3">

</div>
<div id="step4">

</div>

步骤 2、3、4 最初是隐藏的。当用户进入第 2 步时，第 1 步被隐藏，第 2 步显示。

问题是，我需要在第 2 步加载 Google 跟踪代码管理器代码。但如果我只是将跟踪代码管理器代码粘贴到页面上的 <head> 标记处，它将在任何不适合我的步骤上加载。

那么有没有办法只在第 2 步加载标签管理器，或者在第 1 步不加载它。

代码是这样的

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id="
                  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<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:'';j.async=true;j.src=
        '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','');</script>
<!-- End Google Tag Manager -->

【问题讨论】：

将所有标签管理器代码分配给一个字符串变量，然后在显示第 2 步时使用 jQuery 将字符串附加到 head。
这样可以正常加载吗？
你可以使用mutation来更新dom中的每一个变化。

标签： javascript jquery google-tag-manager

【解决方案1】：

为了实现您想要的功能，您需要调整您对如何使用 Google 跟踪代码管理器的想法：

您应该在每个页面上加载 Google 跟踪代码管理器，无论您是否希望任何代码立即加载、稍后加载或从不加载。
您应该始终将 GTM 加载脚本紧跟在打开的 <body> 标记之后
您应该在代码上设置正确的触发规则，以确保它们在任何给定页面上加载或不加载。
您应该将自定义事件推送到 dataLayer 以在您需要触发代码时触发代码。

因此，就您而言，以下是您需要采取的步骤：

您应该将 GTM 脚本直接放在页面上，以便加载 GTM 容器。将它放在开头的<body> 标记之后。
如果您在“所有页面”上触发了任何代码，则应调整此触发器，使其排除此特定页面，因此在此页面加载时不会触发任何代码。
当用户处于“第 2 步”时，您应该以编程方式将自定义事件推送到 dataLayer（这允许您创建一个触发器）。例如dataLayer.push({'event':'step_2'});
使用事件“step_2”的值创建“自定义事件”类型的触发器
将此新触发器应用于您希望在用户处于第 2 步时触发的代码。
利用 GTM 预览模式控制台，您将在事件列表中看到自定义事件

如果您想扩展您使用自定义事件和 dataLayer 的方式，您始终可以将数据项与事件同时推送，然后您可以在任何触发自定义事件的代码中使用此数据（以及随后）。因此，您可能希望触发包含用户公司名称的标签（例如，如果您正在收集此类数据）。

dataLayer.push('{
  'event':'step_2',
  'company_name':'ACME Inc'
});

要利用公司名称，您需要设置“数据层”类型的变量和“公司名称”的值，但您可以在这样的标签中使用它：{{company_name}}

【讨论】：