Add Google Analytics data to Hubspot forms with GA Connector’s Hubspot integration.
Prerequisites
- Installed either GA Connector WordPress plugin or GA Connector script on your website
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script data-cfasync="false" type="text/javascript" src="https://tracker.gaconnector.com/gaconnector.js"></script> <script> function setGaconnectorHiddenFields() { var gaFields = gaconnector.getCookieValues(); for (var fieldName in gaFields) { var selectors = 'form input[name="' + fieldName + '"], form input#' + fieldName + ', form input#field_' + fieldName + ', form input[name="' + fieldName.toLowerCase() + '"], form input#' + fieldName.toLowerCase() + ', form input#field_' + fieldName.toLowerCase() + ', input[value="gaconnector_' + fieldName + '"],'; selectors += 'form textarea[name="'+fieldName+'"], form textarea#'+fieldName+', form textarea#field_'+fieldName + ', form textarea[name="'+fieldName.toLowerCase()+'"], form textarea#'+fieldName.toLowerCase()+', form textarea#field_'+fieldName.toLowerCase()+', form textarea.'+fieldName+', form textarea[name="param['+fieldName+']"]'+", form textarea[id^='field_"+fieldName+"']"; var inputs = document.querySelectorAll(selectors); if (inputs === null) { continue; } else if (typeof inputs.length === 'undefined') { inputs.value = gaFields[fieldName]; } else { for (var i = 0; i < inputs.length; i++) { inputs[i].value = gaFields[fieldName]; } } } } gaconnector.setCallback(setGaconnectorHiddenFields); setInterval(setGaconnectorHiddenFields, 1000); </script> |
Creating GA Connector custom fields/properties in Hubspot
If you haven’t created custom properties yet for GA Connector in Hubspot, follow the steps below on how to add them.
- While on your Hubspot Dashboard, go to Settings > Properties > Create Property
- Using the table below as a guide, add the GA Connector label as the label and click on the “code” icon beside the label field to add the equivalent input_id as Internal name (e.g. All Traffic Sources – all_traffic_sources). You can use Single-Line text as Field type for all GA Connector fields.
- Repeat for all GA Connector fields that you need to track.
| Label | Input ID | Label | Input ID |
|---|---|---|---|
| All Traffic Sources | all_traffic_sources | Last Click Campaign | lc_campaign |
| Browser | browser | Last Click Channel | lc_channel |
| City (from IP address) | city | Last Click Content | lc_content |
| Country (from IP address) | country | Last Click Landing Page | lc_landing |
| First Click Campaign | fc_campaign | Last Click Medium | lc_medium |
| First Click Channel | fc_channel | Last Click Referrer | lc_referrer |
| First Click Content | fc_content | Last Click Source | lc_source |
| First Click Landing Page | fc_landing | Last Click Term | lc_term |
| First Click Medium | fc_medium | Latitude | latitude |
| First Click Referrer | fc_referrer | Longitude | longitude |
| First Click Source | fc_source | Number of Website Visits | page_visits |
| First Click Term | fc_term | Operating System | OS |
| Google Analytics CID | GA_Client_ID | Pages Visited | pages_visited_list |
| Google Click Identifier | gclid | Time Spent on Website | time_passed |
| IP Address | ip_address | Time Zone | time_zone |
| Region | region | Device | device |
GA Connector adds UTM information, geolocation, referral information to your Hubspot leads.
Setting up your form
- Add the GA Connector properties you’ve created to your form and make the field hidden
- After adding all the GA Connector properties you need, hit Update
Embedding your form to your Website
Instead of using the default embed code that Hubspot has provided. You will need to use the code below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script> <script> hbspt.forms.create({ region: "xxx", portalId: "xxxx", formId: "xxxxx", onFormReady: function($form) { function checkGaconnector() { gaFields = gaconnector.getCookieValues(); return !!gaFields.lc_source; } var gaFields; var interval = setInterval(function() { if (checkGaconnector()) { for (var fieldName in gaFields) { var selectors = 'input[name="' + fieldName + '"], input#' + fieldName + ', input#field_' + fieldName + ', input[name="' + fieldName.toLowerCase() + '"], input#' + fieldName.toLowerCase() + ', input#field_' + fieldName.toLowerCase() + ', input[value="gaconnector_' + fieldName.toLowerCase() + '"], '; selectors += 'textarea[name="' + fieldName + '"], textarea#' + fieldName + ', textarea#field_' + fieldName + ', textarea[name="' + fieldName.toLowerCase() + '"], textarea#' + fieldName.toLowerCase() + ', textarea#field_' + fieldName.toLowerCase() + ', textarea.' + fieldName + ', textarea[name="param[' + fieldName + ']"]' + ", textarea[id^='field_" + fieldName + "']"; var inputs; if ($form.nodeName) { inputs = $form.querySelectorAll(selectors); } else { inputs = $form[0].querySelectorAll(selectors); } if (inputs === null) { continue; } else if (typeof inputs.length === 'undefined') { inputs.value = gaFields[fieldName]; } else { for (var i = 0; i < inputs.length; i++) { inputs[i].value = gaFields[fieldName]; } } } clearInterval(interval); } }, 1000); } }); </script> |
Note: Replace the region, portalId, and formId on lines 4, 5 & 6 with your own. You can find these details on the default embed code that Hubspot provided.