How to set up conversion tracking with Tag Manager and GA4 for ads

Track Your Success: Setting Up GA4 Conversions with Google Tag Manager for Form Submissions

Want to know exactly which marketing efforts are driving valuable actions on your website? Setting up conversion tracking in Google Analytics 4 (GA4) is crucial, and using Google Tag Manager (GTM) makes the process efficient and manageable.

In this guide, we’ll walk you through the steps to track form submissions on your website as conversions in GA4 using GTM. This is a fundamental step towards understanding user behavior and optimizing your marketing campaigns.

Prerequisites:

• Google Tag Manager is set up on your website. If you haven’t done this yet, you’ll need to install the GTM container snippet on all pages of your site.
• Your Google Analytics 4 property is set up. You should have a GA4 property created and linked to your website.
• Google Tag is loaded on your website (via GTM). This ensures GTM can deploy other tags, including the GA4 event tag for conversions.

Let’s dive into the steps:

1. Identify Your Form Submission Trigger in Google Tag Manager

The first step is to tell GTM when to recognize a form submission as a conversion. We’ll explore two common methods:

• The Power of the Data Layer (Recommended): This is the most reliable approach. By pushing a specific event to the data layer upon successful form submission, you create a clear signal for GTM to listen for.

  • Website Developer’s Role: Your web developer will need to add a small piece of JavaScript code to your website’s form submission success handler. This code will push an event to the data layer.

    JavaScript

    document.addEventListener('DOMContentLoaded', function() {
      const form = document.querySelector('#your-form-id'); // Replace with your form's ID
    
      if (form) {
        form.addEventListener('submit', function() {
          // Assuming a successful submission, push the event to the data layer
          window.dataLayer = window.dataLayer || [];
          window.dataLayer.push({
            'event': 'formSubmissionSuccess'
          });
        });
      }
    });
    

  • GTM Configuration: In your Google Tag Manager workspace:

    1. Navigate to Triggers in the left-hand menu.
    2. Click New.
    3. Give your trigger a descriptive name (e.g., “GA4 – Form Submission Success”).
    4. In the Trigger Configuration section, choose Custom Event.
    5. In the Event name field, enter the exact name of the event you pushed to the data layer (e.g., formSubmissionSuccess).
    6. Click Save.

• Leveraging the Built-in Form Submission Trigger: GTM offers a “Form Submission” trigger, which can be simpler to set up initially but might be less robust in certain scenarios.

  • GTM Configuration: In your Google Tag Manager workspace:
    1. Navigate to Triggers in the left-hand menu.
    2. Click New.
    3. Give your trigger a descriptive name (e.g., “GA4 – Form Submission”).
    4. In the Trigger Configuration section, choose Form Submission.
    5. You can refine this trigger by specifying conditions, such as:
       • Wait for Tags: Check this box to ensure tags fire before the form submission continues.
       • Check Validation: Check this box if you want the trigger to fire only after the browser’s built-in validation (if any) is successful.
       • Enable this trigger when the following conditions are met: You can target specific forms using CSS Selectors, Form IDs, or other variables. For example, to target a form with the ID “contact-form,” you would add a condition like “Form ID equals contact-form.”
    6. Click Save.

2. Create a GA4 Event Tag for Your Conversion in GTM

Now that you have a trigger, you need to create a GA4 event tag that fires when that trigger activates. This tag will send information about the form submission to your GA4 property.

1. Go to your Google Tag Manager workspace.

2. Navigate to Tags in the left-hand menu.

3. Click New.

4. Give your tag a descriptive name (e.g., “GA4 – Form Submission Conversion Event”).

5. In the Tag Configuration section, choose Google Analytics: GA4 Event.

6. Configuration Tag: Select your existing Google Tag configuration variable (the one that connects to your GA4 property). If you haven’t created one yet, you’ll need to do so by entering your GA4 Measurement ID.

7. Event Name: This is how the conversion will be labeled in your GA4 reports. Choose a clear and descriptive name, such as form_submit or contact_form_submission. Google recommends using predefined event names where applicable, but for custom events like form submissions, you can create your own.

8. Event Parameters (Optional but Recommended): You can send additional information about the form submission as event parameters. This can provide valuable context in your GA4 analysis. Examples include:

   • form_id: The ID of the submitted form.
   • page_location: The URL of the page where the form was submitted.
   • user_type: If the user is logged in or a guest.

   To set up event parameters:

   • Click Add Parameter.
   • Enter a Parameter Name (e.g., form_id).
   • Enter a Value. This can be a static value or, more dynamically, a GTM variable that captures the form ID. You might need to create a User-Defined Variable in GTM to extract this information from the DOM (Document Object Model).

9. In the Triggering section, select the trigger you created in Step 1 (e.g., “GA4 – Form Submission Success” or “GA4 – Form Submission”).

10. Click Save.

3. Mark Your GA4 Event as a Conversion

With the GA4 event tag set up in GTM, you now need to tell GA4 that this specific event should be counted as a conversion.

1. Go to your Google Analytics 4 property.
2. Navigate to Admin (the gear icon in the bottom left corner).
3. In the “Property” column, click on Conversions.
4. Click the + New conversion event button.
5. In the New event name field, enter the exact same Event Name you used in your GA4 Event tag in GTM (e.g., form_submit or contact_form_submission).
6. Click Save.

4. Preview, Test, and Publish Your GTM Container

Before your conversion tracking goes live, it’s crucial to test everything thoroughly using GTM’s Preview mode:

1. Click the Preview button in the top right corner of your GTM workspace. This will open your website in a debug mode connected to GTM.
2. Navigate to the page with your form.
3. Submit the form.
4. In the GTM Preview pane at the bottom of your screen:
   • Check the Tags Fired section. You should see your “GA4 – Form Submission Conversion Event” tag fire after the form submission.
   • Click on the fired tag and go to the Data Layer tab. Verify that the event name and any event parameters are being sent correctly.
   • In the GA4 DebugView (in your GA4 property under Admin > DebugView), you should see the form_submit (or your chosen event name) event appearing with any associated parameters. This confirms that the data is reaching GA4.
5. If the tag didn’t fire or the data is incorrect, review your trigger and tag configurations in GTM.
6. Once you’ve confirmed that everything is working correctly in the preview mode, click the Submit button in the top right corner of your GTM workspace to publish the changes to your live website.

Congratulations! You’ve now successfully set up form submission conversion tracking in GA4 using Google Tag Manager. You can now analyze which channels, campaigns, and user behaviors are leading to valuable form submissions on your website. This data will be invaluable for optimizing your marketing strategies and achieving your business goals.

Remember to regularly check your GA4 reports to monitor your conversions and gain insights into your website’s performance. Happy tracking!