Segment Integration to HubSpot - Working Example

Develop, Build & Integrate APIs & Integrations
,
1

Segement is great, so too hubspot, however getting the two to work togeher… not so easy.

To start, the Cloud Mode using any number of the Segement Server side SDKs is easy, works like a charm.

Segments Device Mode integration to hubspot is a little more tricky.

a few items of note for the Segment & HubSpot integrationfirst hubspot fields are very sensitive, any spaces in fields that hubspot expects to not have spaces will result in a failure to tracksecond, the email field must be a well formated and accepted emailthird and IMPORTANT. the order in which and how the segment APIs are called will cause HubSpot to fail.1 - analytics.js must be called and a analyitcs.page called imideiatly after, the standard Segment Header script does this2- to correctly identify and track an action an analytics.identify and analyitcs.track events must be called after each other.// analytics.load()// analytics.page()// analytics.identify()// analytics.track()

thats the basics. its worth noting that the analytics.identify() command does most of the heavy lifting. The analytics.track() methods update the contact with associated events.

to test an integration i found Online Javascript Editor helpful and quick.

Note: clear your cache!! if not the analytics will link all your sessions and testing becomes a nightmare

<script>
//the analytics are wrapped in a function so that you can test the impact in the order and hubspot contact creation
 function loadAnalytics(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t,e){var n=document.createElement("script");n.type="text/javascript";n.async=!0;n.src="https://cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a);analytics._loadOptions=e};analytics.SNIPPET_VERSION="4.1.0";
 analytics.load(“<your-segment-api-key);
 analytics.page();
 }}

function identifyUser(){
// the user ID isnt required. analytics.identify({
 email: 'hstest123@hstest.com',
 firstname: 'hstest',
 lastname: '123'
})
}

function trackUser(){
analytics.track("Clicked Buy Now button", {
 value: 20.5
})}

</script>

 //each button executes hubspot in the required order if clicked from top to bottom
<input type=button value="loadAnalytics" onClick="loadAnalytics()"><br>
<input type=button value="identifyUser" onClick="identifyUser()"><br>
<input type=button value="trackUser" onClick="trackUser()"><br>

copy the code, add your segment api and give it a try, ensure that your source has hubspot set as the destination.

below is a fully working instrumented html page

<!DOCTYPE html>
<html lang="en">
<head>
 <title> testing page- User Sign Up</title>
 <script>
 !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t,e){var n=document.createElement("script");n.type="text/javascript";n.async=!0;n.src="https://cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a);analytics._loadOptions=e};analytics.SNIPPET_VERSION="4.1.0";
 analytics.load(<your-api-key>);
 analytics.page();
 }}();
</script>
 <meta charset="UTF-8">
 <title>Title</title>
</head>

<script>

//################################################
// a few items of note for the Segment & HubSpot integration
//first hubspot fields are very sensitive, any spaces in fields that hubspot expects to not have spaces will result in a failure to track
// second, the email field must be a well formated and accepted email
// third and IMPORTANT. the order in which and how the segment APIs are called will cause HubSpot to fail.
// 1 - analytics.js must be called and a analyitcs.page called imideiatly after, the standard Segment Header script does thsi
// 2- to correctly identify and track an action an analytics.identify and analyitcs.track events must be called after each other.
// analytics.load()
// analytics.page()
// analytics.identify()
// analytics.track()
//################################################
function beta_sign_up_page(){
analytics.page('segment event',{
 section: 'service',
 topic: 'topic ',
});
}

function identify_hubspot(){
 var account_input = document.getElementById('account-Name').value;
 var firstname_input = document.getElementById('first-Name').value;
 var lastname_input = document.getElementById('last-Name').value;
 var email_input = document.getElementById('email').value;

 firstname_input = firstname_input.replace(/ /g, '');
 lastname_input = lastname_input.replace(/ /g, '');
 account_input = account_input.replace(/ /g, '');

 analytics.identify({
 email: email_input,
 firstname: firstname_input,
 lastname: lastname_input,
 account_name: account_input,
 })
}

function track_to_hubspot(){
 var account_input = document.getElementById('account-Name').value;
 var firstname_input = document.getElementById('first-Name').value;
 var lastname_input = document.getElementById('last-Name').value;
 var email_input = document.getElementById('email').value;
 analytics.track('WZ Sign-Up Submitted - 1', {
 email: email_input,
 firstname: firstname_input,
 lastname: lastname_input,
 account_name: account_input,
 });
}

function request_beta() {
// the order of these calls is important. 
 this.beta_sign_up_page();
 this.identify_hubspot();
 this.track_to_hubspot();

}

</script>
<body>
UUID Dsiplay: <span id="UUID_display">(click Log-IN)</span>
<p>sign up for beta</p>
account name : <input type="text" id="account-Name" value="account name">
<br/>
first name : <input type="text" id="first-Name" value="temp first1">
<br/>
last name : <input type="text" id="last-Name" value="temp last"> 
<br/>
<input type="text" id="email" value="test-testing@testing-segment.test">
<input type=button value="request beta" onClick="request_beta()"><br>

<br/>

</body>

</html>

happy integrating.

2

Hi @thefunpolice,

Thanks for sharing this working example! Happy to have people like you around our community!

Cheers.

3

Do we really need to install the Tracking code on our External pages to ensure users are associated correctly? We were hoping the Segment and HubSpot integration would cover this, having to use Form Tracking to better associate users is not preferred.

4

What HubSpot plan is this working on?
Did you create a property in HubSpot for “Clicked Buy Now button” or “WZ Sign-Up Submitted - 1”?

Where does that data show up?

thanks!

5

We’re using Segment and Hubspot as well but keep having customer association issues. Thus in turn having website activity not flowing into customer’s profiles since they aren’t associated. Then our team has to associate them manually inside conversations as well, a huge hassle.
We found we had to leave Form Tracking on so our site pages associate users during form use like Login or newsletter Sign-up. That said this also tracks a few other forms we do not want to be tracked for security and safeguarding PII — especially since users with marketing access can seemingly have form data emailed directly to them any time it’s submitted. It doesn’t look like there’s a way to disable individual forms but it does say, “Enable” with a green light next to the form that is getting tracked, which leaves me to believe it could be done.
Honestly, the team just sees this whole thing as a security risk and we’d to not have to use Form Tracking or to at least be able to enable it so it ONLY tracks specific forms. The best-case scenario would be to have better ways to associate users. I’ve read some folks in the forums have deferred to using Contact API but you’d think Segment and Hubspot wouldn’t have to rely on Form tracking or Contact API.
We would really love anyone’s insights on this one!

6

I have a Node.js demo app that uses analytics.js for the cloud mode API calls. The only working call is the “identify” one.
Device mode doesn’t work at all. I can see the events in Segment’s source debug tab, but nothing changes on HubSpot’s side, though I can see successful calls to HubSpot’s API from my browser. I tried your example and it behaves the same way.