Google Tag Manager (GTM) and Google Analytics 4 (GA4)
Certainly! Tracking form submissions on your “Contact Us” page using Google Tag Manager (GTM) and Google Analytics 4 (GA4) allows you to gain valuable insights into user interactions and conversions. Below is a comprehensive step-by-step guide to set up this tracking effectively.
Step 1: Prerequisites
Before you begin, ensure the following:
- Google Tag Manager Account:
- If you haven’t already, create a GTM account and install the GTM container snippet on your website. This usually involves adding two snippets of code (one in the
<head>and one immediately after the opening<body>tag) to every page of your website.
- If you haven’t already, create a GTM account and install the GTM container snippet on your website. This usually involves adding two snippets of code (one in the
- Google Analytics 4 Property:
- Set up a GA4 property in your Google Analytics account.
- Ensure the GA4 Measurement ID (looks like
G-XXXXXXXXXX) is noted for later use.
- Access to Your Website’s Form:
- Ensure you have access to the HTML/CSS of your “Contact Us” form to verify form IDs, classes, or other identifiers.
- Browser Developer Tools:
- Familiarity with using browser developer tools (like Chrome DevTools) for inspecting elements and debugging.
Step 2: Enable Built-In Form Variables in GTM
To capture form interactions, you need to enable relevant built-in variables in GTM.
- Log into GTM:
- Navigate to your GTM account and select the appropriate container.
- Enable Form Variables:
- Go to Variables in the left-hand menu.
- Under Built-In Variables, click on Configure.
- In the list that appears, check the boxes for the following Form Variables:
- Form ID
- Form Classes
- Form Element
- Form Target
- Form URL
- Form Classes
- Additionally, ensure that Click Variables are enabled if you plan to track clicks on the form’s submit button:
- Click ID
- Click Classes
- Click URL
- Click Text
Step 3: Create a Form Submission Trigger in GTM
This trigger will fire when a user successfully submits the form.
- Navigate to Triggers:
- In GTM, click on Triggers in the left-hand menu.
- Create a New Trigger:
- Click on the New button.
- Name your trigger, e.g., “Contact Form Submission”.
- Configure Trigger Type:
- Click on Trigger Configuration.
- Select Form Submission.
- Set Trigger Conditions:
- By default, the trigger fires on All Forms. To make it specific to your “Contact Us” form:
- Choose Some Forms.
- Define conditions based on your form’s unique identifiers. For example:
- Form ID equals
contactForm - OR
- Form Classes contains
contact-us-form
- Form ID equals
- You can inspect your form’s HTML to determine the appropriate identifiers using browser developer tools.
- By default, the trigger fires on All Forms. To make it specific to your “Contact Us” form:
- Save the Trigger.
Step 4: Create a GA4 Event Tag in GTM
This tag will send an event to GA4 when the form is submitted.
- Navigate to Tags:
- In GTM, click on Tags in the left-hand menu.
- Create a New Tag:
- Click on the New button.
- Name your tag, e.g., “GA4 – Contact Form Submission”.
- Configure Tag Type:
- Click on Tag Configuration.
- Select Google Analytics: GA4 Event.
- Set Up Tag Parameters:
- Configuration Tag:
- Choose your existing GA4 Configuration tag from the dropdown. If you haven’t created one yet:
- Click New Variable.
- Select Google Analytics: GA4 Configuration.
- Enter your Measurement ID (
G-XXXXXXXXXX). - Save the variable.
- Choose your existing GA4 Configuration tag from the dropdown. If you haven’t created one yet:
- Event Name:
- Enter a descriptive event name, e.g.,
contact_form_submit.
- Enter a descriptive event name, e.g.,
- Event Parameters (optional but recommended for more insights):
- Click on Add Row to include parameters such as:
- Parameter Name:
form_id- Value:
{{Form ID}}
- Value:
- Parameter Name:
form_class- Value:
{{Form Classes}}
- Value:
- Parameter Name:
page_path- Value:
{{Page Path}}
- Value:
- Parameter Name:
- (You can add more parameters based on the data you wish to capture.)
- Click on Add Row to include parameters such as:
- Configuration Tag:
- Assign Trigger to Tag:
- Click on Triggering.
- Select the “Contact Form Submission” trigger you created earlier.
- Save the Tag.
Step 5: (Optional) Capture Form Field Data
If you want to capture specific data entered into the form (e.g., user’s name or email), follow these steps:
- Create Variables for Form Fields:
- Go to Variables in GTM.
- Click on New and select DOM Element as the variable type.
- Configure as follows:
- Variable Name:
Form Field - Name - Selection Method: CSS Selector
- Element Selector:
input[name="yourNameFieldName"](Replace with your form’s actual input name) - Attribute Name:
value
- Variable Name:
- Repeat for other form fields (e.g., Email, Message).
- Add Event Parameters to GA4 Tag:
- Edit your “GA4 – Contact Form Submission” tag.
- Under Event Parameters, add new rows:
- Parameter Name:
user_name- Value:
{{Form Field - Name}}
- Value:
- Parameter Name:
user_email- Value:
{{Form Field - Email}}
- Value:
- Parameter Name:
- (Ensure you comply with privacy policies and data protection regulations when capturing user data.)
- Save the Tag.
Step 6: Test Your Setup with GTM Preview Mode
Before publishing, ensure everything works correctly.
- Enter Preview Mode:
- In GTM, click on the Preview button in the top-right corner.
- Enter your website URL and click Start. This will open your website in a new tab with the GTM Debugger pane.
- Submit the Contact Form:
- Navigate to your “Contact Us” page.
- Fill out and submit the form.
- Verify Trigger and Tag Firing:
- In the GTM Debugger pane, under Tags Fired, confirm that your “GA4 – Contact Form Submission” tag has fired.
- Check the Variables tab to ensure that all variables (e.g.,
Form ID,Form Classes,Form Field - Name) are capturing the correct values.
- Check GA4 Real-Time Reports:
- In GA4, navigate to Reports > Real-time.
- Look for the
contact_form_submitevent in the event list to confirm it’s being received.
Step 7: Publish Your GTM Container
Once testing confirms that everything is working correctly:
- Exit Preview Mode:
- In GTM, click on Leave Preview in the top-right corner.
- Submit Changes:
- Click on the Submit button in GTM.
- Version Details:
- Enter a Version Name (e.g., “Contact Form Tracking Setup”) and an optional Description.
- Publish:
- Click Publish to make your changes live.
Step 8: Verify Data in GA4
After publishing, ensure that form submissions are being tracked correctly over time.
- Wait for Data Processing:
- While Real-Time reports show immediate data, standard reports might take up to 24 hours to process.
- Check Event Reports:
- In GA4, navigate to Reports > Engagement > Events.
- Look for the
contact_form_submitevent.
- Create Conversions (Optional but Recommended):
- To treat form submissions as conversions:
- In GA4, go to Configure > Conversions.
- Click on New Conversion Event.
- Enter the event name
contact_form_submit. - Click Save.
- This allows you to track form submissions as key performance indicators.
- To treat form submissions as conversions:
Step 9: (Optional) Enhance Tracking with Additional Features
For deeper insights, consider implementing the following enhancements:
- Thank You Page Tracking:
- If your form redirects to a “Thank You” page upon submission, set up a Page View Trigger for that URL and create a corresponding GA4 event.
- Enhanced Measurement in GA4:
- GA4 offers Enhanced Measurement features that can automatically track certain interactions. Ensure that Form Interactions are enabled in your GA4 property settings.
- Use Custom Dimensions:
- For capturing more granular data, set up Custom Dimensions in GA4 and pass additional form data via GTM.
- Integrate with Other Tools:
- Connect GA4 with other tools like Google Ads or CRM systems for comprehensive marketing and sales insights.
Troubleshooting Tips
- Tags Not Firing:
- Ensure that the trigger conditions accurately match your form’s identifiers.
- Double-check that the GTM container snippet is correctly installed on all relevant pages.
- No Data in GA4:
- Confirm that the GA4 Configuration tag is correctly set up with the right Measurement ID.
- Ensure that you’re looking for the correct event name (
contact_form_submit).
- Incorrect Variable Values:
- Verify that the CSS selectors used in DOM Element variables accurately target your form fields.
- Use browser developer tools to inspect element attributes.
By following this comprehensive guide, you’ll successfully set up form submission tracking for your “Contact Us” page using Google Tag Manager and Google Analytics 4. This setup will enable you to monitor user interactions, measure conversions, and gain valuable insights to optimize your website’s performance.
