Rails 4 + Turbolinks app don't load hubspots client interface, but hard refresh is working
SOLVE
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.
Rails 4 + Turbolinks app don't load hubspots client interface, but hard refresh is working
SOLVE
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.
Rails 4 + Turbolinks app don't load hubspots client interface, but hard refresh is working
SOLVE
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.
Rails 4 + Turbolinks app don't load hubspots client interface, but hard refresh is working
SOLVE
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:
Rails 4 + Turbolinks app don't load hubspots client interface, but hard refresh is working
SOLVE
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?
<!-- Start of HubSpot Embed Code --> <script type="text/javascript" id="hs-script-loader" async defer src="//js-eu1.hs-scripts.com/{id}.js"></script> <!-- End of HubSpot Embed Code -->
Is the event listener implemented on all pages across your site? document.addEventListener('turbo:load', function(event) { ... }