A/B Testing Hubspot Forms with Google Optimize

[nunoautotrip]

Hi everybody,

Has anyone tried to A/B test Hubspot forms by using Google Optimize?

 If yes, what best practices would you recommend to follow?

I want to extensively A/B test my forms, but I don't want to do it in a clunky way... it seems that I'd have to replace the entire HTML of the form if I want to test different variants.

This is where I'm testing a few changes now - https://autotrip.com/buy-now/

 

Thanks

[KabbeS]

Interesting! 

Trying to do the same thing, but can't seem to find a simpler solution. Have you found another solution only using form id?

Thanks

[damianmakki]

Even though there's an accepted solution here, I found a workaround to use the HubSpot embed forms within Google Optimize.

1. First you'll need to load in the HubSpot form script using Optimize's "Run JavaScript" option (just right click anywhere on the page):

   // Create a script container then load in the URL.
   const hubSpotScript = document.createElement("script");
   hubSpotScript.src="https://js.hsforms.net/forms/v2.js";
   // Append it to the body to execute it.
   document.body.appendChild(hubSpotScript);

2. Next you'll need to create the form. I was only able to get this to fire by adding the window.addEventListener. You can grab your portalId and formId from the HubSpot form, itself – just hit "Share" or "Publish" and you can easily find it under the "Embed Code" tab.

   window.addEventListener('load', function () {
       hbspt.forms.create({
           portalId: "yourPortalID",
           formId: "yourFormID",
           // You can target where you'd like the form to be injected.
           // https://developers.hubspot.com/docs/methods/forms/advanced_form_options
           target: '#yourElement',
       });
   });

[Marijke]

Hi,

I'm trying to achieve the same thing and I think I just did by making a page with two forms, create two variants in Google Optimize, deleting one form on both variants and set the Weighting of visitors to target at 0% at the original page with two forms.

I guess it will work, but I feel there could be a more efficient way? I think it should be able to just adjust the code to the right HS form, but when I open google optimize HTML editor the HubSpot form 'ID' doesn't correspond with the actual HubSpot form ID which starts with: "a4200b83-****-****-****-************"

Anyone tips on how to do this?

[jennysowyrda · Accepted solution]

Hi @nunoautotrip,

While I haven't expermimented with this myself, I did find a conversation about Google Optimize and forms on Google's forum. It might be a good starting point for considering how to do this. 

If you do try this out, let us know how it goes for you! 

Thanks,
Jenny

[nunoautotrip]

Thanks, Jenny, I'll try to do as they suggest.

[jtron9k]

Did you have any luck?