A/B Testing Hubspot Forms with Google Optimize

SOLVE
Highlighted
Regular Contributor

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/

 Screen Shot 2018-10-13 at 13.33.56.pngScreen Shot 2018-10-13 at 13.34.02.png

 

 

 

Thanks

1 Accepted solution

Accepted Solutions
Highlighted
Solution
Community Manager

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


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!

View solution in original post

5 Replies 5
Highlighted
Solution
Community Manager

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


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!

View solution in original post

Highlighted
Regular Contributor

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

Reply
0 Upvotes
Highlighted
New Member

Did you have any luck?

Reply
0 Upvotes
Highlighted
Occasional Contributor

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-****-****-****-************"

 

google optimize.png

Anyone tips on how to do this?

Reply
0 Upvotes
Highlighted
Visitor

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', }); });