Configure GA4 and Google Tag Manager for Contact Form 7 Submissions

This guide shows you how to set up and configure Google Analytics 4 (GA4), Google Tag Manager and Contact Form 7 on your website.

Before you begin

This guide assumes that you completed the following:

  • Have created Google Analytics account and property.
  • Have created a Google Tag Manager account for your site.

It also assumes you have the following:

  • Access to Google Tag Manager container for the website
  • The Editor (or above) role in the Google Analytics account

Google Tag Manger setup

Make sure that you have access to your GA4 Measurement ID (e.g., “G-XXXXXXXXX”), if you need help, here’s how to find your Measurement ID. To start we’ll be on the Tags page in Google Tag Manager.

This is a preview of what the final setup will look like:

Tag: GA4 – Configuration

  1. Click Tags in the left side navigation.
  2. Click New.
  3. Click Tag Configuration.
  4. Select Google Analytics: GA4 Configuration.
  5. Enter your Measurement ID (how to find your Measurement ID)
  6. Leave “Send a page view event when this configuration loads” checked.
  7. Click Triggering.
  8. Select Initialization – All Pages.
  9. Name the tag GA4 – Config.
  10. Click Save.

Variable: CF7 – Form ID

This is optional, but if you have more than one variation of forms on your website, you can use the formId variable to see them reported on individually. For example, if you have a request a quote form and a contact form, you can see how many times each of them was submitted.

  1. Click Variables in the left side navigation.
  2. Click New in the User Defined Variables section.
  3. Click Variable Configuration.
  4. Select Data Layer Variable under Page Variables in the Choose variable type menu.
  5. For the Data Layer Variable Name enter formId
  6. In the top left update the name from Untitled Variable to CF7 – Form ID
  7. Click Save.

Trigger: CF7 – Submit

  1. Click Triggers on the left side navigation
  2. Click New.
  3. Click Trigger Configuration.
  4. Select Custom Event.
  5. For the Event name enter cf7submission
  6. Leave This trigger fires on All Custom Events selected.
  7. In the top left, update the name from Untitled Trigger to CF7 – Submit
  8. Click Save.

Tag: HTML – CF7 Submit Listener

  1. Click Tags in the left side navigation.
  2. Click Tag Configuration.
  3. Select Custom HTML under Custom in the Choose tag type menu.
  4. In the HTML box enter:
<script>
  document.addEventListener( 'wpcf7mailsent', function( event ) {
    window.dataLayer.push({
      "event" : "cf7submission",
      "formId" : event.detail.contactFormId
    })
  });
</script>
  • Click Triggering.
  • Select All Pages in the Choose a trigger menu.
  • In the top left update the name from Untitled Tag to HTML – CF7 Submission Listener
  • Click Save.

Tag: GA4 Event – Form Submit

  1. Make sure you’re on the Tags page.
  2. Click New.
  3. Click Tag Configuration.
  4. Select Google Analytics: GA4 Event.
  5. For the Configuration Tag select the GA4 – Config tag you made earlier.
  6. In Event Name, enter “generate_lead“, without quotes. This is the recommended name to use when a user submits a form or a request for information. More about GA4 recommended events.
  7. Click Event Parameters.
  8. Click Add Row.
  9. For the Parameter Name enter form_id
  10. For the Value field click the button that looks like a Lego brick with a plus icon and select the CF7 – Form ID variable you created earlier.
  11. Click Triggering.
  12. Select the CF7 – Submit trigger event you created earlier.
  13. In the top left, update the name from Untitled Tag to GA4 Event – Form Submit
  14. Click Save.

Submit Google Tag Manager changes

Your final setup should have 3 tags, 1 trigger, and 1 variable. Your final tag page should look like this:

Note: If you’d like to test your changes you can use the preview mode in Tag Manager to make sure the form submission tag is firing as expected, but that’s out of scope for this tutorial. To submit changes:

  1. Click Submit.
  2. Click Publish.
  3. Click Continue.

Set form submit event as conversion in GA4

Go to the Admin page for your property in GA4 and select Conversions.

  1. Click New conversion event.
  2. Enter generate_lead as the New event name.
  3. Click Save.

Final Steps – Testing

© 2023 Williamson Design