APIs & Integrations

zohaib
Member

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

SOLVE

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

0 Upvotes
1 Accepted solution
IsaacTakushi
Solution
HubSpot Employee
HubSpot Employee

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

SOLVE

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.

Isaac Takushi

Associate Certification Manager

View solution in original post

0 Upvotes
6 Replies 6
ralphioooo
Contributor | Diamond Partner
Contributor | Diamond Partner

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

SOLVE

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...

0 Upvotes
ralphioooo
Contributor | Diamond Partner
Contributor | Diamond Partner

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

SOLVE


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...

0 Upvotes
IsaacTakushi
Solution
HubSpot Employee
HubSpot Employee

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

SOLVE

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.

Isaac Takushi

Associate Certification Manager
0 Upvotes
PierreDrouzine
Member

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

SOLVE

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. 

0 Upvotes
IsaacTakushi
HubSpot Employee
HubSpot Employee

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

SOLVE

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?

Isaac Takushi

Associate Certification Manager
0 Upvotes
IsaacTakushi
HubSpot Employee
HubSpot Employee

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

SOLVE

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 BasicProfessional, 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.

Isaac Takushi

Associate Certification Manager
0 Upvotes