-
Notifications
You must be signed in to change notification settings - Fork 12.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Use localStorage for Google Analytics tracking when available #1444
Comments
Maybe it would be best to just add it to the docs ? Also, ping @mathiasbynens. |
Thanks for optimizing the snipped, David. As @alrra I think we are good with adding it to the docs. |
The credit doesn't belong to me; this was brought to my attention by @elmerbulthuis. Though I wouldn't really consider this an optimization of the snippet itself, per se --- it is more of an optimization of the web as a whole :-p. I wonder how many bytes could be saved, globally, if everyone adopted the |
I’m obviously a big fan of this solution. The only problem with including it by default in the boilerplate is the one @davidmurdoch mentioned: we need to feature-test for |
Something like this: (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
(function(){var a=(function(){var c=new Date,b;try{
localStorage.setItem(c,c);b=localStorage.getItem(c)==c;
localStorage.removeItem(c);return b&&localStorage}catch(d){}}());
ga('create','UA-XXXXX-X',a?{storage:'none',clientId:a.gaId}:{});
ga(function(b){a.gaId=b.get('clientId')});ga('send','pageview')}()); (It uses the It seems to work fine after some quick tests. I’ll create a PR after testing this more extensively. (Help welcome, of course!) |
FYI: this has the potential to save about 33 raw bytes (headers/cookies aren't compressed) per round-trip for each request to the affected domains. @mathiasbynens' current inline-feature-detect solution is 130 compressed bytes∗ larger (obviously this will be different for each unique page, but it gives us a rough idea). So, we should probably see if we can golf this down a bit more. I'd personally like to see the gzipped diff down to a 65 bytes and will give it a shot myself soon. :-) ∗using this deflator: http://www.vervestudios.co/projects/compression-tests/snippet-deflator |
318 GZIPped bytes (our current version is 248 GZIPped bytes): (function(l,e){GoogleAnalyticsObject='ga',(window.ga||(ga=function(l,e){(ga.q=ga.q||[]).push(arguments)})).l=+new Date,l=document.createElement('script'),l.src='//www.google-analytics.com/analytics.js',(e=document.getElementsByTagName('script')[0]).parentNode.insertBefore(l,e);ga('create','UA-XXXXX-X',(function(l,e){try{l=(localStorage[ga.l]=ga.l)==ga.l;localStorage.removeItem(ga.l);return l}catch(l){}}())?{storage:'none',clientId:localStorage.clientId}:{});ga(function(l,e){localStorage.clientId=l.get('clientId')});ga('send','pageview')}()) This isn't tested very well, so I'll still need to do that. But its a start. And unfortunately, the That's all I got for now. :-) |
It just occurred to me we’ve been gzipping the snippet itself, which is kinda pointless. Gzip results depend on the rest of the document (i.e. the HTML source if it’s inlined in a document, or the rest of the JavaScript file if it’s part of one). Maybe comparing gzipped sizes of just the snippet is not the best way to measure this? Your snippet looks nice. Good catch re-using the
If that’s the case, it would be a dealbreaker IMHO. We can replace |
@mathiasbynens GZIPping just the snippet will approximate the minimum byte savings from compression. So it is not entirely a moot point. In nearly all cases, the compression ratio for the snippet will increase as the page size increases. Still need to test! I've added the
Again, this needs lots more testing. |
@davidmurdoch Any updates on the tests yet? Can we write down a test flow for this so others can help test? |
Sorry i've been MIA, I got put on a high-priority, 6 month project and haven't been able to devote much time to anything else. The easiest (and dumbest) way to test this is to just replace your analytics code with this new code and see if you get any odd fluctuations in numbers and browsers versions. I've done this myself and haven't seen anything that sticks out. However, I don't' have many Another way would be to load this experimental analytics script in a generated iframe (so as not to interfere with the stable analytics snippet) and call I can't promise that I can work on a drop-in snippet for testing this any time soon; if someone else wants to take ownership of these ideas while I go back into hiding please go right ahead. :-) |
I've just started a test for http://drublic.github.io/css-modal/. I got 97k page views last months but wildly spread around browser. The numbers:
Let's wait and see. I got the "normal" statistics running in parallel. Apart from that I think the code needs some more updates for readability (80 chars per line and where to insert the identifier). I'll get back to this test in around a week. |
I am a bit early but my findings are pretty stable at the moment. Unfortunately I see big difference in the number of visitors for both accounts. The default implementation shows 2,964 unique visits for March 13th to 17th. There might be three possible reasons:
Currently I don't see any mistakes in my code here: http://drublic.github.io/css-modal/test-gau-localstorage.html (which is the iframe that has been integrated in the site). Also I haven't experienced iframes being blocked by browsers or pages. Has anyone an idea if this might happen? Which leads me to the solution that the local storage GUA snipped has bugs. I have not looked into what the problems might be. Also I'd opt for descoping this from HTML5BP v5.0 and release it with 5.1 if we find a solution. What do you guys think? |
@drublic 👍 (added issue to the v5.1.0 milestone). |
If you're numbers are that off it's probably the fact you have to supply a default clientId when calling https://developers.google.com/analytics/devguides/collection/analyticsjs/domains#disableCookies |
Just blogged about this issue on my site, here: Google Async Analytics using LocalStorage and set up a test page here: http://davidmurdoch.com/google-async-analytics-using-localstorage-test/. Please read, share, and test. (note: if you find any typos or errors on those pages, let me know over on twitter @pxcoach. |
Hey, sorry to get here a little bit late to the party. I work on the Google Analytics team, and I wanted to comment and offer my thoughts on this issue. First of all, I don't think it's a good idea for the H5BP project to recommend a Google Analytics tracking snippet that's functionally different from the officially recommended one. People will probably assume they're the same, and if they're actually not, it'll cause confusion. If the Google Analytics documentation claims GA supports some feature and it doesn't because someone's using a different snippet, that will probably lead to some pretty hard to debug issues (especially if H5BP doesn't make it obvious that the snippets are different). If there's something that GA could do better, we'd love to evolve with the needs of the community rather than diverge from it. (BTW, feel free to ping or cc me on any GA related Github issues.) Anyway, here's the main problem with localStorage and why GA doesn't offer it as the default storage mechanism: localStorage is scoped to That being said, based on this issue and @davidmurdoch's blog post, we're going to try to prioritize building an officially supported localStorage mechanism. Currently the Does this seem reasonable to everyone? |
@philipwalton Thanks for the comment!
|
👍 Please update the issue when this gets added. Thanks! |
@philipwalton, 👍 Excellent news! However, you don't need to try to build it, we already did! :-p (I kid, I kid). I'll go ahead and update my blog post with this news, and create a GitHub repo with the unofficial |
👍 but it also seems like the future web needs some kind of |
@jonathantneal, we had |
@davidmurdoch Thank you so much for opening this issue and digging into it, we sincerely appreciate it! @philipwalton Thanks again for joining the discussion, and like @mathiasbynens said, please keep us updated! |
@davidmurdoch's repository is https://github.com/davidmurdoch/ga-localstorage |
I just published the "Google Analytics using localStorage" script to npm: https://www.npmjs.org/package/ga-localstorage The https://github.com/davidmurdoch/ga-localstorage repo has also been updated with the code. |
Hello, have you read this SO comment? I'd be curious to know what you all think. |
@caesarsol I think that's a really bad idea. As I described in my comment, cookies and localStorage don't have the same restrictions, so swapping them out for every single script that runs on the page is extremely risky. |
hello @philipwalton, thanks for the response but maybe I explained poorly, i was referring to this comment by SO user smhmic:
|
Hmmm, I don't think this is true. There are opt-out features that GA provides (e.g. Chrome extensions) that don't rely on the implementor using cookies. I think the point of this section of the TOS is that you can't create a mechanism by which someone who's using an official "do not track" extension will still be tracked. I can look into it further and I'll update this thread is my assumptions turn out to be false. |
Update: It is not against TOS to use localStorage to store the ClientID; it is now officially supported by Google: https://developers.google.com/analytics/devguides/collection/analyticsjs/cookies-user-id#using_localstorage_to_store_the_client_id Note: if you have to support (extremely) old browsers (like iOS5 and FF4) their example snippet may fail (see: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/storage/localstorage.js). |
TL;DR:
The Source:
http://stackoverflow.com/questions/4502128/convert-google-analytics-cookies-to-local-session-storage/19207035?noredirect=1#19207035
Google Analytics Docs:
https://developers.google.com/analytics/devguides/collection/analyticsjs/domains#disableCookies
We could use
Modernizer.localstorage
to check forlocalStorage
support and fallback to cookies if its not available. Though I'm not sure if we want to lock in Modernizr as a dependency.Why?
Because Google doesn't need to send their cookie to your server for every single request to your domain (or theirs, for that matter).
The text was updated successfully, but these errors were encountered: