Overview

Pre-requisites

1. Google Tag Manager (GTM) or any web analytics service must be properly configured on the website to ensure that the events are successfully captured.
   

Google Tag Manager (GTM) and PostMessage Tracking operate independently. Therefore, configuring both simultaneously for the same form might result in duplicate event captures.

Configuring PostMessage Tracking

1. In your form builder, navigate to the Share tab > Google Tag Manager & Custom Tracking.
2. Navigate to PostMessage Tracking and click Configure.
   
   
3. Enter an alternate name for your form in Form Alias to identify it on your website.
4. Under Configure Events, select the form events for which you want to push the event details to the website where your form is embedded.
   
1. Form View: Pushes an event when a respondent views your form.
   
2. Page View: For multiple-page forms, you can push an event when a respondent visits the selected pages. Enter an alias name for the selected pages to identify them in the website.
   
3. Onclick Fields: Pushes an event when a respondent clicks the selected fields in the form. Enter an alias name for the selected fields to identify them in the website.
   
4. Review Form: Pushes an event when a respondent reviews the form.
   
5. Save Form: Pushes an event when a respondent saves your form.
   
6. Submit Form: Pushes an event when a respondent submits your form.  To push data from your form to an external website, enable Configure Data Push and then map the fields you want to send.

   
   
5. View the list of variables that will be pushed with each event by hovering over the event and clicking Variables.
6. Click Save. 
   
7. After saving, a popup with the PostMessage Tracking Code will be displayed. Copy this code, embed it in your website's header, and publish your website.
   

Within the code, any additional functionality should be implemented by invoking a dedicated function within the appropriate event listener. Avoid placing the entire custom logic directly inside the event listener. This approach ensures that any errors in your custom code will not interfere with the stable operation of the existing implementation.

Note: PostMessage Tracking is not supported if the form is embedded on your website using the HTML/CSS embed option. 

Data Push Configuration

To push data from your form to an external website, enable Configure Website Data Push under Submit event and then map the fields you want to send.

Note: If your form is HIPAA-enabled and you have marked certain fields as HIPAA-compliant, then the ePHI data will not be pushed to external sources unless you explicitly choose to send that data in your form settings.

Capturing Form Data via Data Layer Variable in GTM

To fetch the values entered in the form that are sent via Data Push, you must create a DataLayer Variable within Google Tag Manager(GTM). This variable acts as a pointer/key to fetch specific records stored within the zf_data JSON that your from pushes to the data layer.

For example, to fetch the first name entered in the form, set the Data Layer Variable Name to  zf_data.zf_name_first.

Here zf_data denotes to JSON which contains all the pushed form values. zf_name_first is the variable that holds the first name value. 

PostMessage Tracking with Other Web Analytics Services

1. Embed Tracking Code
   Place the PostMessage Tracking Code in your website's header section. This will capture the form events on your website. 
2. Customize Embed Tracking Code
   
   To push the captured events to your specific web analytics service, customize the PostMessage Tracking Code as required.
   
   
   

   Within the code, any additional functionality should be implemented by invoking a dedicated function within the appropriate event listener. Avoid placing the entire custom logic directly inside the event listener. This approach ensures that any errors in your custom code will not interfere with the stable operation of the existing implementation.
3. Configure Analytics Service
   Properly configure your specific web analytics service to receive the events.

1. Unified Analytics: Consolidates data from your form and your website into a single analytics platform.
   
2. Cross-Domain Tracking: Track user behaviour even when your form is hosted on a different domain than your website.
   
3. Consent-Driven Tracking: Event data is only triggered to web analytics services upon user acceptance of consent. With PostMessage Tracking, once consent is given on the website, event data is immediately triggered for conversions, contrasting with Zoho Forms GTM configuration.
4. Payment Forms: Post Message Tracking can be configured for payment forms.
   
5. Non-Google Tags Support: Trigger events for non-google tags like TikTok, Meta Pixel, and Pinterest are supported as we are sharing the events with your website. 
   

Note:

1. If you configure a custom domain after setting up PostMessage Tracking, you must retrieve and re-embed the code in your website's header.
   
2. Event capture occurs only when the form is accessed while embedded in a website, not when accessed directly via its URL.
   
3. Your website is responsible for obtaining user consent for data transfer to analytics, as forms transmit data only to your website, it is then forwards it to analytics services via your website.