Track Contact Form 7 with GTM for Google ads, Analytics and Faebook
Welcome! If you’re here, you likely have an Contact Form 7 on your website to let visitors easily submit contact form. Now, you’re looking to track Contact Form 7 submissions for Google Analytics 4 (GA4), Google Ads, or Facebook Ads to measure conversions effectively.
You can also hire me to track WP Forms conversions for you.
You’re in the right place! In this post, I’ll show you how to track WP Forms using Google Tag Manager and send event data to platforms like GA4, Google Ads, and Facebook Ads.
Why Track Contact Form 7 Conversion Tracking?
Tracking these conversions allows you to:
- Optimize Ad Campaigns: Know which ad campaigns drive more appointments.
- Measure Marketing ROI: Understand which marketing efforts bring quality leads.
- Enhance User Experience: By analyzing the data, you can make better decisions to improve your funnel.
Video tutorial
What interactions can we track?
When someone submits our Contact Form 7, we track it as a conversion for Google Ads, Analytics, or Tag Manager.
Listener code
To set up tracking for Contact Form 7 with Google Tag Manager, follow these steps:
- Go to your GTM container.
- Click on Tags and then select New.
- Choose Custom HTML and paste the code below into the provided field.
This will enable GTM data_layer tracking for your Contact Form 7 events.
This code creates a listener to detect Contact Form 7 submission events and push data to the data layer when your Contact Form 7 is submitted.
In the tag’s triggering section, select the All Pages trigger. If your Contact Form 7 only appears on specific pages, set up a more specific pageview trigger. For this, use a condition like Page URL contains XXXX (replace “XXXX” with the page URL where the WPForm is located).
Save the tag, and now it’s time to test if the listener is functioning correctly. To do this, click the Preview button located in the top-right corner of the Google Tag Manager interface.
Next, enter the URL of the page where your contact form located.
Click Connect to activate preview and debug mode. This will open a new tab or window displaying your website.
Next, submit your Contact Form…
Return to the GTM preview mode tab, and on the left side, you should see contact_form_submit events. Click on one of these events, expand the API call, and you should see details like this:
Custom event trigger for Form submit Event
In this case, we want to see the ‘contact_form_submit ’ event in preview mode. To do this, create a Custom Event trigger in Google Tag Manager. Navigate to Triggers > New > Custom Event, and enter the custom event name. Refer to the example image below for guidance_
Google Analytics 4 tag for Contact Form Submit
Now it’s time to send Form Submit events to Google Analytics 4. In Google Tag Manager, go to Tags > New > Google Analytics > GA4 Event Tag.
- Enter your GA4 Measurement ID.
- Use descriptive event names, such as contact_form_submit, to simplify analysis (e.g., Path exploration).
Your GA4 event tag setup might look like this:
Let's Test
Save the tag and click the Preview button in the GTM interface to refresh preview mode. The page with the contact form will reload.
– then submit you form
Return to the Preview mode tab and check for the contact_form_submit events. If they appear, click on them one by one to confirm that your GA4 tag fired successfully.
Next, go to your Google Analytics 4 property and navigate to Admin > DebugView.
– Locate your device in the top-left corner.
– In the event stream, you should see your contact_form_submit events.
Great news 🙂 Our Contact Form 7 tracking for Google Analytics 4 is complete.
If you want to set up Contact Form 7 tracking for Google Ads or Facebook Pixel, check out my other blog or videos.
