Google Tag Manager Configuration with Google Analytics 4 Property

Google Tag Manager Configuration with Google Analytics 4 Property

Installing Google Tag Manager in your form

To install Google Tag Manager in your form,

  1. In your Google Tag Manager account, go to Workspace and copy the container ID(GTM-XXXXXX) on the top of the window.
  2. In your form builder, navigate to the  Share tab > Google Tag Manager & Custom Tracking.
  3. Click Google Tag Manager and click Configure.
    Configuring GTM
  4. Paste the Container ID.
  5. Enter an alternate name for your form in Form Alias to identify it in Google Tag Manager.
  6. Under Allowed GTM Tags, you can select which GTM Tags are permitted.
    1. Limited Google Tags restricts you to a specific set, including Google Analytics Settings (legacy), Google tag, Google Analytics 4 Event, Google Ads Conversion Tracking Tag, Conversion Linker, Auto-Event Variable, Constant, Custom Event, URL, Lookup Table.
    2. All Google Tags allows the use of any tags categorized under Google classes. For example- Element Visibility Listener, Timer Listener, Enhance Conversions. Learn more about tags permitted under Google Classes
      GTM Tags
  7. Under Configure Events, select the form events from the following for which you want to push the event details to Google Tag Manager:
    • Form View : You can push an event when a respondent views your form.
    • Page View : If you have a multiple-page form, you can push an event when a respondent visits the selected pages. Enter an alias name for the selected pages to identify them in Google Tag Manager.
    • Onclick Fields : You can push an event when a respondent clicks the selected fields in your form. Enter an alias name for the selected fields to identify them in Google Tag Manager.
    • Review Form : You can push an event when a respondent reviews the form.
    • Save Form : You can push an event when a respondent saves your form.
    • Submit Form : You can push an event when a respondent submits your form.
      Configure Events
  8. You can view the list of variables that will be pushed with each event by clicking Variables.
  9. Click Save.                               

Learn more about the considerations before you install Google Tag Manager.

Configuring Google Tag Manager

To track the selected Zoho Forms events in Google Analytics using Google Tag Manager, follow the steps below:

Configuring Custom Event Trigger

The following Zoho Forms events can be captured using the Custom Event Trigger Type in Google Tag Manager:
Event
Event Name
Form View
zf_formview
Page View
zf_pageview
Onclick Fields
zf_onclickfield
Review Form
zf_reviewform
Save Form
zf_saveform
Submit Form
zf_submitform

To configure a custom event trigger for the above events,

  1. In Google Tag Manager, click Triggers from the left menu and click New.
  2. Enter a name for the event (For example: Submit Form Trigger).
  3. Click Trigger Configuration and choose the  Custom Event trigger type.
  4. Enter the Event Name as given in the above table for the event that you wish to track. To track all the supported custom events in Zoho Forms, you can enter zf_* and select  Use regex matching to allow the field to handle regular expressions.
  5. Click Save.

    Trigger Configuration

When you set up a trigger to fire on All Custom Events, it means that the associated tags will be triggered every time any custom event occurs on the website. So, the trigger responds to every custom event, regardless of the form. If you want tags to fire specifically upon the submission of a particular form, choose Some Custom Events and specify the conditions or criteria that define which events should trigger the associated tags. For example, if your form is named Event Registration, create a data layer variable containing the form name and configure the trigger to respond only when this specific form is submitted."



Repeat the above steps in Google Tag Manager for the events selected in Zoho Forms.

Creating Data Layer Variables

When an event is triggered, a set of data regarding the event is sent from the form to Google Tag Manager. In order to capture this data on Google Tag Manager's end, data layer variables will have to be created. Data Layer is a virtual layer of your form that temporarily holds the data generated when a respondent interacts with your form.

