How To Track A Contact Form 7 Conversion With Google Analytics 4 And Google Tag Manager

How To Track A Contact Form 7 Conversion With Google Analytics 4 And Google Tag Manager

Uncategorized

arnold on Apr 20, 2024

In this article, I will show you how to track successful submissions of Contact Form 7 forms using Google Tag Manager (GTM) and Google Analytics 4 (GA4). This setup allows website administrators and marketers to capture and analyze detailed data from form interactions, providing valuable insights into how users engage with the forms and what drives their actions.

Step 1: Check Your Existing Setup Of GA4

Before proceeding with the tracking setup, it is crucial to ensure that Google Tag Manager is correctly installed on your website, specifically on the pages where Contact Form 7 is embedded. Additionally, you must have your Google Analytics 4 tracking code activated within Google Tag Manager. These preliminary steps are fundamental to enabling the accurate tracking of form submissions and ensuring that the collected data integrates seamlessly with your analytics platform.

Since we set this up previously you should go to your Google Analytics and check to see that you have data showing a visit to your website.

You also need to double check that you have your contact form 7 installed on your website and properly configured on your home page.

If you see the contact form on your home page and you followed my previous instruction correctly then you should see something like this:

Contact form 7 installed on mesmerize theme

Make sure you have an email address configured and send a test email and make sure you receive that test email. If you receive the test email you should continue.  If you do not receive the test email check your junk email.

Step 2: Custom HTML Tag Creation

The first step is to set up a custom HTML tag in Google Tag Manager that “listens” for the submission of the contact form. This involves configuring the tag to detect when the form’s submit button is pressed. The process involves using custom JavaScript code that activates when a form is successfully submitted. This code specifically listens for the ‘wpcf7mailsent’ event, which is unique to Contact Form 7, capturing essential data about the form submission and pushing it into GTM’s data layer. Once in the data layer, this information can be used to trigger additional processes or be sent directly to Google Analytics 4 for further analysis.

The code we will use for our tag is below.  Copy the code to use in the next step.

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
 window.dataLayer.push({
 "event" : "cf7submission",
 "formId" : event.detail.contactFormId,
 "response" : event.detail.inputs
 })
}); 
</script>

It listens for a specific event (wpcf7mailsent) that occurs when an email is successfully sent using Contact Form 7. Here’s a breakdown of what each part of the script does:

  1. Event Listener: document.addEventListener('wpcf7mailsent', function(event) {...})
    • This part of the code sets up an event listener that triggers when the ‘wpcf7mailsent’ event occurs. This event is dispatched by Contact Form 7 after a form is successfully submitted and the confirmation email is sent.
  2. Function Execution:
    • Inside the event listener, a function is executed whenever the ‘wpcf7mailsent’ event is triggered. The event object passed into the function contains details about the form submission.
  3. Data Layer Push: window.dataLayer.push({...})
    • This line of code pushes an object into the dataLayer array. Google Tag Manager uses the dataLayer to store and retrieve data. Pushing data to it allows you to track specific events and their details on your website.
    • The object pushed into the dataLayer contains three properties:
      • event: Set to “cf7submission”, this custom event name can be used in Google Tag Manager to trigger specific tags.
      • formId: event.detail.contactFormId captures the ID of the form that was submitted. This allows you to identify which specific form on your website was used when multiple forms are present.
      • response: event.detail.inputs contains the inputs from the form submission, which can include data entered by the user. This allows you to analyze the user’s responses.

 

Next, navigate to your Google Tag Manager, and select Tags > New > Tag Configuration > Custom HTML.

Click Tags then New in GTM

 

Click Configuration then Custom HTML

Paste the copied code into the HTML text area:

Copy Code Into The Box

 

Click Triggering, then configure the trigger to Fire on All Pages or specify pages where Contact Form 7 is present.

Click Triggering Then All Pages

Next give the tag a name and click SAVE.  I named my tag “CF7 Listen”

Give it a name and then save

 

 

Step 3: Testing the Listener

Go to the Preview mode in GTM.

Go To Preview Mode In GTM

Enter the URL of the page with the contact form and connect.

