Google标签管理器推送事件

我为我们公司的登陆页面创建了一个表单。我们的市场部发给我这个GTM代码，让我把它包含在标题中。

<!-- Google Tag Manager -->
<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 =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-*****');
</script>
<!-- End Google Tag Manager -->

我已经做过了。提交表单后，我应该把它推送到Google标签管理器。

My html Form

<form id="landing-form" class="landing-form" action="php/start.php" method="POST">                       
<div class="controls">           
<div class="form-group text-center">                     
<input id="name" type="text" name="name" placeholder="Name" required="required" autocomplete="off">                   
</div>  
....(rest of form)                     
<button type="submit" name="submitLanding" class="submit center-block"><span>Send</span></button>                       
</div>

提交表单后，数据存储在数据库中。我想在数据库保存后执行此推送事件。我的php脚本正好在php中的js代码处中断。请帮助我做错了什么。我不知道GTM!

我的php:

if(isset($_POST['submitLanding'])){
try {
$name = $_POST['name'];
$phone = $_POST['phone'];
$email =  $_POST['email'];
$comment = $_POST['comment'];
$town = $_POST['town'];
$language = $_POST['language'];
$newsletter = $_POST['newsletter'];
$applicant = new Applicant();
$applicant->setName($name);
$applicant->setPhone($phone);
$applicant->setEmail($email);
$applicant->setComment($comment);
$applicant->setTown($town);
$applicant->setLanguage($language);
if($newsletter == 'yes'){
$applicant->setNewsletter(1);
}elseif ($newsletter == 'no'){
$applicant->setNewsletter(0);
}
$date = new DateTime("now", new DateTimeZone('Europe/Istanbul'));
$applicant->setCreated($date->format('Y-m-d H:i:s'));

$applicantDao = new ApplicantDao();
$applicantDao->create($applicant);

echo "
<script type="text/javascript">
dataLayer.push('event': 'formsubmission');
</script>
";
} catch (Exception $e) {
}}header("Location: ../landing.html");

解决方案与Javascript谢谢你whit waldo!

setTimeout(function(){
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({'event': 'formsubmission'});
window.location.href = '......landing url';
}, 5000);

我猜是使用你的头调用。通常，带有位置键的标头表明您打算重定向。如果您的服务器正在编写脚本将数据推入GTM的数据层，然后立即重定向用户，那么GTM将没有时间观察数据层推事件，映射到它需要的变量，触发依赖于它的任何内容并发送适当的标记。这不是一个即时操作。

我的建议是，您可以考虑向GTM添加另一个标记，该标记在运行时将一些POST方法调用到页面上的PHP后端，由这里的自定义事件触发。观察到后，超时一秒钟，然后执行重定向。这个想法是，考虑到让GTM适应数据层更新的延迟，如果该标记被触发，其他标记也会被触发，所以再给它一秒钟的时间来结束，应该意味着您的数据在重定向之前被正确地输出。

好的，通常现代表单不使用原生html方式提交表单。这里有几个选项。

重写表单，用显式的JS xhr请求将数据发送到后端端点。这样，你的JS将有一个表单提交成功的回调，在那里你将有你的DL推送。
将后端重定向到成功页面并跟踪成功页面，而不是表单提交。它不是很好，但非常简单，大多数表单提交都是通过成功页面而不是实际的表单提交来跟踪的。如果需要表单详细信息，BE可以通过多种方式通过成功页面向前端提供这些信息。
在GTM中使用不同的触发器GTM可以通过本地触发器侦听表单提交。如果需要，可以使用该触发器和dom抓取从表单中获取数据。

相关内容

最新更新

热门标签：