Add user information to HubSpot Chat

JavierCane · ‎3 18, 2019

Hi!

Work already done:

Read some post regarding this very same topic without a solution
Implemented the Identify a visitor tracking call as suggested in the docs
Implemented the Track Page View call as suggested in the docs

Expected result:

Be able to identify the users while chatting with them as shown in the Live Chat Software landing page. That is: Recognize its Name, current page, and so on properly:

Actual result:

👎: I'm only able to see the very first page the user has loaded as the current page
👎: The name remains as "Unknown visitor"
👍: Adding some `console.log` commands I'm able to see that the flow from my side seems properly imlpemented. That is, I'm receiving the proper data in Google Tag Manager, and I would be sending it properly to HubSpot. It may fail because of not dealing properly with the trackPageView event, so I'm asking just in case there's something I'm not seeing:

Integration details:

Google Tag Manager Tag fired on every pageview:

<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/XXX.js"></script>

<script>
  console.log("Loading HS Chat"); // ✅ Seeing this in the console

  var userId = {{userId}};
  var isRegistered = !!userId;
  if (isRegistered) {
    var _hsq = window._hsq = window._hsq || [];
    
    _hsq.push(["identify",{
      email: {{userEmail}},
      id: userId,
      fullName: {{userFullName}},
      firstName: {{userFirstName}},
      lastName: {{userLastName}}
    }]);
    
    console.log("ID:");// ✅ Seeing all this data in the console
    console.log(userId);
    console.log({{userEmail}});
    console.log({{userFullName}});
    console.log({{userFirstName}});
    console.log({{userLastName}});
  } else {
    console.log("No ID");
  }
</script>

Since what I'm dealing with is a Single Page Application, I have configured another tag which is fired on every Local History change:

<script>
  var _hsq = window._hsq = window._hsq || [];

  var userId = {{userId}};
  var isRegistered = !!userId;

  console.log("History change detected in GTM:");// ✅ Seeing this in the console

  if (isRegistered) {
    _hsq.push(["identify",{
      email: {{userEmail}},
      id: userId,
      fullName: {{userFullName}},
      firstName: {{userFirstName}},
      lastName: {{userLastName}}
    }]);

    console.log("ID:");// ✅ Seeing all this data in the console
    console.log(userId);
    console.log({{userEmail}});
    console.log({{userFullName}});
    console.log({{userFirstName}});
    console.log({{userLastName}});
  } else {
    console.log("No ID");
  }
  
  _hsq.push(['setPath', window.location.pathname]);
  _hsq.push(['trackPageView']);
</script>

I've also set a little script on the page in order to update the GTM DataLayer once the local history is modified. This way I'm setting the user ID and so on in case of logging in during the session:

  function buildDataLayer() {
    dataLayerObject = {}
    
      dataLayerObject['userId'] = XXX,
      dataLayerObject['userEmail'] = YYY,
      dataLayerObject['userFirstName'] = AAA,
      dataLayerObject['userLastName'] = BBB,
      dataLayerObject['userFullName'] = AAA + " " + BBB

    return dataLayerObject;
  }

  dataLayer = [buildDataLayer()];

  var pushState = history.pushState;
  history.pushState = function() {
    pushState.apply(history, arguments);
    $(window).trigger('pushState');
  };

  $(window).on('pushState', function() {
    window.dataLayer.push(buildDataLayer());
  });

I don't know what else to test :S

Thanks!

cbarley · ‎3 20, 2019

Hi @JavierCane , I was able to find your HubID added you to the beta program. You can access it here https://community.hubspot.com/t5/Conversations-Live-Chat/bd-p/SinglePageLivechat.

cbarley · ‎3 27, 2019

This feature is now live in developer preview https://community.hubspot.com/t5/APIs-Integrations/Developer-Preview-Conversations-Live-Chat-Widget/...

Tomtomtom1 · ‎10 20, 2020

@cbarley Is this working now? Do you have a link to docs on how I can tell hubspot chat the user's email, name, etc?

Ashwinsins · ‎5 25, 2020

The link doesn't seem to be functional.

Madura · ‎8 13, 2019

How can we enter in to developer preview features?

cbarley · ‎3 20, 2019

Hi @JavierCane , as you've found out, our tracking code API and the messages widget don't play nicely together in single page apps. The widget doesn't account for "page changes" inside single page apps. Our team is working on a feature that should be rolled out that updates the widget based on page changes and identify the contact right away. If you respond with your hubid, I should be able to add you to the beta!

APIs & Integrations