Enter URL Where the Contact form is and then connect

Submit the form and check for a success message.

Fill out info and click submit

Look for a success message.  Mine was the wrong colored font but highlighting it showed the success message.

Success message

 

Verify that the CF7 submission event appears in the GTM preview mode. To do this go back to the GTM tag on look on the left.  You should see the HTML tag you set up in the previous step.

Check Your Event and gather the event and form data

Step 4: Create Data Layer Variables

In the next step, we’re setting up data layer variables in Google Tag Manager (GTM) to collect specific information from each form submission. Think of these variables as labels that help us identify and store important details like which form was submitted. For example, by creating a variable for “form ID,” we can track which particular form on the website was used. This is useful because it lets us see and analyze different forms separately. We do this by defining a new variable in GTM that picks up this information and keeps it ready for use in our analysis or reporting.

In GTM, navigate to Variables > User-Defined Variables > New.

Click Variable Then New

Select Data Layer Variable configuration.

Select Data Layer Variable

Enter the parameter name (e.g., “form ID”) that you want to track, noting case sensitivity. Name and save the variable.

entering the formid into the variable

Step 5: Setup Trigger for GA4 Event Tag

We now need to set up a trigger in Google Tag Manager (GTM) that will activate a specific action when a form is submitted. This trigger watches for the form submission event and, when it happens, it tells GTM to send this information to Google Analytics 4 (GA4). This way, every time someone submits a form, GA4 will record the event, allowing us to analyze form submissions in our analytics reports. Setting up this trigger ensures that we capture every form submission at the right moment. If we do not set up the trigger, Google Analytics 4 (GA4) would not receive any data about form submissions. Without the trigger, the event that records a form being submitted won’t activate, meaning no data gets sent to GA4.

To set up the trigger go back to GTM and go to Triggers > New > Trigger Configuration > Custom Event.

Click Triggers Then New

Select A Custom Event

 

Name and save the trigger. Enter the event name exactly as it appears in the data layer.

Name Your Trigger

 

Step 6: Create GA4 Event Tag

We now need to create a GA4 event tag in Google Tag Manager (GTM). This tag is responsible for sending specific data about form submissions directly to Google Analytics 4 (GA4) whenever a form is submitted on your website. Essentially, this tag turns the action of a form submission into valuable data that GA4 can understand and track. This allows you to monitor how often forms are submitted and gather insights on user interactions. By setting up this tag, you ensure that every form submission is accurately recorded and analyzed in your analytics platform.

In the previous step the focus is on setting up a trigger. This trigger is like a sensor that detects when a specific action occurs—in this case, the submission of a form. The trigger’s job is to monitor for the ‘wpcf7mailsent’ event, which occurs when a Contact Form 7 form is successfully submitted. Once this event is detected, the trigger becomes active, indicating that the next steps in the data processing sequence (like sending data to GA4) should begin.

  • Purpose: To detect and respond to a specific event (form submission).
  • Function: Acts as a condition that must be met for the GA4 event tag to activate.

In this step we will create a GA4 event tag. This tag is what actually sends the data to Google Analytics 4 when the trigger from Step 6 is activated. The tag takes the information from the form submission (like form ID and user input) and packages it into a format that GA4 can receive and analyze. This tag is crucial for ensuring that the data not only gets captured but also gets transmitted to your analytics dashboard where it can be reviewed and used for decision-making.

  • Purpose: To transmit data to Google Analytics 4 upon trigger activation.
  • Function: Acts as a conduit, sending specific, structured data to GA4 whenever the associated trigger is activated.

Navigate to Tags > New > Tag Configuration > Google Analytics: GA4 Event.

Select Tags then new

Selected a GA4 Tag

Select a GA4 Event

 

You now need to enter your Measurement ID from Google Analytics.  To find your measurement ID you need to go to Admin in Google Analytics.  Then find Data Streams.

Find your data stream in GA4

 

Expand your data Stream:

find your data stream

 

Then copy your measurement ID for the next step:

Copy Measurement ID

 

