Skip to main content

Tracking form submissions through Google Tag Manager and GA4 with Enquiry Tracker forms

Antony Campitelli
Updated

What is covered in this article? 

Overview

Enquiry Tracker also supports Google Tag Manager, which can be used to track ET iFrame forms that are submitted for events etc.  This feature is a simple on/off feature, but must be set up correctly to work with Google Tag Manager.

Get your Google Container ID

Go to your Google Tag Manager Account and copy the ID, formatted as "GTM-XXXXXX"

Enable Google Tag Manager in Enquiry Tracker

Perform the following steps to enable this

  • Go to ADMIN > App Integration> Google Analytics within Enquiry Tracker

  • Select GTM as an analytics type

  • Enter the Google Tag Manager ID

Note that the tags are visible on each form under ADMIN>SIGNUP FORMS>SETTINGS

The default Event Labels are:

Form Name Event Label
Event Registration form TourFormSubmission
Information Pack/Prospectus Form ProspectusFormSubmission
General Enquiry form GeneralFormSubmission

 

Enter the tags above as triggers and events

Go back to Google Tag Manager and create a GTM code for Enquiry Tracker forms and perform below steps.

Step 1: Create the Trigger

    1. Create a new trigger and choose a type of trigger as a “Custom event”.
    2. Provide an event name. Same name should be provided into enquiry tracker forms. Refer to the field “Event label for Google analytics”.
    3. Create a tag for this event & keep a tag type as a “Custom HTML”.
    4. Add the below code into it.
  Note: While copy pasting, Please remember to replace {{event-name}}, {{event-label}} & {{school-website-url}} with actual values.

 

<script>  
try {

   var postObject = JSON.stringify({ event: '{{event-name}}', label: '{{event-label}}’' });
   parent.postMessage(postObject, '{{school-website-url}}')
} catch (error) {
   window.console && window.console.log(e);
}
</script>

As seen in the image below, you now need to do the following:

  • add the nonce=”googletagmanager” in script
  • Enable the support document write checkbox

After adding the above code , you then need to add an additional value/pair:

  • Under Advanced Settings > Additional Tag Metadata as seen below
  • Add the following key-value pair:
    • key - nonce
    • value - googletagmanagerOpen image-20250313-125233.png

  • And SAVE the Additional Tag

Sample code after replacing a value of event-name, event-label & school-website-url is in the code snippet below.

  • We suggest keeping an event-name as provided in Enquiry Tracker. You can find this name under Admin> App Integration> Edit Any form> Event label for Google Analytics.
  • You can keep a label as per your convenience.
  • School-Website-URL :- Add your school website URL.
<script>  
try {
   var postObject = JSON.stringify({ event: 'GeneralFormSubmission', label: 'General Form Submission label' });
   parent.postMessage(postObject, 'http://schoolwebsite.com')
} catch (error) {
   window.console && window.console.log(e);
}
</script>

mceclip0.png

  • Publish the Tag and Trigger
  • By doing this step you will be able to pass the event data to the school GTM ID.

Step 2: Integrate GTM code in School Website

  Note: In this step you must use a unique GTM ID for Enquiry Tracker from your website, which will allow you to track campaign results and link back to specific Enquiry Tracker form submissions. If you don't, it will result in two events firing.

 

  1. Be sure the GTM ID for the school website is unique and different then the one used in Enquiry Tracker
  2. To implement a Google tag manager on your website copy the following JavaScript and paste it as close to the opening <head> tag such that it appears on every page of your website, replacing GTM-XXXX with your container ID:
    <!-- 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-XXXX');</script>
    <!-- End Google Tag Manager -->
  3. Copy the following snippet and paste it immediately after the opening <body> tag on every page of your website, replacing GTM-XXXX with your container ID: 
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->

Create a trigger with trigger type as a PageView

  1. Add a tag against this trigger and add a code as given below.

    mceclip1.png
  2. Here you need to provide the school website URL.
    <script type="text/javascript" >
       (function (window) {
           addEvent(window, 'message', function (message) {
               try {
                   var data = JSON.parse(message.data);
                   var dataLayer = window.dataLayer || (window.dataLayer = []);
                   if (data.event) {
                       dataLayer.push({
                           'event': data.event,
                           'postMessageData': data
                       })
                   }
               } catch (error) { }
           });
           function addEvent(el, evt, fn) {
               if (el.addEventListener) {
                   el.addEventListener(evt, fn)
               } else if (el.attachEvent) {
                   el.attachEvent('on' + evt, function (evt) {
                       fn.call(el, evt);
                   })
               } else if (typeof el['on' + evt] === 'undefined' || el['on' + evt] === null) {
                   el['on' + event] = function (evt) {
                       fn.call(el, evt)
                   };
               }
           }
       })(window);
    </script>
    mceclip2.png

Create a new trigger of custom event

    1. Add an event name against this trigger.  Event name should be the same as {{event-name}} mentioned in Step 1
    2. Set a trigger type as Custom event
      mceclip3.png

Using Google Analytics: GA4

  1. Create a tag
    • Set a tag type as Google Analytics: Google Tag and
    • Set trigger as All Pages,
    • Refer to the screen shots below for more details
  2. You need to provide a measurement ID. You can find that ID from Admin> Data Streams> choose your stream> Measurement ID
    mceclip0.png
  3. Create a tag, attach to that custom event trigger and Keep a tag type as Google Analytics: GA4 Event, Refer to this screen shot for further details.
    mceclip1.png

Now you can verify form submission events in GA4 after successful completion of above steps.

  Note: If you are using UTM params then be sure to perform the below step of Tracking Traffic.

 

Tracking Traffic

If you want to track traffic medium through GTM then you will need to perform the configuration steps below otherwise you can skip this step and your GTM integration is completed.

 

  Note: In this step you must use the same GTM ID, which was set in Step 2 above, this will allow you to track campaign results and link back to specific Enquiry Tracker form submissions.

 

    1. Go to variables -> User defined variables -> Edit Google Analytics Variable
      mceclip6.png

    2. Go to more settings -> Fields to set and add field name & value as per screen shot.
      mceclip7.png
    3. You need a value of fields as variables. Please follow the below screenshot to create a variable of value and use that variable inside a value.
      mceclip8.png

    4. Different query key values, for each variable.

      • utm_source

      • utm_medium

      • utm_campaign

      • utm_term

      • utm_content

    5. Publish the tag and trigger.

Now you can verify form submission events in GA after successful completion of above steps.

 

Related articles

Powered by Zendesk