Create manual Conversion Audiences to track your HubSpot form submissions

If your company uses HubSpot forms to capture lead submissions from your website visitors there are two methods to track them in RollWorks depending on how your website fill form pages are configured:

• Method 1: If you use thank you pages after a successful form fill, you can create a URL-based Audience and mark it as a Conversion Audience following the instructions in this article.
  Below is a 'thank you' confirmation page after submitting the form fill:
  
• Method 2: If you don’t use thank you/confirmation pages after a successful form fill, continue reading and follow the instructions to create a Conversion Audience.

Step 1: Copy the code snippet

The snippet of code below is the one you will use to track HubSpot forms by adding it to your website code. When the snippet loads on the page it listens for any HubSpot form submissions. We record the tracking event and email address submission used for deanonymization purposes.

In the following steps, you will replace the following identifiers in the snippet code before adding it to your website:

• Your website domain
• RollWorks Segment ID
• RollWorks Advertisable ID
• RollWorks Pixel EID

<script type="text/javascript">
(function() {
  window.rwHsIsTracking = window.rwHsIsTracking || 0;
  if (window.rwHsIsTracking !== 1) {
    window.rwHsIsTracking = 1;
    window.addEventListener('message', function(e) {
      if (e.origin.match(/YOUR_WEBSITE_DOMAIN/)) {
        if (e.data && e.data.eventName) {
          if (e.data.eventName == 'onFormSubmitted') {
            try {
              __adroll.record_user({
                "adroll_segments": "SEGMENT_ID"
              });
            } catch (err) {}
          }
        }
        if (e.data && e.data.data && e.data.data.length >= 1) {
          try {
            for (var i = 0; i < e.data.data.length; i++) {
              var o = e.data.data[i];
              if (o.name && o.name == 'email' && o.value) {
                var img = document.createElement('img');
                img.src = '//d.adroll.com/emailc/ADVERTISABLE_EID/PIXEL_EID?' +
                  'adroll_external_data=ipixel%3D1%26adroll_email%3D' +
                  encodeURIComponent(o.value);
                break;
              }
            }
          } catch (e) {}
        }
      }
    }, false);
  }
})();
</script>

Step 2: Replace your website domain in the code snippet

Add your company website domain without HTTP or WWW as highlighted below:

<script type="text/javascript">
(function() {
  window.rwHsIsTracking = window.rwHsIsTracking || 0;
  if (window.rwHsIsTracking !== 1) {
    window.rwHsIsTracking = 1;
    window.addEventListener('message', function(e) {
      if (e.origin.match(/websitedomain.com/)) {
        if (e.data && e.data.eventName) {
          if (e.data.eventName == 'onFormSubmitted') {
            try {
              __adroll.record_user({
                "adroll_segments": "SEGMENT_ID"
              });
            } catch (err) {}
          }
        }
        if (e.data && e.data.data && e.data.data.length >= 1) {
          try {
            for (var i = 0; i < e.data.data.length; i++) {
              var o = e.data.data[i];
              if (o.name && o.name == 'email' && o.value) {
                var img = document.createElement('img');
                img.src = '//d.adroll.com/emailc/ADVERTISABLE_EID/PIXEL_EID?' +
                  'adroll_external_data=ipixel%3D1%26adroll_email%3D' +
                  encodeURIComponent(o.value);
                break;
              }
            }
          } catch (e) {}
        }
      }
    }, false);
  }
})();
</script>

Step 3: Replace Segment ID in the code Snippet

First, you will need to create a Website Audience in RollWorks to generate the Segment ID by logging in to RollWorks and navigating to Audiences > Website Audiences > Create Audience.

1. Select Audience Type = Event JS Match.
2. Enter your desired Audience Name.
3. Click Copy to Clipboard to copy the segment ID.
4. Enter your desired Audience Duration (in days) under How long to keep a person in this audience. If you aren't sure, learn more in this article.
5. Check the box labeled This is a conversion audience.
6. Click Create Audience.

Now that you have generated the Segment ID, replace it in the code snippet highlighted in red:

<script type="text/javascript">
(function() {
  window.rwHsIsTracking = window.rwHsIsTracking || 0;
  if (window.rwHsIsTracking !== 1) {
    window.rwHsIsTracking = 1;
    window.addEventListener('message', function(e) {
      if (e.origin.match(/companydomain.com/)) {
        if (e.data && e.data.eventName) {
          if (e.data.eventName == 'onFormSubmitted') {
            try {
              __adroll.record_user({
                "adroll_segments": "57e55de8"
              });
            } catch (err) {}
          }
        }
        if (e.data && e.data.data && e.data.data.length >= 1) {
          try {
            for (var i = 0; i < e.data.data.length; i++) {
              var o = e.data.data[i];
              if (o.name && o.name == 'email' && o.value) {
                var img = document.createElement('img');
                img.src = '//d.adroll.com/emailc/ADVERTISABLE_EID/PIXEL_EID?' +
                  'adroll_external_data=ipixel%3D1%26adroll_email%3D' +
                  encodeURIComponent(o.value);
                break;
              }
            }
          } catch (e) {}
        }
      }
    }, false);
  }
})();
</script>

Step 4: Replace the RollWorks Advertisable EID in the code snippet

First, you will need to find the RollWorks Advertisable EID, a unique alphanumeric identifier that identifies your RollWorks advertisable.

