谷歌标签管理器推送事件

Question

我为我们公司的登录页面创建了一个表单。 我们的营销部门向我发送了此 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 跟踪代码管理器。

我的html表单

<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 的解决方案谢谢 waldo！

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

Answer 1

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

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

Answer 2

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

1. 重写表单以通过显式 JS xhr 请求将数据发送到后端端点。 这样，您的 JS 将在表单提交成功时进行回调，您将在其中进行 DL 推送。
2. 让您的后端重定向到成功页面并跟踪成功页面而不是表单提交。 这不是很好，但很容易，大多数表单提交都是通过成功页面而不是实际的表单提交来跟踪的。 如果需要表单详细信息，BE 可以通过多种方式将它们与成功页面一起提供给前端。
3. 在 GTM 中使用不同的触发器。 GTM 可以使用本机触发器监听表单提交。 如果需要，只需使用该触发器和 dom scrape 从表单中获取数据。
4. 延迟表单提交以便有时间跟踪吗？ 不要这样做，这不是真正的解决方案。