Dev Request: Dev Request - Pass Web IDs to Hubspot Contacts - PDQ

Motivation

We want to accurately credit marketing efforts, content, and spend for customer acquisition, product purchases and lifetime value.

Because the customer journey often takes place across devices and beyond reliable, cookie-based tracking, we cannot use web analytics data alone for this attribution. We need to join web data (Google Analytics and ad-buying platforms) with CRM data (Hubspot).

Methodology

The way to do this is to join the web and CRM datasets in the data warehouse (Google BigQuery). This requires having foreign keys to join the data sets. We can store the web data keys (to be used as foreign keys) on each Contact record created in Hubspot. This happens when a form is submitted to the Hubspot Forms API.

This process will have two parts:

• Creating fields on the Hubspot Contact to store the web ids and modifying Hubspot forms to be prepared to receive these additional fields
• Adding the additional fields to Hubspot Forms API submissions.

Tasks

Creating Fields on Hubspot Contacts and Hubspot Forms

The following fields need to be created on Hubspot Contact records and also included on all Hubspot Forms that are currently in use.

Injecting Field Values Into Hubspot Forms API Submissions

adMind's Most Common Scenario Typically this work is done by creating hidden fields on lead forms and then populating those hidden fields when pages load. adMind has a lightweight, well tested JS library that is loaded through Google Tag Manager for this purpose. The library extracts and stores the necessary fields in localStorage. Then minimal JS is used to read the values from localStorage and inject them in the hidden form fields (where applicable).

Options in PDQ's React SPA

1. Load the adMind Library as a Dependency to the React Application This should happen on www and on sales

The following would be the configuration and library load.

<!-- Config -->
<script>
window._sourcesStoreConfig = {
  additionalParametersToPersist: [
    'effort'
  ],
  callback: function(){
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      'event': 'sourcesStoreLoaded'
    });
    // anything needed to be done after the library is loaded
  }
}
</script>

<!-- Library Script -->
<script src="https://d1m09pg603vjt9.cloudfront.net/assets/js/app.bundle.js"></script>

Once the library is loaded, the data store can be accessed to retrieve the data to include with Hubspot Forms API submissions as follows:

<script>
    (function(){
        var lastSource = window.sourcesStore.getLastNonDirect();
        var cid = lastSource.cid;
        var effort = lastSource.effort;

        // These calls will get the most recent parameter if any, or JS undefined if there is none.
        var gclid = window.sourcesStore.getLastParameter('gclid');
        var msclkid = window.sourcesStore.getLastParameter('msclkid');
        var fbclid = window.sourcesStore.getLastParameter('fbclid');
        var rdt_cid = window.sourcesStore.getLastParameter('rdt_cid');
        var li_fat_id = window.sourcesStore.getLastParameter('li_fat_id');

        // Insert values into Hubspot Forms API form submission call
    })();
</script>

2. Recreate the functionality of this library in the react application Schedule time to discuss with adMind if this is the desired route.