Show HN: Minimal Google Analytics Snippet | Hacker News Reader

Show HN: Minimal Google Analytics Snippet

minimalanalytics.com

171 pointsdavidkuennen70 comments

Created this, cause I hated having to slow down my websites by adding the gigantic Google Tag Manager and Analytics libraries, combined with their randomly slow CDN, just to track some basic page views.

Both of Google's recommended methods of adding Analytics to a website load Google's JS library asynchronously[1]. Including it has no meaningful impact a site's time to first paint or interactivity.

There's a good argument to say loading 70Kb of JS you're not using is a bad idea, and if that's the case then your smaller script is an improvement, but there's also a good argument to say Google Analytics is powerful and useful and maybe you should be using the features that those 70Kb give you in order to improve you site in ways the user would notice. I guess it's down to your specific use case.

[1] https://developers.google.com/analytics/devguides/collection...

Really good point and I agree. This was intriguing at first glance because who doesn't want less JS on their site?! Of course! However, missing out on other events being tracked, advanced demographic information(?), and what else?? That's a huge miss - especially if you work with Google Ads and have your Analytics linked. Your ad campaigns won't be as effective and could potentially cost more money to save someone an unknown amount of loading time.

This is pretty creative though.

Wouldn't the 70kb would be most likely already cached too? Which make it even more lightweight than this minimal script.

My firefox never cache anything. Going forth and back in history always reloads the page. That's the reason I have many tabs open - to prevent reloading and waiting.

about.cache says:

Number of entries: 418

Maximum storage size: 30720 KiB

Storage in use: 12698 KiB

Storage disk location: none, only stored in memory

no because expiration of google analytics is really low (30m or 2h i think)

What about defer?

I'm not an expert, just curious... But aren't these files cached on most users computers?

Nothing is ever really cached anymore, meaningfully at least.

We're in an age where websites happily serve up 8mb JavaScript bundles to display their static homepage to a mobile browser that has maybe a couple hundred MB allocated to caching things. Sure, it may be there if you immediately load another page on that site (and the devs aren't using a bundler that serves a different 8mb next time).

But if they leave and come back, they'll get the same full download experience.

For what it's worth, I run a/b tests in my work where I consistently see large caching effects. For example, when we compare an experimental version of something to the currently deployed version it's critical that we cache-bust the control group. And changes that improve caching generally make things significantly better.

Caching effects are much smaller on Safari with its per-domain cache, but even there if something broke caching for us it would be a high priority to fix.

(I work at Google on ad tags)

8mb JavaScript bundles to display their static homepage to a mobile browser that has maybe a couple hundred MB allocated to caching things

Thanks for that. It explains why even on very high-end new phones, switching between complicated web sites in different tabs causes a reload.

AFAIK, GTM is specifically designed that it can only be cached on your website and it expires every 15 minutes.

This is because your UAID is part of the URL to download the GTM snippit.

The old-school analytics.js file can be cached, though.

Someone correct me if this isn't true.

It depends. Browsers that care about user privacy and tracking are moving to first-party-isolated caching. So GA will be cached for a user on your site only if the user has visited _your_ site before.

analytics.js as served by Google is only cached for two hours.

So a browser checks its hash up to 12 times a day for the surfer who never sleeps, no matter how many sites they visit..

If you are that concerned then your page views should be sent from the server side.

Compared to all the other stuff that gets puts on websites these days most sites wont notice.

You're getting downvoted, probably because your comment is whataboutery at best. You're only relevant when you asume someone with a 6Mb homepage is starting with replacing his Analytics code. A usecase that will probably never occur.

Ah you mean 99.99% of the real websites I consult on then - and those are all major brands.

Small piece of history: I used to work on Analytics and they would give out swag. One piece was a T-shirt with the entire tracking snippet on it. It was a great conversation starter.

Sad to see that Tag Manager and the currently tracking JS are big enough to force website owners to compromise.

They are also probably too big to put on a t-shirt !

I doubt it: https://www.litographs.com/collections/t-shirts/genre_shakes...?

It's cool that in also works with SPA frameworks. Thanks for sharing.

In other surveilance news, I've been adding Matomo[1] for web analytics to my site for the first time. Used to be called Piwik? It's free/selfhostable web analytics, which is more than enough for small projects and landing pages.

I've been pleasantly surprised with how it works so far, but I had to write some code to trigger it in the right part of my react-router initialization.

[1] https://permanent.cloud/apps/matomo

