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跟踪代码管理器，无论您是希望立即加载，还是以后加载或从不加载任何标记。
您应该始终在打开<body>标记
您应该在代码上设置正确的触发规则，以确保它们在任何给定页面上加载或不加载。
您应该将自定义事件推送到dataLayer，以便在您需要触发标记时触发标记。

因此，在您的情况下，您需要采取以下步骤：

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

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

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

要利用公司名称，您需要设置类型＆＃39;数据层＆＃39;的变量。和价值＆＃39; company_name＆＃39;但是你可以在这样的标签中使用它：{{company_name}}

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

1 个答案: