Form field level analytics setup

BobMalarky
Member

Hello!
Has anyone successfully setup form field level tracking with an embedded hubspot form? For example tracking forms with: Hotjar, Mouseflow, VWO form report, clicktale, etc. Maybe even GA events.

2 Replies 2
derekcavaliero
Top Contributor | Diamond Partner

This is a hard problem to solve.

The issue is that HubSpot renders the form into the page with JavaScript after the Hotjar (or any others) script has already loaded. In order to use the form field analytics inside Hotjar, the form needs to be on the page when the Hotjar script is loaded - otherwise it can’t find it.

The only way I think you could get around this would be to delay Hotjar from loading on the site until the form finishes rendering. However, this has more negative effects than positive - all of your recordings/heatmap data will be thrown off because of the delay - or the script may not function properly at all.

Basically you really have to wait for Hotjar and these other tools to support tracking forms that are rendered into the page via javascript - hacking something together like this may cause more harm than good.

0 Upvotes
insiteful
Participant

> Basically you really have to wait for Hotjar and these other tools to support tracking forms that are rendered into the page via javascript …

Can't think of a better way than @derekcavaliero's answer to summarize this: the core challenge with tracking HubSpot forms is the way they are loaded — dynamically on the page by the JavaScript code.


That said, the wait is over!

To solve this, our team at Insiteful recently developed & released a custom tracking code that allows you to easily to track form fields & analytics from your existing HubSpot forms without changing much:

 

Simply replace your current HubSpot form embed code with the modified tracking code copied below.*

 

* Important: be sure to replace the placeholders for unique IDs ( ie. {{ YOUR HUBSPOT FORM ID }} ) in the code below with the appropriate values from HubSpot & Insiteful, respectively.  The unique ID for HubSpot forms can be retrieved from the ‘formId’ attribute in the embed code (or even the editor URL) and the portal ID is just above it  (read more here). Meanwhile, the Insiteful activation key is available when you login and navigate to the Install page.

See more detailed steps with screenshots here: How-to track fields in HubSpot Forms: capture partial entries – Insiteful™

 

Hope this helps! @BobMalarky, please don't hesitate to reach out if you have any questions 🙂

 

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
   portalId: "{{ YOUR HUBSPOT PORTAL ID }}",
   formId: "{{ YOUR HUBSPOT FORM ID }}",
   onFormReady: function($form){
      window.f = $form;
      $form.append('<script id ="insiteful_1" type="text/javascript">const getScript=(e,t)=>{var a=document.createElement("script"),n=document.getElementsByTagName("script")[0];a.async=1,a.onload=a.onreadystatechange=((e,n)=>{(n||!a.readyState||/loaded|complete/.test(a.readyState))&&(a.onload=a.onreadystatechange=null,a=void 0,n||t&&t())}),a.src=e,n.parentNode.insertBefore(a,n)}; getScript( "https://a.insiteful.co/dist/compile.min.js", function() { \
      insiteful_activate("{{ YOUR INSITEFUL ACTIVATION KEY }}"); }); \
      <' + '/' + 'script> ');
      $form[0].ownerDocument.defaultView.eval($form.find("script#insiteful_1").text()); // insiteful
      var win_hs = document.querySelector('.hbspt-form iframe').contentWindow;
      window.addEventListener('beforeunload', (event) => { win_hs.saveForm(); });
      window.addEventListener('unload', (event) => { win_hs.saveForm(); });
  },
  onFormSubmit: function($form) {
      var win_hs = document.querySelector('.hbspt-form iframe').contentWindow;
      win_hs.in_fh = {}; win_hs.in_fe = {}; // insiteful
  }
});
</script>

 

0 Upvotes