Comments (6)
After implementing Google Analytics support in my own app, I believe the strategy mentioned here is superior: https://coderwall.com/p/ypzfdw
If you simply put the standard google analytics script in the document head (NOT the body tag, as you currently recommend), you will get two pageviews recorded on a non-turbolinks page load: one pageview is recorded by the standard Google Analytics script, and another is recorded by the page:change event handler, which is called on that initial page load.
The best approach is this:
-
Put a modified version of the google analytics initialization code in your document head -- modify it to not actually track the pageview.
-
In your document body, put this script tag: <script>_gaq.push(['_trackPageview']);</script>
-
Since the script tag in the body won't be executed when a page is reloaded from the turbolinks cache, add a page:restore handler:
$(document).on 'page:restore', ->
if window._gaq?
_gaq.push ['_trackPageview']
else if window.pageTracker?
pageTracker._trackPageview()
from turbolinks-compatibility.
I actually didn't come up with the GA solution that's posted. @shukydvir did, and it appears that since then he has put together a gem for it. Take a look at the code and let me know if it works.
shukydvir/google-analytics-turbolinks
from turbolinks-compatibility.
Hi Nick. That gem works for tracking pageviews on turbolinks pages, but
with a couple of problems:
-
You need to initialize Google Analytics in the document head -- the gem
doesn't include that. If you use the standard Google Analytics
initialization code, you'll get two pageviews on the first page loaded --
one from the Google Analytics code, and one from the page:change callback
in the gem. -
If you modify the Google Analytics initialization code to not record a
pageview, then pageviews will only be recorded on turbolinks-capable
browsers. This is a problem for people like me who are using Turbolinks but
need it to gracefully degrade on older browsers like IE8/9.
Would you like me to submit a pull request for that page that explains the
alternative approach I used, and also the tradeoffs of using that gem? I'd
be happy to do it.
Regardless, the first line on the page is wrong -- you want to move your
javascript from the body to the head with Turbolinks, not the other way
around.
Best,
Jon
On Tue, Dec 3, 2013 at 9:35 PM, Nick Reed [email protected] wrote:
I actually didn't come up with the GA solution that's posted. @shukydvirhttps://github.com/shukydvirdid, and it appears that since then he has put together a gem for it. Take
a look at the code and let me know if it works.shukydvir/google-analytics-turbolinkshttps://github.com/shukydvir/google-analytics-turbolinks/blob/master/lib/assets/javascripts/google-analytics-turbolinks.js.coffee
—
Reply to this email directly or view it on GitHubhttps://github.com//issues/19#issuecomment-29780872
.
from turbolinks-compatibility.
If you use Turbolinks 2.0.0, which we just released today, page:change
will fire on DOMContentLoaded, so it will gracefully degrade on unsupported browsers. So the correct solution could be:
- Put a modified version of the google analytics initialization code in your document head -- modify it to not actually track the pageview.
- Add this snippet inside the head:
trackPageView = ->
if window.ga?
ga 'set', 'location', document.location.href.split('#')[0]
ga 'send', 'pageview'
else if window._gaq?
_gaq.push ['_trackPageview']
else if window.pageTracker?
pageTracker._trackPageview()
# For Turbolinks 2.0.0
$(document).on 'page:change', trackPageView
# For Turbolinks < 2.0.0
$ ->
trackPageView()
$(document).on 'page:change', trackPageView
How does that look? If you agree and would like to submit a PR for it, be my guest.
from turbolinks-compatibility.
This is the full solution I came up with. https://gist.github.com/jonwolfe/7897610
The key thing was to test if Turbolinks is initialized and supported before installing the page:change callback. If TL is not supported or is undefined, just track the pageview immediately.
from turbolinks-compatibility.
Cool. Are you still wanting to submit a pull request to update the site with your solution?
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.