You can create the following Data Layer variables in Google Tag Manager to capture a form event data: 
  • zf_category : This indicates that the data is being pushed from Zoho Forms. This will always be set as Zoho Forms.
  • zf_action : Action that takes place in your form
  • zf_formname : Name of the form
  • zf_field : Field alias name of a field on being clicked
  • zf_page : Field alias name of a page on being viewed 
When you click on 'Variables' next to the event that you've selected, the variables that will be pushed during that event will be displayed custom for your form and event.

Variable Data

To create a Data Layer variable in Google Tag Manager, 

  1. In Google Tag Manager, click Variables from the left menu.

  2. Under User-Defined Variables, click New.

  3. Enter a name for the variable.

  4. Click Variable Configuration and select Data Layer Variable.

  5. Under Data Layer Variable Name, enter the name of the variable as given in the above list (For example: zf_formname) and click Save.

    Data Layer Variable Configuration

    Repeat the above steps to create all the Data Layer variables that you wish to push to Google Tag Manager.
    New variables may be added at the request of users.

Creating a Google Tag

  1. In your Google Analytics account, go to Admin Data Streams.  Click the stream that you have created and copy the MEASUREMENT ID in the top-right corner of the pop-up.

    Copy the MEASUREMENT ID
  2. Now, in your Google Tag Manager container, click Tags from the left menu and click New.
  3. Enter a suitable name for the tag (For example: Google Tag).
  4. Click Tag Configuration and select Google Tag.
  5. Under Tag ID,  paste the ID that you have copied in step 1.
  6. Under Triggeringselect All Pages and click Save.

    GA4 Configuration tag

Creating a Google Analytics 4 Event Tag

  1. Click New to create another tag. Click Tag Configuration and select Google Analytics : GA4 Event.
  2. Enter the Measurement ID copied from Google Analytics.
  3. Enter an Event Name.
  4. Under Event Parametersclick Add Parameter and select the data layer variables that you have created under Value. Give the suitable Parameter Name. Click Add Parameter to add more event parameters.
  5. Under Triggeringselect the Custom Event trigger that you have created.
  6. Click Save.

    GA4 Event tag
You can create more Google Analytics 4 Event Tags to track more form events.

Tracking events when form is embedded in Website

If your form's iframe is embedded in a website, and you have configured to track events in both your website and form using Google Tag Manager, you must configure certain additional settings.

When your Form and Website have different domains

For example, if your form is in the domain forms.zohopublic.com and you have embedded it on your website which is in the domain zylker.com, and you have configured to track events in both your website and form using Google Tag Manager (cross-domain tracking), follow the steps below:
  1. While configuring the Google Analytics : Google Tag, click Configuration Settings.
  2. Enter the Configuration Parameter as cookie_flags and Value as
    max-age=7200;secure;samesite=none;Partitioned;

    Configuration Parameter
NotesNote: If your website and the embedded form have different domains and you wish to capture a visitor's event flow in Google Analytics in a single session, you must create a custom domain for your form to have the same domain as the website.
Info
We recommend that you use the same domain for seamless integration with Google Analytics and Google Tag Manager.

When your Form and Website have the same domain

For example, if your form is in the domain forms.zylker.com and you have embedded it on your website which is in the same domain zylker.comand you have configured to track events in both your website and form using Google Tag Manager, ensure that you use the same Google Analytics Property across the website and the embedded form. No other configurations are required.

Preview and Publish

Once you have configured and saved all your tags, you can click Preview in the top-right corner of Google Tag Manager to test and debug your configuration using the steps here if you are facing issues in tracking.

Click Submit in the top-right corner to publish and push the changes to Zoho Forms. 

Note: Each time you make any changes to your Google Tag Manager configurations, hard refresh your form.
You can check the real time reports in Google Analytics under Reports > Realtime Events.

Note:

  • Google Tag Manager can be configured only in our paid plans.
  • Configuring Google Tag Manager is not supported for forms with the Payment field.
  • You can track form events only in Google Analytics using Google Tag Manager.
Refer to the FAQs on Google Tag Manager for further clarification.