Login to your RollWorks account and go to the home page, you will find your Advertisable ID in the URL as follows:

Now that you have copied your RollWorks Advertisable EID, replace it in the code snippet highlighted in red:

<script type="text/javascript">
(function() {
  window.rwHsIsTracking = window.rwHsIsTracking || 0;
  if (window.rwHsIsTracking !== 1) {
    window.rwHsIsTracking = 1;
    window.addEventListener('message', function(e) {
      if (e.origin.match(/companydomain.com/)) {
        if (e.data && e.data.eventName) {
          if (e.data.eventName == 'onFormSubmitted') {
            try {
              __adroll.record_user({
                "adroll_segments": "57e55de8"
              });
            } catch (err) {}
          }
        }
        if (e.data && e.data.data && e.data.data.length >= 1) {
          try {
            for (var i = 0; i < e.data.data.length; i++) {
              var o = e.data.data[i];
              if (o.name && o.name == 'email' && o.value) {
                var img = document.createElement('img');
                img.src = '//d.adroll.com/emailc/ADVERTISABLE_EID/PIXEL_EID?' +
                  'adroll_external_data=ipixel%3D1%26adroll_email%3D' +
                  encodeURIComponent(o.value);
                break;
              }
            }
          } catch (e) {}
        }
      }
    }, false);
  }
})();
</script>

Step 5: Replace the RollWorks Pixel EID in the code snippet

First, you will need to find your RollWorks Pixel EID by logging in to RollWorks and navigating to Audiences > Website Audiences > View Pixel > Copy

Once you have the Pixel copied to the clipboard, open a new document and paste the code there. Your unique Pixel EID will be in the third line:

Now that you have copied your RollWorks Pixel EID, replace it in the code snippet highlighted in red:

<script type="text/javascript">
(function() {
  window.rwHsIsTracking = window.rwHsIsTracking || 0;
  if (window.rwHsIsTracking !== 1) {
    window.rwHsIsTracking = 1;
    window.addEventListener('message', function(e) {
      if (e.origin.match(/companydomain.com/)) {
        if (e.data && e.data.eventName) {
          if (e.data.eventName == 'onFormSubmitted') {
            try {
              __adroll.record_user({
                "adroll_segments": "57e55de8"
              });
            } catch (err) {}
          }
        }
        if (e.data && e.data.data && e.data.data.length >= 1) {
          try {
            for (var i = 0; i < e.data.data.length; i++) {
              var o = e.data.data[i];
              if (o.name && o.name == 'email' && o.value) {
                var img = document.createElement('img');
                img.src = '//d.adroll.com/emailc/ADVERTISABLE_EID/PIXEL_EID?' +
                  'adroll_external_data=ipixel%3D1%26adroll_email%3D' +
                  encodeURIComponent(o.value);
                break;
              }
            }
          } catch (e) {}
        }
      }
    }, false);
  }
})();
</script>

Step 6: Add the snippet to your website when the page loads

• Option 1: If you have your Pixel installed via GTM
  • Tag Setup
  • Go to Tags > New > Custom HTML
  • Place the attached code
  • Save the TAG
  • Trigger Setup (This trigger may be different based on your website, consult with your website engineer)
  • Select the Window loaded trigger
  • Select All Window Loaded Events
  • Finally, save the changes and publish them in a Live version. (With this setup you will track all HubSpot forms with one unique Conversion Audience (Segment ID). Both existing forms and new forms that you create in the future will be tracked automatically as long as the forms are built in the same way.)

Alternatively, you can use the configuration below if you only want to track specific Forms in Specific Pages:

• • Select the condition as PAGE URL matches REGEX (ignore case)/form1-url|/form2-url

Using this method you will track all your HubSpot forms through one Conversion Audience in RollWorks.

• Option 2: If you have installed the RollWorks Pixel on the header of your website

  add this to the header of your website immediately after.

Basic Troubleshooting

Ensure that your RollWorks Pixel is active and fires on every page of your website. Your RollWorks Pixel can only detect activity on a page if it is active on that page. Learn more about how to troubleshoot your Pixel in this article.

Advanced Troubleshooting

Below are advanced troubleshooting steps you can take to confirm if the dedicated Pixel for an event-based website audience is firing correctly. These instructions apply only if the user-triggered event that you are troubleshooting reloads the page or directs the user to another URL. If the page does not reload nor directs the user to another URL you should use this PixelPal Guide to troubleshoot your event-based Pixel implementation.

• Open your Chrome browser.
• Go to the URL on your website that has the Event-based audience implemented.
• Open Developer Tools by right-clicking your mouse and clicking Inspect.
• Go to the tab Network.
• Mark the checkbox Preserve log.
• In the network call search box: 
  • Type name= → use this option if you DO NOT know the event segment EID or snippet pattern ID.
  • Enter the event segment EID → use this option if you know the event segment EID.

• Perform a conversion test by clicking the button that you are tracking with this Event-based Audience.
• You will see the network calls under the “Name” column → click the adroll call
• You can confirm the Event-based pixel is firing correctly in a couple of ways:
  • Option a) Click Headers → General → Request URL → search for “name=[snippet pattern ID]”
    

    

  • Option b) Click Headers → General → Response Headers → search for the segment details:
    • x-segment-display-name: name of your audience segment.
    • x-segment-eid: audience segment EID.
    • x-segment-name: snippet pattern ID.