How to connect HubSpot with Google Analytics 4 via Client ID

HubSpot lets you collect information from people who fill out forms on your website. Using this data, you can create strategies to turn website visitors into potential customers. However, you can’t see visitors’ buying history and lead quality on the default setting in Google Analytics 4. 

On the other hand, by connecting these two powerful platforms, you can gain richer insight into marketing services. Why should you integrate HubSpot and GA4? Clearly, joining efforts can greatly amplify your marketing impact. All you need to do is connect HubSpot with GA4 via Client ID. 

How can we use this Client ID?

When someone visits your site, you can attach the GA4 Client ID. This ID lets you see what actions the visitor takes inside HubSpot. And guess what? You can even use this data to track offline conversions back in Google Ads. 

How to connect HubSpot with GA4 via Client ID

How to create a new property

Properties are fields that store information on HubSpot records. For example, you can specify companies’ locations using the City company property.

Follow the steps below to create a new Conversion Information Contact Property for Google Analytics Client ID:

1. Login to your HubSpot account and click the settings icon in the top navigation bar.
2. Click on the properties in the left sidebar.
3. Select an object. Make sure “Contact properties” is selected for object type.
4. Click the “Create property” button.
5. Click Select group and select Conversion Information as the group type.
6. Type ga_clientid in the Label input to set the property label. Please note this field, as it’ll be required for the next steps.
7. Set the description as you wish and click “Next”.
8. Select Single Line Text for Field Type and click “Next”.
9. Review property settings. If everything is correct, click “Create”.

You can repeat the steps above to create any other property you want to collect from Google Analytics.

How to add a created property to lead capture form

Follow the steps below to add a recently created ga_clientid Conversion Property to your lead capture form:

1. Navigate to Marketing > Lead Captures > Forms using the top navigation bar.
2. Mouse over to the form you want to collect Analytics Client ID, and click Edit.
3. Search for an existing property by typing ga_clientid to search input.
4. Click on the found property to enable Make this field hidden.
5. Type ga_clientid for Label input.
6. Click the button to update the form in the top navigation bar.
7. Review changes and click the Publish button to save.

You can repeat the steps above to add any other property you want to collect from Google Analytics.

Setup Google Tag Manager to send Client ID with Form

Now that HubSpot is ready to collect Conversion Properties, it’s time to set up Google Tag Manager (GTM) to adjust forms to send Analytics properties & GTM Variables to HubSpot.

Please remember to edit the necessary fields for different forms/pages. You can repeat steps multiple times for different forms/pages if needed.

Add Triggers for specific gage URLs containing the form:

Multiple pages can have different HubSpot’s forms, and the action you want to take may be for a specific form on only specific pages. In this case, you need to add an appropriate trigger.

1. Go to Google Tag Manager and navigate to Triggers using the left sidebar. 
2. Click the New button to add a new trigger.
3. Select Page View as the trigger type and check Some Page Views.
4. Set conditions as Page URL – contains – /contact (or any other condition you need).
5. Set a name for this Trigger. CONTACT-FORM, for example, and click Save.

After the Trigger is ready, you can set up a custom HTML Tag to add a Google Analytics variable to the HubSpot form on the web page specified in the Trigger.

Create a Custom HTML Tag to add GTM Variable to the HubSpot Form:

HubSpot’s forms don’t include the client ID field by default. Therefore, you must add the Client ID variable already in GTM to your HubSpot form with a block of HTML code.

1. Go to Google Tag Manager and navigate to Tags using the left sidebar.
2. Click the New button to add a new tag.
3. Select Custom HTML as Tag Type and copy/paste the HTML code below to the text area.

<script>

 window.addEventListener('message', function(event) {

 if(event.data.type === "hsFormCallback" && event.data.eventName === "onFormReady") {

 document.getElementById("hs-form-iframe-0").contentDocument.querySelector('input[name="ga_clientid"]').value = {{ClientId}}

 //Codes for other properties should appear here, if there is any.

 }

});

</script>

Replace Client ID with the variable name you’re using to obtain Client ID. Navigate to the Variables page on Tag Manager to see the correct variable. 

4. Select the Trigger you have created as the Firing Trigger of the tag (CONTACT FORM).
5. Set a name for this Trigger. CONTACT-FORM-INITIALIZE, for example, and click Save.

Test to see if Client ID is passed to HubSpot via Contact Form

After the setup is complete, you can test if everything is working right by following the steps: 

1. Make sure you publish changes on Google Tag Manager. 
2. Visit the webpage that contains the HubSpot Form (yourwebsite.com/contact).
3. Fill out the form with test inputs and click Submit. 
4. Login to HubSpot, navigate to Marketing > Lead Captures > Forms using the top navigation bar.
5. Mouse over to the form you want to collect Analytics Client ID and click Actions > View Submissions.
6. In the Submissions panel, find the Submission for the form you’ve just filled. Mouse over and click View Submission.
7. You should be able to see ga_clientid for Contact Record.
8. Now you have a client ID for contact and can see any later actions made on the form lead submitters. 

Add more Conversion properties

By following the steps in the document, you can add other data you need from GA4 or GTM as Conversion Property. In summary, you should:

1. Create a new property on HubSpot, and remember the Label field to use later.
2. Edit the form to add the property you have just created. Make sure the Label field is the same as with the property label.
3. Edit the Custom HTML Tag you have created to initialize the HubSpot form. Add a new line below for each property you want to set.

Find this line: //Codes for other properties should appear here if there are any.

Add this line below for each property:

document.getElementById("hs form iframe-0").contentDocument.querySelector('input[name="property_label"]').value = {{variable_name}}

Remember to edit property_label and variable_name

And that’s it! By connecting HubSpot with GA4, you can track your website visitors better and understand how they interact with your site. This may help you optimize your marketing efforts with ease. 

Struggling integrating HubSpot into GA4?

We can help you with integration or other marketing-related business needs. Just write us to talk about your custom solution needs.