Add user information to HubSpot Chat

JavierCane
Member

Hi!

Work already done:

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:
    ConversationsSlack

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!

0 Upvotes
6 Replies 6
cbarley
HubSpot Alumni

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!

0 Upvotes
cbarley
HubSpot Alumni

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. 

0 Upvotes
cbarley
HubSpot Alumni
0 Upvotes
Madura
Member

How can we enter in to developer preview features?

0 Upvotes
Ashwinsins
Member

The link doesn't seem to be functional.

0 Upvotes
Tomtomtom1
Member

@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?