Send event from hubspot to google analytics also set form field when google anlaytics cookie is set

[zohaib]

Hi @IsaacTakushi  dear i am facing another problem in hubspot.How to send Events from hubspot to Google Analytics.. I want to set Form field if google analytics cookie is set.I embeded js code on form and add that form on landing page but it do not set form field(google_client_id) when i fill the form on landing page..can you solve this problem.please review my code.

In all Hubspot forms add "GA Client id" as an optional hidden field
Modify the script tag on all Hubspot forms to set ga_client_id if the GA cookie is set

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script> 
<script>
 function setGaClientId() {
 if ($('[name=ga_client_id]')[0]) { 
     $('[name=ga_client_id]').val(_((Cookies.get('_ga') || '').split('.')).takeRight(2).join('.')); 
     } 
 } 
 hbspt.forms.create({  
 css: '', 
 portalId: '', 
 formId: '', 
 onFormSubmit: setGaClientId 
 }); 
</script>

..Thank you

[ralphioooo]

We have just created a HubSpot APP called Analytics Amplifier that helps you do this + push offline events to Google Analytics when they happen.

Check it out here:
https://ecosystem.hubspot.com/marketplace/apps/marketing/analytics-data/google-analytics-amplifier-2...

[ralphioooo]

We have just created a HubSpot APP called Analytics Amplifier that helps you do this + push offline events to Google Analytics when they happen.

Check it out here:
https://ecosystem.hubspot.com/marketplace/apps/marketing/analytics-data/google-analytics-amplifier-2...

[IsaacTakushi · Accepted solution]

Hi, @zohaib.

Apologies for the delayed response.

With a Marketing Basic (legacy), Professional, or Enterprise subscription, you can use these options to manipulate form field values with jQuery.

For example, I used:

<script>
  var ga_client_id = "myValue";
  hbspt.forms.create({
        portalId: "",
	formId: "",
        onFormSubmit: function($form, ctx){
              $('input[name="ga_client_id"]').val(ga_client_id).change();   
   	}
  });
</script>

Form field manipulation is not possible with a Marketing Starter or Free subscription, however, as these forms render in an iframe.

Instead, you can auto-populate form fields with query strings.

[PierreDrouzine]

Hi Isaac, 

I am trying to track conversions on google analytics based on hubspot form submissions on our website . I used the script you suggested:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
var ga_client_id = "myValue";
hbspt.forms.create({
portalId: ",
formId: ",
onFormSubmit: function($form, ctx){
$('input[name="ga_client_id"]').val(ga-client_id).change();
}
});
</script>

However, it doesn't seem to work.  I have tried to use onFormReady instead of onFormSubmit, but doesn't work either.  Any suggestions? 

Also, is hyphen highlighted in red ->   $('input[name="ga_client_id"]').val(ga-client_id).change(); supposed to be an underscore? 

Thanks. 

[IsaacTakushi]

Hi, @PierreDrouzine.

Yes, I mistyped the variable name as ga-client_id. It should be ga_client_id. I've corrected my previous post. Thanks for pointing that out.

Could you share an example page where you've implemented this script? Can you also confirm you're loading jQuery on the page?

[IsaacTakushi]

Hi, @zohaib.

To clarify, this approach to populating a Google Analytics client ID — which you discuss with @WendyGoh in this thread — will work for a Marketing Basic, Professional, or Enterprise form, but not for a Marketing Free or Starter form.

Marketing Free and Starter forms are rendered in an iframe through js.hsforms.net/forms/shell.js instead of js.hsforms.net/forms/v2.js, so they cannot be manipulated with jQuery or styled with on-page CSS.