Fixing Google Ads Attribution for an Embedded HubSpot Form in Vue.js

Below is an explanation of how HubSpot’s form attribution works technically and what you may need to do in your case.

---

How HubSpot Attribution Works

1. Tracking via Cookies and URL Parameters
   HubSpot typically tracks traffic sources by reading URL parameters (e.g., utm_source, utm_medium, utm_campaign, and for paid campaigns, parameters like gclid) and by setting its own tracking cookies (such as the hubspotutk cookie). When someone visits your site from Google Ads the corresponding parameters (or gclid) are stored via these mechanisms, and when a form is submitted, HubSpot associates the submission with the previously recorded visit data.

2. Timing of Tracking Code
   The tracking data needs to be captured at session start. Ideally, the HubSpot tracking snippet (or the HubSpot forms embed) captures the query parameters on landing. However, if the embed form is loaded asynchronously or after consent is provided, it might miss the parameters if they haven’t been stored correctly.

3. Cookie Consent Impact
   With cookie consent management in place, if certain tracking cookies are not allowed (or if consent is not fully granted before the visitor lands), then those parameters might not be stored. In your case, if "ad_personalization" is not implicitly enabled, some data might not be written until explicit consent is provided, which can lead to attribution defaults (e.g., to "direct traffic").

---

Do You Need to Send Data Manually?

• Automatic Behavior:
  In many scenarios, when the HubSpot tracking code is properly installed, the UTM and related parameters are automatically captured and associated with the form submission. In this case, no extra manual work is necessary.

• When to Consider Manual Data Passing:
  If your consent management delays the setting of tracking cookies until after form load or if your visitors block cookies before landing, then the UTM parameters (and Google Ads attribution info) might not be captured automatically. In such cases, you may need to manually pass the original parameters to HubSpot via hidden fields on your form. This will ensure the captured data includes the source information even if cookies are not available at form submission time.

  Many HubSpot documentation pages detail how to add hidden fields to your forms so that you can capture these values from the URL:

  • HubSpot - How to Add Hidden Fields to Forms
  • HubSpot Developer Docs for Forms API

  By reading the URL parameters on page load (using your JavaScript) and then including them as hidden fields in the form configuration, you can provide HubSpot with the necessary data for accurate attribution.

---

Recommendations

1. Review Your Consent Flow:
   Ensure that your consent management does not delay the assignment of tracking cookies until after the user has already navigated or interacted with the embed form. If it does, consider triggering the tracking code as soon as possible (or after a minimal delay).

2. Manually Pass UTM Parameters (if necessary):
   If you suspect that HubSpot’s automatic tracking isn’t capturing the URL parameters because of delayed or restricted cookie setting, implement a routine to retrieve the query parameters and set them as hidden fields when creating the form:

   VUECopied
   <script setup>
   import { HUBSPOT_PORTAL_ID } from "@/utils/constants";
   import { onMounted } from 'vue';
   
   const props = defineProps({
     formId: {
       type: String,
       required: true,
     },
   });
   
   // Utility to read query parameters
   const getQueryParams = () => {
     const params = {};
     const searchParams = new URLSearchParams(window.location.search);
     for (const [key, value] of searchParams.entries()) {
       params[key] = value;
     }
     return params;
   };
   
   onMounted(() => {
     const queryParams = getQueryParams();
     const script = document.createElement("script");
     script.src = "https://js.hsforms.net/forms/v2.js";
     document.body.appendChild(script);
     script.addEventListener("load", () => {
       if (window.hbspt) {
         window.hbspt.forms.create({
           portalId: HUBSPOT_PORTAL_ID,
           formId: props.formId,
           target: ".hubspot-form",
           // Pass pre-populated values from URL query parameters
           css: '',
           onFormReady: function($form) {
             // Example: Set UTM values if available
             if (queryParams.utm_source) {
               $form.querySelector('input[name="utm_source"]').value = queryParams.utm_source;
             }
             if (queryParams.utm_medium) {
               $form.querySelector('input[name="utm_medium"]').value = queryParams.utm_medium;
             }
             if (queryParams.utm_campaign) {
               $form.querySelector('input[name="utm_campaign"]').value = queryParams.utm_campaign;
             }
             // Add additional fields as needed
           }
         });
       }
     });
   });
   </script>

3. Test Your Flows:
   Make sure to test with different consent scenarios and simulate a visitor arriving with Google Ads parameters. Check whether HubSpot receives the correct information once the form is submitted.

---

By understanding the technical flow of HubSpot’s tracking and ensuring either that cookies are properly set or that the relevant data is passed manually, you can resolve the attribution issue.

For further details, refer to the official HubSpot documentation pages noted above.