Hotjar on site that uses turbolinks?

Question

Hotjar on site that uses turbolinks?

508 Views Asked by stevec At 04 April 2025 at 10:49

I implemented hotjar as instructed (i.e. copy paste the code below into the page <head>) but the hotjar javascript only appears on the first page visit to the site because it's in the <head> and that means it's only loaded once when turbolinks are on.

Is there any way to leave turbolinks on but have the hotjar script function as expected?

I can see some discussion but no clear resolution

For reference:

    <script>
        (function(h,o,t,j,a,r){
            h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
            h._hjSettings={hjid:2019490,hjsv:6};
            a=o.getElementsByTagName('head')[0];
            r=o.createElement('script');r.async=1;
            r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
            a.appendChild(r);
        })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
    </script>

Original Q&A

There are 3 best solutions below

**FDI** · Answer 1

I believe you could do something like this

<script>
  document.addEventListener("turbolinks:load", function(event) {
    (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:2019490,hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
  })
</script>

to trigger the code on every page load

**Sven Tantau** · Answer 2

Had a similar issue using the newer "turbo" library.

Forcing the injected script tag to have a data-turbo-track="reload" attribute seems to work:

<script>
    (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:123456,hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
    // this seems to do the trick
    r.setAttribute("data-turbo-track","reload")
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>

**Caio Agiani** · Answer 3

Reloading When Assets Change

Turbo Drive can track the URLs of asset elements in from one page to the next and automatically issue a full reload if they change. This ensures that users always have the latest versions of your application’s scripts and styles.

Annotate asset elements with data-turbo-track="reload" and include a version identifier in your asset URLs. The identifier could be a number, a last-modified timestamp, or better, a digest of the asset’s contents, as in the following example.

https://turbo.hotwired.dev/handbook/drive

Add this attribute on script hj: r.setAttribute("data-turbolinks-track","reload");

<script>
  (function(h,o,t,j,a,r){
    h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
    h._hjSettings={hjid:123123,hjsv:6};
    a=o.getElementsByTagName('head')[0];
    r=o.createElement('script');r.async=1;
    r.setAttribute("data-turbolinks-track","reload"); // this is bypass reload turbolink
    r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
    a.appendChild(r);
  })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>

Hotjar on site that uses turbolinks?

There are 3 best solutions below

Related Questions in RUBY-ON-RAILS

Related Questions in RUBY-ON-RAILS-6

Related Questions in TURBOLINKS

Related Questions in HOTJAR

Trending Questions

Popular # Hahtags

Popular Questions