Track form submissions by button clicks

How to Track a Button Click in Google Analytics 4 (GA4) Using Google Tag Manager (Updated 231012)

Here is a step-by-step guide on how to set up goal tracking in Google Analytics 4 (GA4) using button clicks on a Mautic form.

Google Analytics 4 has a new way of tracking user interactions called events. For tracking button clicks, we will have to define a new event. We will use Google Tag Manager to do that.

First, you need to have Google Tag Manager (GTM) and Google Analytics 4 (GA4) installed on your site. Here is a guide on how to do that:

Set up Google Tag Manager:
- Create a Google Tag Manager account if you don't have one yet: https://tagmanager.google.com/
- Install the Google Tag Manager code on your website. You should install two pieces of code. One goes in the <head> of your site, and the other one in the <body> tag.
Set up Google Analytics 4:
- Create a Google Analytics account if you don't have one yet: https://analytics.google.com/
- After you create your account, click on 'Admin' at the bottom left, then create a new 'property' for your website.
- After creating the property, you will be prompted to choose between a 'Universal Analytics property' or a 'GA4 property.' Choose GA4.
- You will receive a GA4 Measurement ID (it starts with 'G-'). Keep this handy. (Screenshot)

Now, we will configure the button click tracking:

Identify your Mautic form button:
- Each button on a website has its unique properties. It could be an ID, a CSS class, or other HTML attributes. You need to inspect your Mautic form's submit button using the browser's developer tools (right-click on the button and select "Inspect") and identify a unique property. Let's say, for example, your button has an ID "form-submit."

How to get id on the button
inspect button

Check id on the button

Create a trigger in GTM:
- In GTM, go to 'Triggers' -> 'New.'
- Give your trigger a name (e.g., "Demo Form Submit").
- In 'Trigger Configuration', choose 'All Elements' under 'Clicks.'
- Choose 'Some Clicks' and define the condition. For example, if you're using the ID of the button, you would set it as 'Click ID equals form-submit.'
- Save the trigger.

Create a tag in GTM:
- Go to 'Tags' -> 'New.'
- Give your tag a name (e.g., "GA4 Event - Mautic Form Submit").
- Choose 'GA4 Event' as your tag type.
- Enter your GA4 Measurement ID.(You can find it in ga4 Admin >> Data streams >> options Screenshot)
- In the 'Event Name', enter a name for the event (e.g., "mautic_form_submit").
- In 'Triggering', select the trigger you just created (e.g., "Mautic Form Submit").
- Save the tag.

Test your setup:
- In GTM, click on 'Preview' to test your configuration.
- Go to your website and try submitting the Mautic form.
- In the GTM debug window, check if your trigger fires and if the tag is executed.

Publish your changes:
- When you're satisfied with your setup, click on 'Submit' in GTM to publish your changes.

Check GA4:
- In GA4, go to 'Engagement' -> 'Events.'
- Check if your custom event (e.g., "mautic_form_submit") appears there.

Once the event become visible in GA4 . You can turn on the option to track them as conversions.(Screenshot)

Remember to replace the example ID, names, and other values I've used in these instructions with your actual button properties and desired names.

Below you can find the older instructions for how to set it up Universal Analytics, which is no longer in use

(OLD INSTRUCTIONS) How to Track a Button Click in Google Analytics Using Google Tag Manager

1. Get Organized

Start by opening three resources: Google Tag Manager, Google Analytics, and your website or FunnelBud Go account. You need to have Google Tag Manager already installed on your website and Google Analytics up and running.

2. Enable All Variables

A best practice in Google Tag Manager is to enable all variables. This will ensure that the variable you need in step 3 is ready and waiting for you.

In the left navigation, go to Variables. Click on all of the boxes to enable all.

3. Create a Trigger

Navigate to your Google Tag Manager container and click Trigger in the left navigation. Think of Triggers as the desired action. In this case, our desired action is a click on a button.

Next, go to your website and navigate to the form you’d like to track. You can also choose to preview the form you'd like to track in FunnelBud Go. Hover over the submit button, right-click, and inspect the element.

Find the form ID in the code and copy it.

Now, return to the Trigger in Google Tag Manager. Click New. Name the trigger “Check for Click on Button”. Be specific so if this is your contact form, label it “Check for Click on [Form Name]”.

Click in the box to configure the trigger. Select “All Elements” from the Trigger Type. Under “This trigger fires on”, select “Some Clicks”. Select "Click ID" from the drop-down menu

Set the condition to “Contains”. Copy and paste the Form ID code into the field.

Click Save.

4. Create a Tag

Now that we have our Trigger, we can create a Tag. Think of the Tag as the action we want to happen when the Trigger is fired.

In this case, we want to create a Google Analytics event. GA events are actions on our website that we can label.

In the left navigation, go to Tags. Click New. Label the Tag “GA — Form Submission — [Form Name]”. In this example, it’ll be “GA — Form Submission — Contact”.

Click on Tag Configuration. Select “Google Analytics: Universal Analytics”.

Change the dropdown from Pageview to Event.

Choose the Event Tracking Parameters are your choice.

Under “Google Analytics Settings” choose your pre-built variable for your Google Analytics code. Leave everything else to the default settings.

Now, we need to connect the Tag and the Trigger. Do so right below this field by click on Triggering. Select the appropriate Trigger and Save.

5. Publish

We’re ready to publish our work. In the upper right corner, select Publish. Add a descriptive name so you can keep track of your revisions. Something along the lines of “Adding Event Tracking to Contact Form” would be good.

6. Test

Let’s make sure it’s working. You can do this by using the Preview mode of Google Tag Manager.

We can also complete the action on the live website and then check your Real-Time data in Google Analytics.

7. Turn an Event into a Goal

Google Analytics is now recording clicks on a button as an Event. We now need to tell Google Analytics that that particular event is one of our key performance indicators or goals. In Google Analytics, navigate to the Admin screen. Under Views, select Goals. Click + New Goal.

Label the goal. In this example, it might be “Contact Form Completion” and then select Event.

Here’s where the labeling we chose in the Google Tag Manager Trigger comes in. We need to match it here so Google knows what to listen for.

Click Save.

Source

Page updated

Report abuse