Track Many Forms with One Thank You Page with Google Tag Manager

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  'event' : 'virtualPageview',
  'pageTitle' : 'Some page title',
  'pagePath' : '/pages/some-page-with-form'
});

Option #4. Store the info of the last submitted form in a cookie

This method works if a Thank You page is on the same domain as the page where the form was submitted. Subdomains don’t matter. If the form is available on www.example.com and the Thank you page is on app.example.com, that’s fine.

Also, this method is useful if the Referrer, for some reason, is not available or just does not give us enough info.

Here’s what we will do:

• When a form is submitted, we’ll store some information about the submitted form in a cookie. Examples: URL where the form is available, form ID, etc.
• When a visitor lands on a Thank you page, we’ll read the cookie and use that info in our GA Tag.

The reason why I am not using localStorage is that it is limited just to a single subdomain. And sometimes, thank you pages are hosted on a different subdomain of the same domain.

#4.1. Set the cookie

There are several ways how to set the cookie in Google Tag Manager (Custom HTML tag, Custom Template). In this case, I’ll use the Custom HTML tag.

<script>
 
 var cookieName = "gtm_formInfo"; // Name of your cookie
 var cookieValue = "REPLACE THIS"; // Value of your cookie, we'll need to replace this
 var expirationTime = 86400; // 24 hours in seconds
 expirationTime = expirationTime * 1000; // Converts expirationtime to milliseconds
 var date = new Date(); 
 var dateTimeNow = date.getTime(); 

 date.setTime(dateTimeNow + expirationTime); // Sets expiration time (Time now + one month)
 var date = date.toUTCString(); // Converts milliseconds to UTC time string
 document.cookie = cookieName+"="+cookieValue+"; SameSite=None; Secure; expires="+date+"; path=/; domain=." + location.hostname.replace(/^www./i, ""); // Sets cookie for all subdomains

</script>

We need to insert some value about the form in this code. What kind of info do you have? If there is only one form per page, you can use the Page Path variable. If you have another useful variable, feel free to use that.

The final code with the {{Page Path}} info will look like this

<script>
 
 var cookieName = "gtm_formInfo"; // Name of your cookie
 var cookieValue = {{Page Path}}; // Value of your cookie
 var expirationTime = 86400; // 24 hours in seconds
 expirationTime = expirationTime * 1000; // Converts expirationtime to milliseconds
 var date = new Date(); 
 var dateTimeNow = date.getTime(); 

 date.setTime(dateTimeNow + expirationTime); // Sets expiration time (Time now + one month)
 var date = date.toUTCString(); // Converts milliseconds to UTC time string
 document.cookie = cookieName+"="+cookieValue+"; SameSite=None; Secure; expires="+date+"; path=/; domain=." + location.hostname.replace(/^www./i, ""); // Sets cookie for all subdomains

</script>

This code will set the cookie that will expire in 24 hours (unless the visitor submits another form — then the previous value will be overwritten).

You can fire this code when, say, the submit button is clicked.

I know, I usually advocate that tracking forms with the Click Trigger is a terrible idea but in this case, we are not sending any data to GA yet. We are just storing the information about the most recent intention to submit a form.

Here is an example of the Click Trigger (if the button’s class is form-submit-button). Learn more about click tracking.

Yes, the example above might be too broad. Having an ID on a button would be a much better option (or some additional data attributes) but look at this more as a proof of concept. Assign this trigger to the Custom HTML tag.

#4.2. Check the cookie

After you have saved the trigger and the tag, enable/refresh the Preview and Debug mode in GTM and check whether this is working. Click on a Form submit button.

The Custom HTML tag should be activated on a Click Event. If yes, open the Developer Tools of your browser and then go to Application > Storage > Cookies > Select your domain. Then enter gtm_formInfo in the search bar and check if the cookie is there.

Note: the screenshot above is taken from my Chrome. Other browsers will have a little different interface/naming.

#4.3. Create a 1st party cookie variable in Google Tag Manager

Go to Variables > New > 1st Party Cookie variable and enter the following settings (case-sensitive):

This variable will read the cookie you’ve just set in the previous section of this article.

#4.4. Create a trigger

Create a Pageview trigger that will be activated on a “thank you” page. Say, that the URL of your Thank you page is example.com/pages/thank-you/. In that case, the settings of the trigger could look like this:

#4.5. Create a tag

Last but not least, the tag. We need to send the form submission data to Google Analytics. When a visitor lands on a “Thank you” page, the trigger will activate the tag. Here are the settings of that tag:

You can use a different naming convention if you wish. Assign the previously created Pageview trigger to this tag.

So, to sum up: when a visitor clicks the Form Submit button, we will store the Page Path in a cookie. When the visitor lands on a “Thank you” page, we’ll take the info of that cookie and use it in the GA Event Tag.

