Form Submission tracking for Google Tag Manager

For the instructions in this article to work, in the first step you will have to create a tag in your GTM account that will contain the base code of the tracking system you are using, in order for that code to load on the page.

1. Implement your Google Tag Manager container ID on your landing page. Implementation guide available here.

2. Paste the following code in Javascript - Footer section.

settings-code.png

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

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: You will need to edit the trigger configuration in your GTM tag:

gtm1.png

The information should look like this:

Google_Tag_Manager_2018-07-18_14-49-56.png