Comments (9)
@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.
Maybe @rmarescu @michellekaye @jdibella could give their input since they seem to be in the contributor list! 🍻
from turbolinks-compatibility.
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.
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.
@jdibella or simply add it in the <body>
without data-turbolinks-eval
?
from turbolinks-compatibility.
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.
@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.
@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.
thanks @allaire
from turbolinks-compatibility.
Related Issues (20)
- Turbolinks not working with google ads or LiveHelpNow
- Google Tag Manager HOT 5
- Facebook like/share button still disappearing HOT 1
- Marketo munchkin tracker integration request
- Integration with Google TagManager HOT 4
- Happyfox Chat loading problem after language change HOT 4
- Can't find a way to change Facebook language HOT 1
- Loading Javascripts Problem HOT 1
- React Native HOT 1
- Turbolinks 5 compatibility HOT 8
- Should the solutions propose both coffee script and standart js version?
- Segment.com HOT 1
- Olark Hummingbird theme
- New Sharethis implementation and Turbolinks' incompatibility HOT 3
- owlCarousel not Loaded
- Zendesk old and new tab displayed HOT 2
- Turbolink 5 and Google DFP not working
- LiveZilla Compatability
- Using the Freshdesk/Freshdesk Widget with Turbolinks HOT 4
- SaleForce Widget with turbolinks
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from turbolinks-compatibility.