topic Re: Rails 4 + Turbolinks app don't load hubspots client interface, but hard refresh is working in APIs & Integrations

Rails 4 + Turbolinks app don't load hubspots client interface, but hard refresh is working

Shivraj_Badu — Wed, 04 Jul 2018 08:16:19 GMT

I have a rails 4 application with Turbolinks in it and I have configured Turbolinks for hubspots which will load in each page load event (note that, I have add a debugging code which is firing in each page load, so GTM is working). And I can see the hubspots script tag in my body as well as, in network tab it is doing a proper network call.

PROBLEM

When I refresh a page manually (hard refresh/reload) hubspot client interface (chat bubble window) shows up
when I visit page with Turbolinks, those network call in network tab and hubspot script tag in document tag persists, but that chat bubble window don't show up.

How to solve this problem?

UPDATE

Any solution for Single Page Applications (like react, angular, vuejs) are also helpful.
Turbolinks is making my application act like SinglePageApplication and I think that is the problem here.

Re: Rails 4 + Turbolinks app don't load hubspots client interface, but hard refresh is working

Derek_Gervais — Tue, 17 Jul 2018 14:13:54 GMT

Hi @Shivraj_Badu,

Can you give me a link to an example page so that I can test this out?

Re: Rails 4 + Turbolinks app don't load hubspots client interface, but hard refresh is working

Tunch — Tue, 28 Apr 2020 22:01:45 GMT

Was there ever a solution to this problem? 2 years later this still seems to be happening

Re: Rails 4 + Turbolinks app don't load hubspots client interface, but hard refresh is working

tddrmllrWL — Wed, 05 Jan 2022 22:01:47 GMT

I'm having the same issue. I use Turbo, which is the newer offshoot of Turbolinks, but it uses many of the same strategies.

The issue is that Turbo intercepts clicks and form sumissions, transmits data over the wire, and strategically replaces elements in the <body> tag. In most cases, it simply wipes out the all the contents of the body and replaces them with the contents of the requested page.

So with HubSpot, everything loads and works as expected on the intial page load. But as soon as you navigate to a new page, anything that HubSpot added to the body gets replaced, while everything else added client side remains (<head> tags, JS variables, etc.).

Turbo gives you some handy events to hook into, the main one being the turbo:load event, which fires whenever Turbo simulates a page change. So we can hook into this and do stuff, like re-insert the HubSpot tracking code, on every page change (though this sorta seems unnecessary since most of the HubSpot code remains).

For example, if you visit app.worklyfe.io/users/sessions/new, you'll see that the HubSpot chat widget appears on initial page load (it might take a bit to load as it's currently hosted on a Heroku hobby dyno). But if you click the forgot password link, the widget does not appear on the next page.

If I open up the JS console, I can access the HubSpotConversations variable. But none of the methods on HubSpotConversations.widget (refresh, load, open, etc.) have any effect (presumably because the widget's <iframe> is no longer there).

I can call HubSpotConversations.resetAndReloadWidget(), which does make the widget re-appear and functional. However, previous conversations and cookie consent is lost, so it is not a seamless experience from page to page.

I would hope that you guys have implemented strategies to deal with this, because it's not that different from SPA behavior. But I have not been able to figure out a reasonable solution.

Re: Rails 4 + Turbolinks app don't load hubspots client interface, but hard refresh is working

StefanMM — Tue, 10 May 2022 10:40:10 GMT

Hey, I visited the link you posted and it looks like everything is working now.

We're facing the same issue as OP (again, Turbolinks, not Turbo), and we've followed your post and found the same issue with chat and cookie persistence.

Would you mind sharing how you fixed it, please?

Re: Rails 4 + Turbolinks app don't load hubspots client interface, but hard refresh is working

Jaycee_Lewis — Tue, 10 May 2022 18:27:26 GMT

Hey, @StefanMM thanks for the follow-up question. Let's see if @tddrmllrWL has any insight for us on how they worked this out.

Thank you! – Jaycee

Re: Rails 4 + Turbolinks app don't load hubspots client interface, but hard refresh is working

tddrmllrWL — Wed, 11 May 2022 19:48:05 GMT

Huh, that's interesting. I actually haven't changed anything since I originally posted this, so HubSpot may have done something on their end to fix it.

My implementation is done through Google Tag Manager, so it's a little bit more round about, but it ultimately boils down to this:

document.addEventListener('turbo:load', function(event) {
var _hsq = window._hsq = window._hsq || [];

_hsq.push(["identify", {
email: {{user_email}},
firstname: {{user_first_name}},
lastname: {{user_last_name}} }
]);
_hsq.push(['setPath', window.location.pathname]);
_hsq.push(['trackPageView']);
});

Other than that, I unfortunately don't have much insight as to why it's working.

Re: Rails 4 + Turbolinks app don't load hubspots client interface, but hard refresh is working

ZStone1 — Thu, 12 May 2022 10:06:41 GMT

Hi there. This is acutally very helpful. Having the same issue too!

I've implemented hubspot through google tag manager too. I'm interested to know about your setup. Does your hubspot tag in gtm just contain the recommended snippet?


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


Is the event listener implemented on all pages across your site?
document.addEventListener('turbo:load', function(event) {
...
}

Re: Rails 4 + Turbolinks app don't load hubspots client interface, but hard refresh is working

tddrmllrWL — Fri, 13 May 2022 17:05:25 GMT

For the GTM code that goes in the head of my site, I added turbo:load event listener that pushes a custom event to the GTM data layer:

document.addEventListener('turbo:load', function(event) {
dataLayer.push({ 'event':'turbo_load' });
});

Then within GTM I created a custom trigger that hooks into the dataLayer event from above:

And my HubSpot tag in GTM looks like this:

Re: Rails 4 + Turbolinks app don't load hubspots client interface, but hard refresh is working

k4rth1k — Mon, 13 Jun 2022 12:10:42 GMT

For anyone who is still struggling with this, I have found a workaround:
In the rails app,

In head,

At the end of the body tag,