(and its cool I'm not helping Google spy on people who visit and help me out)

For the surveillance conscious I can also recommend using Fathom (https://usefathom.com). I’ve been using it for a few weeks now and have only good things to say.

Have you tried Mamoto / Piwik too? I’m thinking of switching to Fathom and I’m not sure if it’s worth the effort.

I haven't tried Mamoto/Piwik, but from the looks of it they look like they have a pretty heavy feature set. If it works for you, I don't see any reason to switch. But if you prefer something that's intentionally low on features and "minimal", Fathom is pretty cool.

Piwik (matomo) is amazing!

I can recommend https://github.com/ankane/ahoy for Rails

While you're at it, why not be less invasive and neuter some of the data you send across? Does Google need to know about screen colordepth, language settings and text encodings, or fine-grained viewport dimensions, or is that stuff just bits of entropy to fingerprint users? Hardcode it!

Added options for the information you want to track.

The snippet seems to circumvent the Google Analytics Opt-out Browser Add-on which many sites mention as a way to disable GA tracking in their privacy policy. So if you use the snippet, don't tell your users that they can opt out with the add-on.

Are you sure it circumvents it? My uBlock Origin is still properly blocking the API call to google analytics. But since the Add-on is from Google itself it could work in different ways indeed.

Yes, the add-on seems to work differently. I suspect that analytics.js somehow checks for its presence and stops collecting data if it was found.

If someone finds out whatever global variable that add on sets I could add it.

It creates a small inline script with this code:

    window["_gaUserPrefs"] = { ioo : function() { return true; } }

I used CRX Viewer extension by Rob Wu[1] to just look up the extension code in Chrome store.

[1] https://github.com/Rob--W/crxviewer#chrome-extension-source-...

Could you make it a tiny bit smaller by aliasing `window` and `document` and `localStorage` to remove the duplicated calls? `var w=window;var d=document;var l=localStorage;`

Interstingly, copying/pasting the code into https://www.minifier.org/ gains 69b of savings, but https://jscompress.com/ shows an error: `Invalid regular expression: /+/: Nothing to repeat (line: 3, col: 48)`

https://closure-compiler.appspot.com/ shaves off 9% w/ no errors

Wouldn't gzip encoding (apache/nginx/whatever is used today) compress that anyway?

Very cool, thank you!

Would you expect Google's API to change often? My biggest concern with something like this is their /collect endpoint changing and analytics data stops being tracked.

It's officially documented here: https://developers.google.com/analytics/devguides/collection...

So I think they won't change it or just add a different version with the old version still working.

Can you include this?

ga('set', 'anonymizeIp', true);

Will add an option for that as soon as I'm home. Also got many feature requests for exposing an event function. Both of these things shouldn't add any significant size to the snippet.

Should be as simple as adding `aip:1` to the parameter list (the `var j={...}` part).

You can now give the option to anonymize ips. It's also default true.

I get a SyntaxError when embedding it:

> SyntaxError: nothing to repeat

The line seems to be this:

> return l?l[2]?decodeURIComponent(l[2].replace(/+/g,' ')):void 0:void 0},

Might it be related to AdBlock? I'm using Firefox with AdBlockPlus, Cookiebro and the default Privacy settings turned up in Firefox.

Edit: oops, it's clearly coming from the regex: /+/g → /\+/g

https://stackoverflow.com/a/6288596

Thanks for sharing! Will look into it.

See the edit, I found the bug and the solution :)

Great! Thanks.

Is now fixed.

You can also pretty reasonably remove "colorDepth:true", I can not possibly imagine you have many indexed or RGB545 displays going to your site these days.

Isn't the tag manager and analytics library likely to be cached, thus using zero bytes on average versus the non-zero number of bytes for this library?

A quick check, GTM is only cached for 15mins.

If users spend a bit of time navigating your site, you might get better caching by adding this to your JS file and caching for longer.

That only means it needs to check if there's a new version every 15 minutes though (e.g. by file hash or modification date), not that it has to download it again even if there's no changes every 15 minutes. I haven't looked into the cache settings though.

GTM used to load async, but they wanted to support A/B testing.. If you aren't using A/B testing then you would get perfectly good performance by using the older GTM snippet, it will just continue to use bandwidth at these 15 minute intervals. Even then it probably will only test the hash to see if the container changed..

This seems to me like one real problem that is pretty trivial to fix leading to a lot of over tuning for some kind of ideal.. and then being stuck if you need to support anything else.

Now I am intrigued to make a minimal snippet that creates a histogram of loading times.

Thank you all for your great feedback. I made some improvements based on that.

Now using navigator.sendBeacon if available (not even GA does that by default yet), ability to track events and ability to track exceptions.

All of that by keeping it tiny.

When I see the hoops people have to jump through to get basic privacy from Google, it makes me happy that my company's legal department prohibits us from using Google products for HIPAA reasons.

Slight tangent: What's folks' feeling about GTM vs Tealium or Segment?

could you create github repo?

Have now added the original Snippet Code as GitHub gist to the website.

Sure! Will do so as soon as I'm home.

Is there a reason you are not using the beacon API for this work?

Didn't know about it until now. Will look into it, thanks!

Note that Google Analytics has an option to use the Beacon API, somewhere in it. Re-using that might save you some work.

Any chance to put this in a web worker ?

First impulse: "That sounds like a great way to get your GA account banned for using their API in undocumented ways."

They have it documented here: https://developers.google.com/analytics/devguides/collection...

So I think it's a totally legit way to use GA, since you don't always have the ability to add libraries. For example if you want to track GA server side.

GA has had an open tracking API for a while, it’s what powers tracking inside mobile apps, custom events, server side tracking etc.

FYI: On your site you use snipped, you may want to consider using the word snippet instead.

https://en.wikipedia.org/wiki/Snippet_(programming)

Fixed it. Thank you.

Reply on news.ycombinator.com