When setting up a tag in Google Tag Manager to send data to Google Analytics 4, you’ll need to input some specific information to ensure everything tracks correctly:

  1. Enter the Measurement ID from your GA4 data stream: This is like an address that tells the tag exactly where to send the data in Google Analytics. You find this ID in your GA4 account settings—it uniquely identifies your data stream.
  2. Specify the event name: form_submission: This is the label you give to the type of action you’re tracking, which in this case is when someone submits a form. By naming it “form_submission,” you make it clear what the event is about.
  3. Add event parameters such as the form ID using the data layer variable you created: Event parameters are additional details you track about the event. For example, the form ID helps you know which specific form was submitted. You capture this detail using a data layer variable that you’ve set up in Google Tag Manager, which grabs the form ID every time a form is submitted.

Configuring GA4 Tag

Select Data Layer Variable For FormID

 

Next, set the previously created custom event trigger as the firing trigger. Simply put, setting the previously created custom event trigger as the firing trigger means you are instructing Google Tag Manager to activate or “fire” a specific tag (like sending data to Google Analytics) whenever the conditions of that custom event are met. For instance, if your custom event trigger is designed to detect when a form is submitted, you’re telling Google Tag Manager to execute the associated actions (like recording the submission event) each time that happens. This ensures that every time the form is submitted, the necessary data is captured and processed accordingly.

Select Trigger

Select The Custom trigger

Name and save the tag.

Name your final tag

Step 7: Final Testing

Preview the setup in GTM to ensure everything is functioning as expected. Submit the form on your live site and check that the event and form ID are being sent to GA4.

Go to the Preview mode in GTM.

Go To Preview Mode In GTM

Enter the URL of the page with the contact form and connect.

Enter URL Where the Contact form is and then connect

Submit the form and check for a success message.

Fill out info and click submit

Look for a success message.  Mine was the wrong colored font but highlighting it showed the success message.

Success message

 

Now Go back to your Google tag manager again and look in the left sidebar for the cf7submission.  Click on that to get expanded data.  If you can see that the GA4 Form submission tag fired then you know everything was set up correctly.

Tag fired correctly

Now go back to your Google analytics to see if GA4 was able to track the form submission.  Go to the admin section of your GA4.  Then look for Data Display.  Then look for DebugView.  When you click on that you should look for your form_submission.  Click on that.

Finding Form submitted data

Once you click on the form_submission you can see your form_id and if click on that you can see the ID of your form which is 9 for me.  Since I can see GA4 collected all this info I can be confident my configuration is working.

Step 8: Publish Changes in GTM

Once verified, go to GTM and submit and publish the changes to activate the tracking for all users.

submit final changes to GTM

Give your configuration a name and publish it.

name and publish

 

Step 9: Register Custom Dimension in GA4

As a recap, to track form submissions on your website using Google Tag Manager (GTM) and Google Analytics 4 (GA4), we first set up GTM to detect when a form is submitted by creating a custom HTML tag that captures the ‘wpcf7mailsent’ event from Contact Form 7. We then defined a trigger in GTM that activates when this event occurs, and we set up a GA4 event tag that sends this data to GA4 every time the form is submitted. This setup allows us to track each form submission as an event in GA4.

The next step was to create a custom dimension in GA4 for “form ID” because GA4 doesn’t automatically track which specific form is submitted.  On websites you will usually multiple different contact forms on different pages and where the form gets submitted can be a useful piece of data. By defining this custom dimension, we can segment the form submission data further, allowing for more detailed analysis in GA4. This helps us understand which forms are performing well and informs potential improvements or changes to our forms based on user interactions.

To start go to Google Analytics > Admin > Custom Definitions > Custom Dimensions. Create a new dimension for “form_id” if it’s not automatically tracked. Ensure the scope is set to “Event” and match the event parameter as you set in GTM.

How To Define A Custom Dimension

You should now have a form ID custom dimension set up as shown in the screenshot below. It will take between 24 and 48 hours for Google Analytics to display this data in your results.

Form ID

Step 10: Setting A Form Submission As A Conversion (Or Key Event).