#4.6. Test the setup

Save all the changes, refresh the GTM preview and debug mode, and submit the form once again. Then go to Google Analytics real-time reports and check whether you see the event in Realtime > Events.

Note: if you set the “non-interaction hit” to true, you will be able to see the real-time event data only in the “Last 30 minutes” section.

After you check and make sure that everything is working properly, don’t forget to publish the container.

Option #5. Can you change the URL of the Thank you page yourself?

The following tracking method is a good option if:

• You are using a flexible form plugin that allows you to change the URL of a “Thank you” page on for every single form individually.
• AND the number of new forms isn’t growing very rapidly
• AND if the number of existing forms is not crazy high

So, here is the deal. You’ll still be using the same “Thank you” page. But instead of a regular /thank-you/ address you will also add a URL parameter to it, for example formName. While “Thank you” page is the same, the URL will be slightly different for each form.

For example, if you have a Thank you page of which URL is example.com/pages/thank-you/ but you have 5 forms, the Thank you page URL of each form could look like this:

• example.com/pages/thank-you/?formName=form1
• example.com/pages/thank-you/?formName=form2
• example.com/pages/thank-you/?formName=form3
• example.com/pages/thank-you/?formName=form4
• example.com/pages/thank-you/?formName=form5

You can choose any other (more meaningful value) instead of just “form1”. What we are going to do next is to create a URL Variable that will return the value of formName and we will use it in the GA Event Tag.

Now go through every form on your website and change the URL of the “Thank you” page. I will not provide instructions here because every form plugin or content management system (CMS) will require different steps.

#5.1. Create a URL variable

In GTM, go to Variables > New > URL variable and enter the following settings:

If you are using a different parameter name (instead of formName), enter it in the variable’s settings.

#5.2. Create a Trigger

Once again, we will be using the same Pageview trigger that I mentioned several times in the previous sections. If we follow the URL example I previously mentioned (https://example.com/pages/thank-you/), your trigger settings could look like this:

#5.3. Create a Tag

Go to Tags > New > Universal Analytics and enter the following settings:

This tag will be fired when a visitor lands on a “Thank you” page. In the “Event Action” field, I inserted the previously created URL Variable. It will return the value of the formName parameter that is visible in the URL of every Thank you page.

#5.4. Test the setup

Save all the changes, refresh the GTM preview and debug mode, and submit the form once again. Then go to Google Analytics real-time reports and check whether you see the event in Realtime > Events.

Note: if you set the “non-interaction hit” to true, you will be able to see the real-time event data only in the “Last 30 minutes” section.

After you check and make sure that everything is working properly, don’t forget to publish the container.

Option #6. Cooperate with developers

If none of the previously mentioned options worked for you, you should ask for the developer’s help. Here are several options that come to my mind right now:

• Ask a developer to decorate the URL of every “Thank you” page. Ask him/her to include a certain parameter that would indicate which form was submitted. This is pretty much the method #5 from this blog post. The main difference is that maybe you are working on a site where you cannot change the URLs by yourself, thus ask for the developer’s help.
• Ask a developer to push the information about the form submission to the Data Layer of the “Thank you” page. Here is a sample code that your developer could implement:

  <script>
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
   'event': 'formSubmission',
   'formName': 'some form name' //this should be replace with an actual form name
   });
  </script>
  
  

When this is done, then you should create a custom event trigger, Data Layer Variable and a GA Event tag.

Custom Event Trigger’s settings:

• Trigger title – custom – formSubmission
• Event name – formSubmission
• Fire on all custom events

Data Layer Variable’s settings:

• Title – dlv – formName
• Data Layer Variable name – formName
• Version 2

Finally, create the GA Event Tag with the following configuration, assign the previously created Custom Event Trigger, insert the Data Layer Variable (it is surrounded by {{ }})

#6.1. Test the setup

Save all the changes, refresh the GTM preview and debug mode, and submit the form once again. Then go to Google Analytics real-time reports and check whether you see the event in Realtime > Events.

Note: if you set the “non-interaction hit” to true, you will be able to see the real-time event data only in the “Last 30 minutes” section.

After you check and make sure that everything is working properly, don’t forget to publish the container.

Where can I find this data in my regular Google Analytics reports?

All of these events will appear in Behavior > Events > Overview and then click the View Full Report link.

How to track multiple forms with one Thank You page: Final Words

And there you have it. If you are dealing with multiple forms that redirect a visitor to the same “Thank you” page, hopefully, one of these methods will help.

Personally, I’d try working with the Referrer variable first (because it requires less work compared to other methods).

If that does not work, then I’d go with storing the info in a cookie or editing the URLs of a Thank you page (by adding some parameter). Or keep looking for the info about the previous page in the Data Layer.

If none of that worked, then I would probably cooperate with developers closer.

Other methods should be considered as plan B.