通过 javascript 加载 Google 跟踪代码管理器

Question

我有一个包含 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 -->

Answer 1

为了实现您想要的功能，您需要调整您对如何利用 Google 标签管理器的想法：

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

因此，对于您的情况，您需要执行以下步骤：

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

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

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

要利用公司名称，您需要设置一个类型为 'data layer' 且值为 'company_name' 的变量，然后您可以在如下代码中使用它：{{company_name}}

通过 javascript 加载 Google 跟踪代码管理器

Load Google Tag Manager via javascript

javascript

jquery

google-tag-manager