Google Tag Manager push event

I created a form for our company’s landing page. Our marketing department sent me this GTM code to include in the header.

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

I’ve done that. After submitting the form I should push it for the Google Tag Manager.

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>                      

After submitting the form, the data is stored in a database. I want to execute this push event after saving in the database. My php script breaks off exactly at the js code in php. Please help what am I doing wrong. I don’t know about GTM!

My 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");

Solution with Javascript thank you whit waldo!

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

Answer

My guess would be the use of your header call. Typically a header with a location key indicates that you intend a redirect. If your server is writing the script to push the data into GTM’s data layer, then immediately redirecting the user, there’s not going to be any time for GTM to observe the data layer push event, map to the variables it needs to, trigger whatever is dependent on it and send off the appropriate tags. It’s not an instantaneous operation.

My suggestion would be that you consider adding another tag to GTM that calls some POST method to your PHP backend on the page when it runs, triggered by your custom event here. When observed, timeout for a second, then perform your redirect. The idea is that given the delay in having GTM accommodate the data layer update, if that tag has been triggered, others have as well so giving it another second to wrap up should mean your data is properly egressed before the redirect.