HubSpot is a popular inbound marketing and CRM software. The UltraCart StoreFront platform has support for firing their tracking pixel as each page loads as well as creating a deal once the customer orders. This tutorial will guide you through the configuration process.

Configuring HubSpot with UltraCart StoreFronts

Introduction

HubSpot is a widely used inbound marketing and CRM software. UltraCart StoreFronts support integrating with HubSpot by firing their tracking pixel on page loads and creating deals upon customer orders. This guide will walk you through the configuration process.

Navigation

From your UltraCart main menu, click StoreFronts.
Select the desired StoreFront host from the dropdown.
In the StoreFront menu, click Privacy & Tracking.
Click the Other tab.
Scroll down to the HubSpot section.

Main Menu > Storefronts (Select a StoreFront) > Privacy & Tracking > Other > Scroll down to HubSpot

Configuration Fields

Configure the following fields in the HubSpot section:

Portal ID: This is a required credential obtained from HubSpot.
Key: This field is deprecated. Use the OAuth 2.0 connection via the "API Connection" button instead.
API Connection (Button): Click this button to complete the OAuth 2.0 connection to your HubSpot account.
Form GUID: This is a required credential obtained from HubSpot.
Conv. Pipeline/Stage: Configures the deal pipeline and stage for successful conversions. The default is "dealstage appointmentscheduled" but can be overridden.
Cancel Pipeline/Stage: Configures the deal pipeline and stage for cancelled orders.
Refund Pipeline/Stage: Configures the deal pipeline and stage for refunded orders.
Use Item ID for Deal Name: Select this checkbox to use the Item ID as the Deal Name in HubSpot. The default behavior is to use the UltraCart order ID.
Opt in to [criteria] required for [customer segment]: These settings assist with General Data Protection Regulation (GDPR) compliance.

Disclaimer: This is not legal advice. The General Data Protection Regulation is complex, and each merchant should obtain legal advice to discover how the regulation applies to their specific business.

Pipelines and Stages

To find the names of your Pipelines and Stages in HubSpot:

Log in to HubSpot.
Click Settings at the top of your screen.
Click the Deals link from the left menu.
Scroll down to the Deal Pipelines and Stages section. This section will provide the names of all your Pipelines and Stages.

Information Sent to HubSpot

UltraCart sends specific information to HubSpot at different stages of the customer journey.

When the form is posted on the receipt load, the following information is sent:

firstname
lastname
email
hs_content
- pageName

When a Deal is created, the following information is sent:

properties
- amount
- dealstage ( appointmentscheduled but can be overridden by Conversion Pipeline/Stage configuration)
- closedate (current date/time)
- dealname (defaults to UltraCart order ID, but can be configured to use Item ID)

Custom Deal Properties

Additionally, UltraCart creates and populates the following custom deal properties when a conversion deal is created:

Order ID
Order Date
Email
First Name
Last Name
Address 1
Address 2
City
State
Zip
Country
Day Phone
Evening Phone
Shipping Method
Upsell Path
Coupon (first coupon)
Coupon (csv of all coupons)
Item (Item ID)
Item Quantity
Item Description
Item Amount
Items (csv of all Item IDs)
Item Quantities (csv of all Item Quantity)
Item Descriptions (csv of all Item Descriptions)
Item Amounts (csv of all Item Amounts)
Upsell Flags (csv of 'Y' and 'N' for each item, indicating if that item was an upsell item)
Shipping Handling
Order Total
Discounts
Upsell Purchased ('Y' if the order contained at least one upsell purchase, 'N' otherwise)

Finally, when a conversion deal is created, relevant Contact properties such as City, Country, First Name, Last Name, Phone, Address, State, and Zip are updated with order details.

Testing the Integration

To ensure your HubSpot integration is working correctly, follow these testing steps:

Prerequisites

Configure a test credit card in UltraCart.

Steps

View Page Pixel: During the checkout flow, view the page source and search for "HubSpot". You should find the HubSpot analytics code injected correctly.

<!-- Start of Async HubSpot Analytics Code-->
<script type="text/javascript">
  (function(d,s,i,r){
    if (d.getElementById(i)){return;}
    var n=d.createElement(s),e=d.getElementsByTagName(s)[0];
    n.id=i;n.src='//js.hs-analytics.net/analytics/'+(Math.ceil(new Date()/r))+"/"+[unique-identifier].js;
    e.parentNode.insertBefore(n, e);
  })(document,"script", "hs-analytics",300000);
</script>
<!-- End of Async HubSpot Analytics Code-->

Network Tab Verification (Page Load): In your browser's developer tools, go to the Network tab. Look for requests where the "Name" field contains your "portal id". This indicates the HubSpot analytics pixel is firing on the page.

Network Tab Verification (Form Post): If you use a properly configured test card, the form post should occur on the receipt page. You will see a successful POST request to https://checkout.ultracart.com/rest/site/hubspot/forms/. This indicates UltraCart is relaying an API call to HubSpot.

HubSpot Deal Creation: The form post on the receipt page sends the first name, last name, and email address to the HubSpot form, creating a contactVid. A few seconds after payment processing, UltraCart makes API calls to HubSpot to create a Deal based on the contactVid and the order amount. If successful, this deal should appear in your HubSpot interface.

Troubleshooting

If you encounter issues, you can view the HubSpot integration logs in UltraCart.

Accessing Integration Logs

Integration Logs Widget: If you have the "Integration Logs" widget added to your UltraCart home page, you can click on any errors listed under HubSpot.
Reporting Area:
1. Navigate to Main Menu > Operations > Reporting.
2. In the "Integrations" section, click on Logs - All, Logs - Critical, or Logs - Errors.
3. If you have many integrations, click the Filter Logs button.
4. From the "Integration" dropdown menu, select HubSpot.
5. Click Apply Filter.

Dashboard Integration Widget

Reporting

If you have many integrations, next click the 'Filter Logs' button, then select from the 'Integrations' drop down menu Hubspot"

Helpful HubSpot Documentation Links to assist you

How do I find my HubSpot portal ID?

How do I get my HubSpot API Key?

How do I find my form guid?