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"  action="php/start.php" method="POST">                       
<div >           
    <div >                     
        <input id="name" type="text" name="name" placeholder="Name" required="required" autocomplete="off">                   
    </div>  
    ....(rest of form)                     
    <button type="submit" name="submitLanding" ><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");

CodePudding user response：

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.

CodePudding user response：

Ok, normally modern forms don't use native html way to submit forms. You have a few options here.

1. Rewrite the form to send the data with an explicit JS xhr request to the backend endpoint. This way, your JS will have a callback on form submission success, where you would have your DL push.
2. Have your backend redirect to a success page and track success pages rather than form submissions. It's not very good, but it's very easy, most of form submissions are tracked through success pages rather than actual form submissions. If form details are needed, BE can supply them in many ways to the frontend with the success page.
3. Use a different trigger in GTM. GTM can listen to form submissions with a native trigger. Just use that trigger instead and dom scrape to get the data from the form if you need it.
4. Delay the form submission to have the time to track it? Don't do it, it's not a real solution.