Setting up Hubspot Form Tracking In GA4 using Google Tag Manager

Tracking Hubspot forms on Google Tag Manager doesn’t have to be hard. 

In this step-by-step guide, we will explain how to set up Hubspot forms on your website to set up GTM and track the form on Google Analytics. 

Before we get started, make sure you have set up the following accounts - 

1. Hubspot Account
2. Google Tag Manager Account
3. Google Analytics Account

Things to keep in mind for this tutorial. 

Best Naming Practices:

   - When naming variables, tags, or triggers, it's advisable to choose names that are meaningful and descriptive.

   - Opt for names that clearly indicate the purpose or functionality to make it easier to understand.

   - Keep it relevant to the specific role or function to maintain clarity.

Submission Process:

   - Always remember to preview your changes before finalizing.

   - Once satisfied with the setup of a new tag, variable, or trigger, go ahead and submit.

   - This ensures that your configurations are applied and functional.

By adhering to these simple practices, you'll create a more organized and understandable structure in your Google Tag Manager, making it easier for yourself and others to manage and maintain over time.

Let’s get started

How to Create and Publish a Contact Form in HubSpot

If you already have a HubSpot account with forms embedded in your website, Skip to the next step

Start by logging into your HubSpot account.

Once you're in, go to the "Marketing" section and select "Forms."

On the next page, click on "Create a free form.

Select the type of form you want. For this guide, we're going with the "embed form", because we want to embed a form on our website. Click next.  

You can choose a blank template to build from scratch, add your own fields, or select from pre-made templates. In this case, we're using the pre-made "contact form" template. 

‍

After selecting the Contact Us template, click "Start."

By default, the premade form has property hints and it clutters the form and it is not necessary to have them always. 

To make the form clean, click on "Actions" in the top right corner and turn off "property hints." 

The property links will disappear and the form will look like this

You are not limited to the fields you get from the premade template. 

You can choose various fields from the left side panel such as phone number, city, a captcha, social media fields, payment, and many more. 

While most of the fields are free, some of them are paid features like payment options. 

Also don’t forget to check out the options, style & preview, and Automation sections right next to the forms and customize as per your needs  

Expand each section and add the features you want, then hit "Update."

‍

Once you hit update, review any warnings and Click "Publish."

After publishing, your form will be available in your Hubspot dashboard and a popup will appear. 

In the popup, click on the embed code and click "Copy" and save this code in a secure location.

Embed the form into the website:

By following the above steps, you created a form on Hubspot. 

But you need to embed the form on your website. For that, you need to paste the above code into your website. 

In the above code, there are two script tags, take the first script and paste it inside the head tag of your website’s HTML.

Paste the second script tag code between the body tag. Use the “Code” tag to embed the script in the body tag. 

Also, make sure you paste the below code where you want the form to be on the website. 

But if you are using cms such as WordPress or Wix, the process to paste the above code may vary. 

So, if you're unsure, contact the person who set up your website or your CMS (Content Management System) expert.

Once you've embedded the code, you'll see the form live on your website.

Make sure to style the form as per your requirements.

Setup Google Tag Manager The Right Way

If you have the GTM account set up, Skip to the 3rd Step

1. Getting Started:

   - Login to Google Tag Manager.

   - Click on "Create Account" in the top right corner.

2. Account Setup:

   - On the new page, enter your company name in the "Account Name" field.

   - Choose your country from the dropdown list.

   - Give your setup a recognizable name in the "Container Name" field.

   - Choose "Web" and click "Create."

3. Accept Terms:

   - After clicking Create, you'll be asked to accept the terms. Tick the checkbox and click the "Yes" button in the top right corner.

4. Code Snippets:

   - On the next page, you'll get code snippets for your website.

   - Copy the first code snippet and paste it into the head tag of your website's HTML source code.

   - Copy the second code snippet and paste it right at the beginning of the body tag.

The HTML code looks something similar after embedding Hubspot Google Tag Manager codes above 

5. Preview:

   - Click "OK" and then "Preview."

- Enter your website's URL and click "Connect."

6. Tag Assistant Connection:

   - If everything goes smoothly, you'll see the connected message. 

   - A new window will appear, saying "Tag Assistant is connected successfully."

7. Final Steps:

   - Go back to Google Tag Manager.

   - Once you are okay with the preview, hit "Submit." and provide the necessary information such as version name and description. 

By following these steps, you've successfully set up the Google Tag Manager(GTM)

Create a New Tag - Custom HTML Tag 

Once you are done with the above setup, you can create Tags, variables, and triggers. 

For now, we are creating a custom HTML tag. The purpose of this tag is to connect the HubSpot forms with Google Tag Manager.

