Last Updated 7/17/18.

If you use HubSpot Marketing to manage your website, you can easily place the Super Pixel in your Content Settings to track your site visitors. There are also additional tracking settings using the Sprinkle and Update functions, to capture form-fill information, pass through page-view data, and more.

Grab your Feathr Super Pixel

  1. Login to your Feathr account and navigate 'Super Pixel' section found on the left navigation pane.
  2. Copy the entire Super Pixel code. It should look like the image below:

Basic Super Pixel HubSpot Implementation

  1. Login to your HubSpot Marketing account. 
  2. Click on the Content tab at the top, then select Content Settings.

   3. This should take you to the Site & Publishing Options for All Domains section. Scroll down to find the Site Footer HTML

   4. In the Site Footer HTML, paste your Feathr Super Pixel right before the end of the body tag, so it will apply across all of your pages.

   5. Scroll down and click Save Changes to publish them. 

This basic Super Pixel implementation will start tracking all of your site visitors and pull their anonymous activity data into Feathr.

Custom Super Pixel HubSpot Implementation

If you want to pass additional information through to Feathr using the custom Update or Sprinkle functions, you can use HubSpot's HubL reference guide. HubSpot templates can use a host of predefined variables that can be used to render useful website and email elements. This page is a reference listing of those variables.

   1. Identify which fields you want to track, and if they should be used as an Update or Sprinkle function. Remember, the Update function should be used when updating information about a person, like their name or email address. The Sprinkle function should be used to track actions, like which pages were viewed. You can read more on when to use Update vs. Sprinkle functions here.

   2. The Update and Sprinkle functions should always be placed directly below the "fly" of the super pixel. It has your Feathr account number in it, and is located at the end of your Super Pixel code. It looks like this:

feathr("fly", "XXXXXXXXXXXXXXXX1234");

   3. To pass information through a Sprinkle function, follow the example setup below: 

feathr("sprinkle", "page_view", {
        CONTENT_TOPICS: '{{content.topic_list}}',
});

 Note: HubSpot variables include double brackets around them. 

   4. To use the Update function, follow the example setup below: 

feathr("update", {
        name: '{{contact.firstname}} {{contact.lastname}}',
});

   5. Which variables you decide to use are ultimately up to you, but below are the fields Feathr uses, if you want an idea of where to start!

    feathr("sprinkle", "page_view", {
        CONTENT_TOPICS: '{{content.topic_list}}',
        CONTENT_NAME: '{{page_meta.name}}',
        SEARCH_ENGINE: '{{request.search_engine}}',
        SEARCH_KEYWORD: '{{request.search_keyword}}'
    });
   
    feathr("update", {
        name: '{{contact.firstname}} {{contact.lastname}}',
        companies: ['{{account.name}}'],
        email: '{{contact.email}}',
    });


   6. On the left side are the fields that pass through into Feathr. You can find these when building segments using filters, or in a Person's breadcrumb activity. On the right are the fields that correspond to HubSpot's variables found in this document

These Sprinkles are custom data that will show as segment filters, and on a Person's breadcrumb activity.

  • {{content.topic_list}} passes through the list of topic objects associated with the blog post. These topics are passed through as a string.
  • {{page_meta.name}} passes through the name of a post, email, or page as a string.
  • {{request.search_engine}} is the search engine used to find this page, if applicable. Ex: google, aol, live, yahoo, etc.
  • {{request.search_keyword}} shows the keyword phrase used to find this page, if applicable. 

See the CONTENT_NAME example below. This was pulled through using HubSpot's variable {{page_meta.name}}.

These default Updates pull in contact information submitted by HubSpot forms. They appear on the Person's info.

  • {{contact}} pulls in a person's full name by default. Alternatively, you could separate it into {{contact.firstname}} {{contact.lastname}}. 
  • {{account.name}} is the equivalent to our "companies." 
  • {{contact.email}} pulls in the person's email address.

In the example below, you can see where name, email, and companies appear when pulled through from HubSpot using the variables above.

Common Questions

Where can I find more information on Feathr's default fields that I should map my HubSpot fields to?
We have some great resources that can be found in the Related Articles below, but our full list of attributes can be found on our Developer Site here. This goes into more detail about placing the Super Pixel correctly and choosing the right fields to map to.

Related Articles

HubL Supported Variables
Feathr Developer Docs
Pixel Implementation Guide
When to Use Update vs. Sprinkle

Did this answer your question?