For the next step we will take our form submission event and mark it as a conversions (or key event). Remember Google Analytics 4 (GA4) is updating its terminology, renaming what was previously known as “conversions” to “Key events.”

Setting form submissions as a conversion (or Key event) in Google Analytics 4 (GA4) allows you to measure how effectively your forms are contributing to your website’s goals. By defining form submissions as conversions or Key events, you highlight these interactions as key success metrics for your site.

This helps you track the performance of your forms in terms of engaging users and driving them to complete important actions, like signing up for newsletters, registering for events, or making inquiries. Monitoring these conversions or Key events gives you valuable insights into user behavior and the effectiveness of your forms, enabling you to make data-driven decisions to optimize your site and improve user engagement.

Setting an Event as a conversion is simple. Go to your Key Events -> New Key Events -> Enter form_submission -> Save.

Setting form submission as key event in GA4

Step 11:  Testing Your Setup In Realtime Results

After setting up form submissions as conversions or Key events in Google Analytics 4 (GA4), we will now test and verify that everything is working as intended. By navigating to the Realtime report in GA4, you can immediately see the results of your setup in action. This real-time monitoring allows you to submit a test form on your website and check if the form submission event is correctly captured and reported as a conversion or Key event. This step is essential to ensure that the data is flowing correctly and that each form submission is being accurately tracked.

My recommendation is to turn off the WIFI on your mobile phone and navigate to your website from your phone.

Then go to your Google Analytics and go to REPORTS and then RealTime

Finding a key event in google anlytics 4

 

If you see your form submission as a key event or conversion then you set everything up correctly.

How We Can Use This Conversion Data:

With the setup of form submission conversions (or Key events) in Google Analytics 4 (GA4), a business can now deeply analyze the effectiveness of various marketing strategies by tracking which ones lead to actual form submissions on their website. This capability is especially powerful for businesses investing in multiple marketing channels and needing to evaluate the ROI of each.

Hypothetical Example: A Dental Practice
Imagine a dental practice that spends $5,000 a month on various marketing efforts including Google Ads, email marketing, social media ads, and traditional snail mail. Without conversion tracking, the practice knows it receives about 100 contact form leads each month but has no insight into which marketing effort is most effective.

By implementing conversion tracking for their contact forms, the practice can now attribute each form submission to a specific marketing channel. This is how it works:

Google Ads: They can use UTM parameters to track which clicks on their ads lead to form submissions.
Email Marketing: By embedding unique links in emails, the practice can track which email campaigns generate the most form submissions.
Social Media Ads: Similar to Google Ads, social media platforms provide tools to track conversions from ads directly in their reporting interfaces, which can be integrated into GA4.
Snail Mail: Although more challenging, using a unique URL or QR code on printed materials that leads to a specific landing page can help track submissions from this traditional channel.

As data accumulates in GA4, the dental practice can see a clear breakdown of how many conversions each marketing channel is generating. For instance, they might find that Google Ads are generating 40 leads, email marketing 30 leads, social media ads 20 leads, and snail mail 10 leads. This information is crucial as it allows the practice to calculate the cost per lead for each channel ($125 for Google Ads, $166.67 for email, $250 for social media, and $500 for snail mail).

With these insights, the dental practice can make informed decisions on where to adjust their marketing spend. For example, they might choose to reallocate more budget towards Google Ads and email marketing, which offer lower costs per lead, while reducing spending on snail mail.

This strategic use of conversion tracking enables the practice to optimize their marketing budget, focus on the most effective channels, and ultimately improve their overall return on investment. This analytical approach ensures that every marketing dollar spent is accountable, driving better business outcomes through data-driven decisions.

In a future guide I will show how we can go into our analytics and use this data we set up.

 

 

 

The Ultimate

DIGITAL MARKETING Email List

SPEND ONE HOUR A WEEK ON YOUR DIGITAL MARKETING WITH THE HELP OF OUR WEEKLY GUIDES EMAILED TO YOU!

SIGN UP NOW

    IS THIS CONTENT

    UP-TO-DATE?

    IF NOT, PLEASE LET US KNOW
    SO WE CAN UPDATE

    POPULAR POSTS