Form Submission tracking for Google Tag Manager

For the instructions in this article to work, you will have to create a tag in your GTM account that will contain the base tracking code that needs to load on your page.

1. Add your GTM container ID on your landing page as shown here: https://d.pr/jpJTLh 

2. Paste the following code in Javascript - Footer section of your page.

Screenshot_on_2023-03-13_at_13-32-24.png

With this code snippet on your page, you will be able to create custom events and triggers within Google Tag Manager that fire upon a form submission.

Note: The tracking codes provided in this article only work with our native forms. It is not intended for use with embedded forms.

Variation Tracking

If you want to track the variation of the page, add 'variation': __variant at the bottom of the code snippet provided. The code will look like this:

<script type = "text/javascript" >
window.instapageFormSubmitSuccess = function(form) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'formSubmissionSuccess',
'formId': 'contactForm',
'variation': __variant
});
};
</script>

Important to note that __variant needs to be typed exactly as it is a global variable on the page.

NOTE: The "instapageFormSubmitSuccess" function can only be present on the page once, regardless of how many forms you have or how many actions you want to trigger after form submission. In case you have multiple snippets that need to fire after form submission, you must add all of them under the same Form Submit Callback function. If the snippets are not added under the same Form Submit Callback script, only the last function in the source code will be triggered. 

NOTE: The tracking codes provided in this article only work with our native forms. It is not intended for use with embedded forms.

NOTE: You will need to edit the tag and trigger configuration in your GTM container:

Tag Configuration:

Form_submit.png

Trigger Configuration:

Form_submission.png