Skip to main content

GA4: Tracking form submissions through Google Tag Manager with Connect forms

Michelle McNamara
  • Updated

What is covered in this article? 

Overview

Connect also supports Google Tag Manager, which can be used to track Connect 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 Connect

To enable this, just go to ADMIN > App Integration> Google Analytics within Enquiry Tracker and enter the Google Tag Manager ID.

Once a valid ID has been entered, you will be able to turn on the tag manager for the Enquiry Tracker forms. The tags are visible on each form under ADMIN>SIGNUP FORMS, but only once the option above has been turned on.

The default Event Labels are:

Form Name Event Label
Event Registration form TourFormSubmission
Information Pack/Prospectus Form ProspectusFormSubmission
General Inquiry 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.

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>

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>

trigger1.png

Integrate GTM code in School Website

  1. Be sure you have your GTM code for the school website
  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.

trigger2.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>

trigger3.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 3

2. Set a trigger type as Custom event

trigger4.png

Using Google Analytics : Universal Analytics (GA3)

1. Create a tag and attach to that custom event trigger.  Be sure to keep  tag type as Google Analytics:Universal Analytics, Refer to this screen shot for further details

trigger5.png

2. You need to create a new variable. Choose a variable type as a data layer variable. Keep a variable name as per screen shot & save it. Use that variable in Label in above screen shot.

 

Using Google Analytics : GA4

  1. Create a tag, set a tag type as Google Analytics: GA4 Configuration and set trigger as All Pages, Refer to this screen shot for further details.
  2. You need to provide a measurement ID. You can find that ID from Admin> Data Streams> choose your stream> Measurement ID

trigger6.png

3. Create a tag, attach to that custom event trigger and Keep a tag type asGoogle Analytics: GA4 Event, Refer to this screen shot for further details.

trigger7.png

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

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.

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

trigger8.png

2. Go to more settings -> Fields to set and add field name & value as per screen shot.

trigger9.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.

trigger10.png

4. Different query key values, for each variable.

      • utm_source

      • utm_medium

      • utm_campaign

      • utm_term

      • utm_content

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

Related articles

Comments

0 comments

Please sign in to leave a comment.