Here are the steps to connect the plugin
Once you have created an Analytics Amplifier account, follow the steps to connect your HubSpot and Google Analytics account. You may need to get your systems administrator to help with this step if you do not have the required access. There are also a few minor website changes that need to be made. They are outlined below.
HubSpot form tweaks and Javascript installation
After you have connected HubSpot and set your Google Settings you will need to make some minor tweaks to your HubSpot forms and install a site wide script.
We have created a new HubSpot form property called "Google Client ID". In order for us to be able to push HubSpot events to the correct Google Analytics user we need to capture this ID any time a form is submitted.
Please follow the steps below. (if you are not a techy, we can do this for you for a one off fee of US$99)
Step 1: Form changes
Go to your HubSpot forms and edit all the forms to include the property: "Google Client ID". Make sure you set this field to be hidden so that your users do not see this field while browsing your website.
Repeat this until you have applied this new property to all the forms where you want to capture the Google Client ID.
Step 2: JavaScript Snippet Install (HubSpot Pages)
In order to get the Google Client ID and insert it into your HubSpot form before submitting it you need to add the follow code to the footer of your website.
Ensure:
- The script is placed after your Google Analytics or Google Tag Manger code
- The script is after your HubSpot form.
Copy and paste the full script below:
(if you are running multiple GA tracking scripts use this script here)
Replace UA-XXXXXXXX-X with your own Google Tracking ID. Or click here and we will generate the script with your tracking ID from your google settings.
<!-- START Google Client ID Capture analyticsamplifier.io -->
<script>
function getClientId(){try{var e,t,n=ga.getAll();for(e=0,t=n.length;e<t;e+=1)if("UA-XXXXXXXX-X"===n[e].get("trackingId"))return console.log("m"),n[e].get("clientId")}catch(e){}try{if(clientId=ga.getAll()[0].get("clientId"),clientId)return console.log("s"),clientId}catch(e){}try{if(clientId=getCookieValue(),clientId)return console.log("c"),clientId}catch(e){}return""}function getCookieValue(){var e=document.cookie.match("(^|;)\\s*_ga\\s*=\\s*([^;]+)"),t=e?e.pop():"",n="";if(t){var o=t.split(".");o[2]&o[3]&&(n=o[2]+"."+o[3])}return n}function setformfield(e){window.jQuery?jQuery.noConflict()('input[name="google_client_id"]').val(e).change():document.querySelector("input[name='google_client_id']").value=e}window.onload=function(){setformfield(getClientId());try{ga(function(e){var t=e.get("clientId");console.log("a"),setformfield(t)})}catch(e){}};
</script>
<!-- END Google Client ID Capture analyticsamplifier.io -->
The fastest way to achieve this on HubSpot hosted web pages is to add it to the global site footer.
Step 3: Embedded forms / other CMS's
If you have embedded forms on other websites (Wordpress, Drupal etc) you will also need to add the above script snippet to the footer of your website. Please forward these instructions to your web developer or check your theme for how to edit your footer modules.
Step 4: Test it
Go to one of your website pages and submit a form. **TIP: leave the form field unhidden during testing - you will see the Google Client ID populate without having to submit the form**
Now load your contact record in HubSpot and look for the "Google Client ID" field to see if it has been populated. If so success! Events will start to be pushed to your Google Analytics account when they occur.
Still having issues? Check out our common issues guide here or get in touch here.
