GithubHelp home page GithubHelp logo

Comments (9)

allaire avatar allaire commented on July 18, 2024 2

@rmarescu This makes total sense, thanks!

I'm also about to integrate another tracking code (HotJar: http://inside.hotjar.com/support/solutions/articles/1000125978-installing-hotjar-on-your-website-manually).

Do you have any tips to detect how I should integrate this particular code with Turbolinks? Currently I integrated it just like Google Analytics (under the <body tag, with <script data-turbolinks-eval="false">), like this:

<script data-turbolinks-eval="false">
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXX-2', 'auto');
</script>
<script>
  ga('set', 'location', location.href.split('#')[0]);
  ga('send', 'pageview', { "title": document.title });
</script>

<!-- Hotjar Tracking Code for www.site.com -->
<script data-turbolinks-eval="false">
    (function(f,b){
        var c;
        f.hj=f.hj||function(){(f.hj.q=f.hj.q||[]).push(arguments)};
        f._hjSettings={hjid:12345, hjsv:4};
        c=b.createElement("script");c.async=1;
        c.src="//static.hotjar.com/c/hotjar-"+f._hjSettings.hjid+".js?sv="+f._hjSettings.hjsv;
        b.getElementsByTagName("head")[0].appendChild(c);
    })(window,document);
</script>

from turbolinks-compatibility.

allaire avatar allaire commented on July 18, 2024

Maybe @rmarescu @michellekaye @jdibella could give their input since they seem to be in the contributor list! 🍻

from turbolinks-compatibility.

rmarescu avatar rmarescu commented on July 18, 2024

With Turbolinks, the page is loaded once, and only the body and page title are changed on subsequent requests.

I believe you should be able to move the first script tag from the solution to <head> section (no need for data-turbolinks-eval attribute anymore), but you must keep the set and send in the body, so that are triggered with every request (haven't tested it though).
So it would look something like this:

<!doctype html>
<html>
  <head>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-123456-1', 'auto');
    </script>
  </head>
  <body>
    <script>
      ga('set', 'location', location.href.split('#')[0]);
      ga('send', 'pageview', { "title": document.title });
    </script>
  </body>
</html>

The reason why the solution recommends keeping both in <body> is for integration purposes (you don't have to split up your code into multiple partials or complicate your logic)
Google recommends having it in the <head> for better tracking in some situations.

Having it just below <body> tag when using Turbolinks I think is a good compromise.

from turbolinks-compatibility.

jdibella avatar jdibella commented on July 18, 2024

The HotJar implementation appears to be inserting a <script> tag element into the document head to do tracking, so the tracking code script insertion will execute once with the data-turbolinks-eval attribute set. Since the contents of the <head> tag are not refreshed on page load, if the actual HotJar implementation requires the inserted script tag to be executed on every page request, you won't see expected results.

If the script tag needs to be executed for every page request, you'd need to check if the inserted <script> tag is present in the the <head>, remove it, and re-add it, to force script execution on every page.

from turbolinks-compatibility.

allaire avatar allaire commented on July 18, 2024

@jdibella or simply add it in the <body> without data-turbolinks-eval ?

from turbolinks-compatibility.

jdibella avatar jdibella commented on July 18, 2024

The danger there is that it would add another <script> tag to the head on every page request. If a user visits 3 pages, that would result in 3 <script> tags being present in the document <head>. Depending on how the HotJar implemention is written, this could produce conflicts.

from turbolinks-compatibility.

bitcoder avatar bitcoder commented on July 18, 2024

@jdibella and @allaire , so what you suggest on this?
i'm adding it to the body but i'm not sure if it messes due to inserting the same script reference in the head more than once...

from turbolinks-compatibility.

allaire avatar allaire commented on July 18, 2024

@bitcoder Hey,

I'm adding it inside the <body> as well with a data-turbolinks-eval="false" on the google <script> tag.

Have a nice day

from turbolinks-compatibility.

bitcoder avatar bitcoder commented on July 18, 2024

thanks @allaire

from turbolinks-compatibility.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.