The custom HTML tag allows you to inject specific code snippets or scripts into your website pages, and in this case, it can be used to integrate your HubSpot forms with GTM.

So, let’s see how to create a custom HTML tag in Google Tag Manager. 

1. Creating a New Tag:

   - In Google Tag Manager, head to the "Tags" section and click on "New."

2. Tag Configuration:

   - Choose "Custom HTML" as the tag type.

   - Paste the provided code in the custom HTML field.

<script type="text/javascript">
window.addEventListener("message", function(event) {
  if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
    window.dataLayer.push({
      'event': 'Hubspot-form-success',
      'hs-form-guid': event.data.id
    });
  }
});
</script>

‍

- This code listens for messages from HubSpot when a form is successfully submitted.

- If the correct message is received, it pushes data to the GTM data layer.

- Specifically, it sends an event named 'hubspot-form-success' along with the unique form identifier ('hs-form-guid').

‍

3. Setting Triggers:

   - Click on "Triggering."

   - In the trigger section, select "All Pages."

4. Naming and Saving:

   - Give your tag a name, like "Forms — HS Success Listener."

   - Click "Save."

Remember, this setup ensures that every page on your website triggers this tag.

Create a new trigger  

1. Accessing Triggers:

   - Go to Google Tag Manager, and navigate to the "Triggers" section.

   - Click on "New" to create a new trigger.

2. Trigger Configuration:

   - Choose "Custom Event" in the trigger configuration.

   - In the field provided, type 'hubspot-form-success' as the custom event name.

3. Trigger Fires On:

   - Ensure that under the "This trigger fires on" section, you have selected "All Custom Events."

4. Naming and Saving:

   - Give your trigger a name, such as "HubSpot Form Submit."

   - Click "Save."

This trigger is set up to activate whenever the custom event 'hubspot-form-success' occurs.

Add a data layer to read Hubpost’s form guid

1. Navigate to Variables:

   - Go to the "Variables" section in Google Tag Manager.

2. Select User-Defined Variable:

   - Look for the "User-Defined Variables" section.

3. Choose Data Layer Variable:

   - In the variable configuration, select "Data Layer Variable."

4. Name the Variable:

   - Give the variable a name - "forms-hs-form-guid."

By following these steps, you're essentially creating a user-defined variable that pulls information from the data layer and specifically names it "forms-hs-form-guid." 

This variable can then be used in tags or triggers within Google Tag Manager for tracking or other purposes.

Setting up a Google Analytics Account

Skip to the 4th step if you already created a Google Analytics Account. 

Before making a GA4 tag, let's start by setting up your Google Analytics account. We need the Measurement ID from Google Analytics to put into the GA4 tag creation process.

Here’s how to do it.

1. Google Analytics Account Setup:

 - Log in to your Google Analytics account and go to the "Admin" section.

 - Click on "Create" and choose "Account."

 - Enter a name and click "Next."

2. Property Configuration:

   - Provide a property name, select your time zone and currency, and click "Next."

- Describe your business, select industry and size, and click "Next."

3. Objective Selection:

   - Choose your business objectives and click "Create."

   - Accept the terms and conditions by clicking "I Accept."

This will create your account and property. 

4. Create Data Stream:

   - In the next screen, select "Web".

• Enter your website URL without "https."

   - Name your website and click "Create Stream."

This will create a data stream for your website which can be used for capturing data. 

5. Tag Manager Installation:

   - Choose to install the tag manager manually.

   - Copy the provided code and paste it at the beginning of the `<head>` tag in your website's HTML.

   - Copy the measurement ID from the stream details.

Create a Google Tag 

In Google Tag Manager, go to "Tags," click "New," and select "Google Tag" from the list.

   - Paste the measurement ID in the tag configuration.

   - In the triggering section, select "All Pages."

   - Click save

Create a GA4 tag

   - In Google Tag Manager, go to "Tags" and click "New."

   - Choose "Google Analytics > GA4 tag."

   - Enter the measurement ID and give a name to the Event name field.

   - You will see the Google Tag found in the container message.

   - In the triggering section, choose "HS Form Submission."

   - Name the tag as "hs_form_submission" and save.

Test The Hubspot Form in Google Analytics 4 

Go to your form on the website and fill that. 

Go to analytics and click reporting > Realtime and you can see the results below. 

In conclusion, setting up HubSpot form tracking in Google Analytics 4 using Google Tag Manager is a manageable process when broken down into clear steps. 

By ensuring you have the necessary accounts, such as HubSpot, Google Tag Manager, and Google Analytics, and following best practices like thoughtful naming conventions and careful submission processes, you establish a solid foundation for effective tracking.