Set up Attributer with HubSpot Meetings

Attributer is a little bit of code you add to your website. It tracks where your visitors are coming from (I.e. Paid Search, Paid Social, Organic Search, etc) and writes the data into hidden fields you add to your forms which is then captured in Hubspot.

This article shows you how to pass Attributer data to HubSpot when a visitor books a meeting through HubSpot’s Meetings widget.

Prerequisites

Before setting up this integration, make sure you have:

• Attributer installed on your website (see instructions here)
• The HubSpot tracking code installed on the page(s) where your Meetings widget is embedded
• A HubSpot Meetings widget embedded on your site using HubSpot’s standard embed code

Step 1: Add the first Contact Property to your Hubspot account

You first need to create a series of properties on the Contact object before the attribution data can be written to your contacts.

To do this, navigate to the ‘Settings’ section by clicking the gear icon in the top menu bar, and then select the ‘Contacts’ menu option from left-hand nav bar before clicking the ‘Manage Contact Properties’ link.

Once in the contact fields section, select the ‘Create Property’ button in the top right.

A sidebar will appear that looks a bit like this:

Enter the following information into the fields

• Group = Your choice as to where you want this field to appear on the Contact record
• Label = Channel
• Description: Add a description if you wish, but it isn’t necessary

Before clicking the ‘Next’ button, you need to click the </> icon next to the label field to open up the internal name settings:

Once open, ensure the internal name for this field is ‘channel’ then select the Next button at the bottom of the screen to move to the next stage of field creation.

On this page, select the ‘Single Line Text’ option in the Field Type box.

Then click the ‘Next’ button

On the final page of the form creation wizard (the Rules page), just leave the Default options selected.

Finally, click the ‘Create’ button to finish creating the first custom field.

Step 2: Add the rest of the Contact Properties to Hubspot

Now that you understand how to add a new Property to the Contact object in Hubspot, we need to repeat this process a few more times to add all the properties Attributer needs to work.

The following details are what you’ll need to enter into the wizard:

Property #2

• Group = Your choice as to where you want this field to appear
• Label = Channel Drilldown 1
• Internal Name = channeldrilldown1 (Hubspot will by default add underscores between the words)
• Field Type = Single line text
• Rules = Leave Default

Property #3

• Group = Your choice as to where you want this field to appear
• Label = Channel Drilldown 2
• Internal Name = channeldrilldown2
• Field Type = Single line text
• Rules = Leave Default

Property #4

• Group = Your choice as to where you want this field to appear
• Label = Channel Drilldown 3
• Internal Name = channeldrilldown3
• Field Type = Single line text
• Rules = Leave Default

Property #5

• Group = Your choice as to where you want this field to appear
• Label = Landing Page
• Internal Name = landingpage
• Field Type = Single line text
• Rules = Leave Default

Property #6

• Group = Your choice as to where you want this field to appear
• Label = Landing Page Group
• Internal Name = landingpagegroup
• Field Type = Single line text
• Rules = Leave Default

Step 3: Add some additional code to any page that contains the meeting widget

The final step is to add an integration script to your website. This script listens for successful meeting bookings and pushes the Attributer data to HubSpot. The code you need to add is:

<script>
(function () {
  'use strict';
  var ALLOWED_ORIGINS = [
    'https://meetings.hubspot.com',
    'https://app.hubspot.com'
  ];
  var MAX_WAIT_MS = 10000;
  var POLL_INTERVAL_MS = 100;
  var attributerData = null;

  function captureAttributerData() {
    if (document.FlareTrk && document.FlareTrk.data && document.FlareTrk.data.drillData) {
      attributerData = document.FlareTrk.data;
      return true;
    }
    return false;
  }

  function waitForAttributer() {
    if (captureAttributerData()) return;
    var elapsed = 0;
    var interval = setInterval(function () {
      elapsed += POLL_INTERVAL_MS;
      if (captureAttributerData()) {
        clearInterval(interval);
      } else if (elapsed >= MAX_WAIT_MS) {
        clearInterval(interval);
      }
    }, POLL_INTERVAL_MS);
  }

  function buildProperties(data, contactEmail) {
    var props = {};
    if (contactEmail) props.email = contactEmail;
    if (data.drillData) {
      if (data.drillData.channel)    props.channel = data.drillData.channel;
      if (data.drillData.drillDown1) props.channeldrilldown1 = data.drillData.drillDown1;
      if (data.drillData.drillDown2) props.channeldrilldown2 = data.drillData.drillDown2;
      if (data.drillData.drillDown3) props.channeldrilldown3 = data.drillData.drillDown3;
      if (data.drillData.drillDown4) props.channeldrilldown4 = data.drillData.drillDown4;
    }
    if (data.landing_url)        props.landingpage = data.landing_url;
    if (data.landing_page_group) props.landingpagegroup = data.landing_page_group;
    return props;
  }

  function extractContactEmail(messageData) {
    try {
      return messageData.meetingsPayload.bookingResponse.postResponse.contact.email;
    } catch (e) {
      return null;
    }
  }

  function handleMessage(event) {
    if (ALLOWED_ORIGINS.indexOf(event.origin) === -1) return;
    if (!event.data || !event.data.meetingBookSucceeded) return;
    if (!attributerData) return;
    var contactEmail = extractContactEmail(event.data);
    if (!contactEmail) return;
    var hsq = window._hsq = window._hsq || [];
    var props = buildProperties(attributerData, contactEmail);
    hsq.push(['identify', props]);
    hsq.push(['trackPageView']);
  }

  function init() {
    waitForAttributer();
    window.addEventListener('message', handleMessage, false);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();
</script>

You can place this anywhere on the page that contains the HubSpot Meetings widget, but probably the easiest thing to do is place it directly beneath the standard HubSpot embed code in the same embed block/container.

---

If you don’t feel comfortable with any of these steps, including editing code, then we’d be happy to help you with it. Feel free to contact us here or book a call with us here.