Tracking form submissions is crucial for understanding user engagement on your website.
This guide will show you how to track Freshsales form submissions in Google Analytics 4 (GA4) with Google Tag Manager (GTM).
Prerequisites
Before you begin the process of tracking Freshsales form submissions in Google Analytics 4 (GA4) using Google Tag Manager (GTM), ensure that you have the following:
1. Access to Google Tag Manager:
Make sure you have access to your website's Google Tag Manager account. If you don't have one, you should set it up before proceeding.
2. Freshsales Account:
You should have a Freshsales account and a form set up on your website using Freshsales for users to submit.
3. Google Analytics 4 Property:
Have a GA4 property created for your website in Google Analytics.
If you don’t have a GA4 for your website, follow the instructions on the Google Analytics platform to create a new property.
With these prerequisites in place, you're ready to track Freshsales form submissions in GA4 using Google Tag Manager.
Step 1: Freshsales Form listener Code
1. Access Google Tag Manager:
- Go to your Google Tag Manager account.
2. Navigate to Tags:
- Once in Google Tag Manager, locate and click on the "Tags" section.
3. Create a New Tag:
- Click on the "New" button to initiate the creation of a new tag.
4. Choose "Custom HTML" for Tag Configuration:
- In the tag configuration settings, opt for "Custom HTML."
5. Insert Code into HTML Field:
- Copy and paste the provided code into the HTML field within the tag configuration.
This code establishes the connection between Freshsales form submissions and Google Analytics 4.
6. Leave the Triggering Section for Now:
- Skip the Triggering section for the time being. We'll address this in the following steps.
7. Save the Tag:
- Click on the "Save Tag" option in the popup to save your configuration without the trigger.
8. Name the Tag:
- Give your tag a descriptive name. In this case, name it "Freshsales Form Listener."
Following these steps, you've set up the first tag in Google Tag Manager to capture Freshsales form submissions successfully.
Step 2: Create a Trigger for Freshsales
1. Open the Trigger section in Google Tag Manager.
2. Select the "Element visibility" trigger type. This trigger type is crucial for capturing events related to the visibility of specific elements on your webpage.
3. Choose "CSS Selector" as the element selector type.
Specify a CSS selector to identify the element for tracking. In this case, the CSS selector ".fs-webform-container" identifies the Freshsales form.
4. Enter ".fs-webform-container" in the “Element Selector” field.
This selector targets the container of the Freshsales form on your website.
5. Set the trigger to fire once per page. It ensures the trigger activates only once during a user's visit to a particular page, preventing unnecessary data duplication.
6. Configure the trigger to respond to all visibility events. It means the trigger will activate whenever the specified element becomes visible on the user's screen.
This approach ensures accurate tracking of form submissions, regardless of the user's interaction with the page.
Step 3: Connect the Trigger to the Freshsales Form Listener Tag
Go to the custom HTML tag we created in step 1.
Go to the trigger section, and select the trigger we created in step 2 - i.e., trigger for freshsales form.
Here's why it's important to connect the trigger (The element responsible for monitoring the form.) and the tag (The element that takes notes on what's happening in the form.)
- We're making the trigger and tag work together. The trigger knows when to tell the tag, "Hey, the form is doing something!"
- The trigger monitors when the Freshsales form appears on the screen.
This way, we don't just record anything; we only care about what happens with that specific form.
- By connecting them, we stop the tag from doing things randomly.
The trigger ensures the tag only works when the form is there. It keeps our data clean and accurate.
- When someone uses the Freshsales form, the trigger and tag combo go into action.
In simple terms, connecting the trigger to the tag helps us keep an eye on the Freshsales form and only record the important stuff, making our data more reliable in Google Analytics 4.
Step 4: Create a GA4 Trigger:
Navigate to the "Triggers" section in your Google Tag Manager account.
Click on "New" to start creating a new trigger.
Select "Custom Event" as the trigger type in the trigger configuration.
Specify the event name as "freshsales-form-success" to recognize successful HubSpot form submissions.
Ensure the trigger activates for all specified custom events.
Name the trigger as “freshsales-form-success”.
Save your trigger to preserve the custom event trigger configuration.
It sets up your Google Tag Manager to respond specifically to successful Freshsales form submissions with the designated trigger.
Step 5: Create a Google Tag and Get The Measurement ID
Note: If you already created the GA4 tag, then skip to the Event section.
Before we create a GA4 tag, we need two things.
- Measurement ID
- Google Tag created with the Measurement ID
Get The Measurement ID:
Log in to your Google Analytics Account:
Go to Google Analytics and log in with the Google account associated with your Google Analytics property.
Select the Appropriate Account and Property:
In the "Account" column, choose the Google Analytics account that corresponds to your website.
In the "Property" column, select the specific property you want to obtain the Measurement ID.
Access the Admin Section:
In the lower-left corner of the Google Analytics interface, click on the "Admin" tab. It will take you to the Administration page.
Navigate to the Data Collection Section:
Under the data collection and modification section, select Data Streams
Locate Your Website's Data Stream:
Find and select the data stream associated with your website.
Find the Measurement ID:
In the Data Stream settings, you'll find the Measurement ID. It typically appears as a series of numbers preceded by "G-"
Copy the Measurement ID:
Copy the Measurement ID to your clipboard. You will need the ID to configure the GA4 tag.
Create a Google Tag:
Initiate a New Tag:
Go to tags. Click the "New" button to begin creating a new tag.
Select Google Tag Configuration:
Select "Google Tag" as your tag type in the tag configuration options.
Paste Measurement ID:
Locate the "Tag ID" field and paste your Measurement ID here. This unique identifier connects your Google Analytics 4 property to this specific tag.
Configure Triggering:
Choose "All Pages" in the triggering section to activate the tag on every page of your website.
Save and Name the Tag:
Click "Save Tag" to preserve your configuration. Give your tag a meaningful name, such as "Freshsales Measurement ID" or "Google Analytics Tag."
Step 6: Create The GA4 Event Tag:
Navigate to "Tags" and click on the "New" button.
Select "Google Analytics: GA4 Event" from the options.
Paste your Measurement ID in the provided field and confirm its availability in the container.
Set the Event Name as "freshsales_form_submit." In the triggering section, choose the trigger created in Step 4 -"freshsales-form-success."
Save the tag as "Freshsales Form Submit."
Submit all changes by clicking the "Submit" button in the top right corner. Provide the necessary details for the submission.
Step 7: Test the form
After submitting all the changes and completing the form on your website, return to Google Analytics, navigate to the "Real-Time" section, and observe live conversions as they appear on the dashboard.
Step 8: Mark as conversion
In the Admin section, under "Data Display," choose "Events." Identify the relevant event (e.g., "form_submit") and mark it as a conversion for accurate tracking and reporting
