Integrating Google Analytics 4 with Hubspot - Using Hubspot Form Hidden Field

To join a user’s data from Google Analytics to any other platform, the single important dimension you need is Client ID. There are hundreds of articles that explain but we’ll give a small refresher.

Using Client ID to join GA with Hubspot

We’ll see how you can successfully capture a client ID and store it in your CRM systems. We’ll take Hubspot as an example but fundamentally this is method can be used for any other systems with slight adjustments.

The idea is to send the user’s client ID when they submit a form on your website, thus passing the value into your CRM system.

What’s the benefit of storing GA4 Client ID in Hubspot or any other system?

The benefit of storing client IDs in your system is two-fold:

1. It helps you join Google Analytics 4 dataset with your CRM
2. Not only that, it’ll also enable you to pass back events (like tracking email opens, or other offline events) from your CRM into your Google Analytics 4 account, thus, essentially creating a two-way street. Needless to say the event you pass back into GA4 gets attached to the same user data in GA4.

The process is simpler than it sounds.

Step 1: Add a hidden field to your Hubspot Form

This is a no-brainer step but if you’d like to store the client ID you need a Hubspot property to do that. In this case, we’ll use a hidden field in our forms and label it as “ga_client_id”

Step 2: Retrieve and update hidden field with the Client ID

How you retrieve client ID depends largely on the method you used to deploy your GA4 tracking code. It could be that you are either using gtag tracking code directly in your pages’ headers OR you are using Google Tag Manager. We’ll discuss both methods:

Scenario 1: Hubspot Form Embed Code & Gtag Tacking Code

• You have access to Hubspot form embed code
• You use Gtag tracking code on the website

First retrieve client ID with GTAG tracking code:

Retrieving client ID with Gtag tracking code is extremely simple since GA4 get command allows you to get the values easily

You’ll have to of course replace G-XXXXXXXXXXXX with your own GA4 Measurement ID.

Update Hubspot form hidden field with retrieved Client ID

Next, we’ll use this function in our Hubspot embed code. Modify your hubspot code to the following:

You might want to test it a few times before you take this live.

If your tests goes through, apply this change to all your forms.

Scenario 2: Hubspot Form Embed Code & Google Tag Manager

• You have access to Hubspot form embed code
• You use Google Tag Manager on your website

Retrieve Client ID from GA cookie and updating Hubspot Form Embed code (no changes needed in Google Tag Manager)

This method can essentially work with Gtag tracking code too. However unlike how we described previously, where we “get” the client ID from the ga tracker, here we retrieve the cookie value from the “ga cookie”.

As you’ll see, in this function the fall back value is ‘not set’. This will also be a way for you to figure out the success of this implementation. A percentage of ‘not set’ values from the total contacts will give you the success rate of this method. Moreover, it also provides you an insight on how many users consent to GA4 tracking.

Scenario 3: Using only Google Tag Manager

• You do not have access to Hubspot Code
• You use Google Tag Manager on your website
• You have access to Google Tag Manager

We do the same thing as above here, just using GTM.

Retrieving GA Client ID from GTM 1st Party Cookie Variable

1. Create a new 1st party Cookie Variable. You can call it ‘ga Cookie’.

Go to GTM preview mode and test if you see the Client ID value in your variables list on a simple page view.

Update Hubspot Form Hidden Field via GTM

Next you’ll take this client ID and update the value of your GA Client ID hidden field in the Hubspot form. 

The biggest problem when setting a hidden field in Hubspot form through GTM is the timing. Sometimes the GTM tag will load first and will not update the hidden field. Other times, it may do just as you’d like. To counter this, instead of adding a simple JS that updates the hidden field (like we did in our Hubspot embed code), the approach here would be to “observe” if the form has first loaded and only then update the hidden field.

Create a custom HTML tag and set the firing trigger to be the last of in the trigger sequences of GTM like “Window Loaded”. As for other conditions, you could either simply fire it on all pages or add specific condiutions so the tag fires only on pages where a form is available

Add this Javascript to it

<script>
// Target the body or specific container where the form will be loaded
var targetNode = document.body;

// Create an observer instance
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        var inputField = document.querySelector('input[name="ga_client_id"]');
        if (inputField) {
            inputField.value = {{client ID}};
            console.log("Client ID set:", {{client ID}});
            observer.disconnect(); // Stop observing once we've set the value
        }
    });
});

// Configuration of the observer:
var config = { childList: true, subtree: true };

// Start observing
observer.observe(targetNode, config);
</script>