Tracking Form submissions with Hull.jsUpdated 11/12/2019

You can automatically track form submissions using Hull.js. This allows you to track all form properties and consume them inside of Hull in the form of events. There are multiple ways to set this up:

• Manual Tracking Setup
• GTM (Google Tag Manager)

See below for a real scenario that demonstrates how you can track forms with Hull.js.

HTML Form Example:

<form class="test" name="test">
  <input id="fName" type="text">
  <input id="lName" type="text">
  <button type="submit">Submit</button>
</form>

Using Hull.trackForm()

You can simply insert the snippet below into any page that contains a form - some code may need to be changed depending on how your site is built.

Step 1: Keep in mind that var forms must be an array of HTMLFormElements.

Step 2: The first function (function event(form){}) must return a string which will be the name of the event, in Hull. The second function (function properties(form){}) must return an object which contains the properties of the event to be sent to Hull.

<script>
// You can specify a function for both the Event and the properties to be generated in a custom way.
Hull.trackForm("form.test", function event(form, serialized, event) {
  // Your custom logic to extract form Name
  return "Form Submitted"
}, function properties(form, serialized, event) {
  //serialized is a pre-serialized version of the form. You can return it as is, or transform it.
  return serialized;
});
</script>

Google Tag Manager (GTM) Setup

If you'd rather use Google Tag Manager to deploy Hull.trackForm, simply add a new tag, with the following custom HTML:

<script>
  Hull.track({{EventName_Placeholder}}, {{Event_Properties_Placeholder}})
</script>

Please note that Support document.write must be enabled for this tag to work.