How to track form submissions using tag manager?

Tag Manager
1

Good afternoon,

We would like to track the forms sent.

I set up a tag via Matomo Tag Manager on the mtm.FormSubmit event.
The problem is that the tag is triggered even if the form is not submitted, for example, if the person clicks on the “Submit” button and a field required is missing.

I would like to trigger the tag only when the thank you message is displayed.
But this is not possible because the message is present in the webpage all the time but not displayed

There is just a style on the line of code that displays or not the sentence
style= “display: block;” → displays the text
style= “display: none;” → does not display the text

I was thinking of creating a variable via a custom script that pulls up the “block” or “none” value

Where and how can I put this code?

Thanks for your help
Best regards

2

Hello,

To track form submissions using a tag manager such as Matomo Tag Manager, you can follow these steps:

  1. First, let’s create a custom variable that checks the display status of the thank-you message. You can use JavaScript for this. Here’s a sample custom script:
function checkThankYouMessageDisplay() {
  var thankYouMessage = document.querySelector('.thank-you-message'); // Replace '.thank-you-message' with the appropriate selector for your thank-you message element.
  
  if (thankYouMessage && thankYouMessage.style.display === 'block') {
    return true;
  } else {
    return false;
  }
}
  1. In Matomo Tag Manager, create a new custom JavaScript variable. Name it something like “ThankYouMessageDisplayStatus” and paste the script from step 1 into the “Custom JavaScript” field. This variable will return true if the thank-you message is displayed, and false otherwise.
  2. Now, create a new trigger in Matomo Tag Manager. Choose the “Custom Event” trigger type and enter “mtm.FormSubmit” as the event name. Then, in the “Trigger Conditions” section, add a condition that checks the value of the custom JavaScript variable created in step 2. Set the condition to fire the trigger only when the “ThankYouMessageDisplayStatus” variable equals true.
  3. Finally, configure your tag to fire only when the trigger from step 3 is activated. In the tag settings, add the trigger created in step 3 to the “Triggering” section.

Now, the tag should only fire when the form is successfully submitted, and the thank-you message is displayed.

I hope this helps! Let me know if you need further assistance.

Best regards

1 Like
3

thanks for the guidance…

4

Good afternoon,

Thank you very much for your help.
The source code is

<div id="confirmform_2926" class="form-success" style="display: block;">
            <div class="successIcon">
                <img src="/Static/images/success-icon.svg">
            </div>
            <div class="intro">  <p>Thank you for expressing an interest in our Digital Travel Passenger Processing and/or Border Management solutions.<br><br>We will be in touch shortly.<br><br></p>
<p>The SITA Team</p> </div>
            <a href="/" class="btn">Back to the homepage</a>
</div>

So I replace in your JavaScript
document.querySelector(‘.thank-you-message’)
by
document.querySelector(‘.form-success’)

is it OK ?

for the trigger I put this
please see picture below

trigger
trigger1077×508 36 KB

I preferred to call it mtm.FormSubmittedReal to differentiate it from the standard event

But I have no new event

I also saw that the variable is empty in the preview mode

Thanks a lot
Have a nice day