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

我有一个提交表单的网站，由4个步骤组成。用户通过JavaScript从一个步骤到另一个步骤如下所示：通过javascript加载Google跟踪代码管理器

<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 -->

来源

2015-10-31 Vuk Stanković

全部分配标签管理器将代码转换为字符串变量，然后在显示步骤2时使用jQuery将字符串附加到'head'。 – vinayakj

它会以这种方式正确加载吗？ –

你可以使用变化来更新dom中的每个变化。 –

伪代码为了达到你想要的功能，你需要调整围绕着如何利用谷歌标签管理你的思维：

您应该加载谷歌标签无论您是否希望立即加载任何标签，都可以在每个页面上进行管理。
你应该总是立即就地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”的变量的公司名称，但那么你就可以在这样的标签使用它：{{company_name}}

来源

2015-11-01 08:28:01

上面的那个人说了一切。你应该听他的;） –

-1

分配所有标签管理器代码到字符串变量，然后在显示步骤2时使用jQuery将字符串追加到头部。

喜欢的东西，下面

var tagManager = '<tag manager code goes here. 
        Format it correctly by adding/to escape special characters>'; 

$('#step2').shown(function(){ // or maybe $('#step1 .nextBtn').click(
    $('head').append(tagManager); 
})

来源

2015-10-31 18:44:34 vinayakj

这将加载代码，但不会使此代码加载谷歌分析或转换跟踪脚本 –

您是否正确格式化字符串，你可以创建一个小jsfiddle。 – vinayakj

http://jsfiddle.net/#&togetherjs=2kffss6JNT我不确定 –

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

回答

相关问题