Issue with identifying user in Rudderstack + Hubspot (React.js app)

Develop, Build & Integrate APIs & Integrations
,
1

I am integrating Hubspot live chat in React.js application. I faced issue that I cannot identify user with Rudderstack and receive “Unknown Visitor” instead of actual user data like email, name etc.

Here is integration code:

import { useEffect } from 'react';

export const useHubspot = () => {
 useEffect(() => {
 const script = document.createElement('script');
 script.src = '//js-na1.hs-scripts.com/id.js';
 script.async = true;
 script.defer = true;
 script.id = 'hs-script-loader';
 document.body.appendChild(script);

 return () => {
 document.body.removeChild(script);
 };
 }, []);
};

This hook is run in parent App.ts

In LoginForm.tsx after successful login:

const dataToTrack = {
 userName: name,
 email,
 company: {
 id: client_data.client__id,
 name: client_data.client__name,
 },
};
rudderanalytics.identify(String(id), data);

In Rudderstack I set “email” field from traits as lookup field, set correct Private Apps token. I definitely see identify event in Rudderstack and see that all POST requests related to contacts in Hubspot resolved successfully.

After sending message from app’s live chat I receive message from “Unknown Visitor”. Any ideas why?

2

Hi, @ARafalskyi :waving_hand: Welcome to our community. Thank you for including your details. I’d like to invite some of our community members to the conversation — hey @Anton @evaldas @GiantFocal, do you have any recent experience here? Or any general troubleshooting steps you like to take in situations like this. Thank you very much for taking a look! — Jaycee

3

Hi @ARafalskyi,

There might be several reasons:

  1. Timing issues: The identify call happens after the Hubspot chat is already initialized
  2. Incorrect data format: The way traits are being passed could be problematic
  3. Missing connection between Rudderstack identity and Hubspot chat

You can try the following:

1. Follow the recommended format:

rudderanalytics.identify(String(id), {
 name: name, // Pass name directly as a trait
 email: email, // Pass email directly as a trait
 company: {
 id: client_data.client__id,
 name: client_data.client__name
 }
});

2. Finally, make sure to identify the call happens before the chat interaction.