davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>Google Analytics: A luxury your users are paying for (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f0f0ea">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script type="text/javascript">
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://iainbean.com/posts/2020/google-analytics-a-luxury-your-users-are-paying-for/">

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

<article>
  <header>
    <h1>Google Analytics: A luxury your users are paying for</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil">🏠</a> •
      <a href="https://iainbean.com/posts/2020/google-analytics-a-luxury-your-users-are-paying-for/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <main>
    <p>Since its launch in 2005, Google Analytics (GA) has become so widely used that it now appears on 86% of the top 100,000 websites in the United States. How did it become so popular? For two main reasons: its convenience and its cost. Once you’ve signed up (for free), you can install it by pasting a script tag and four lines of JavaScript into your site’s <span class="small-caps lowercase">HTML</span>. You now have the power to track whenever anyone visits your website, where they came from (both virtually and geographically), what pages they looked at, and for how long they stuck around. But this power doesn’t come for free: you may not be spending any money, but your users are paying in other ways.</p>

<p><picture>
      <source srcset="https://iainbean.com/they-know-what-you-clicked-last-summer_200.webp 200w,https://iainbean.com/they-know-what-you-clicked-last-summer_400.webp 400w,https://iainbean.com/they-know-what-you-clicked-last-summer_800.webp 800w," type="image/webp" sizes="calc(100vw - 2rem)">
      <img src="https://iainbean.com/images/posts/they-know-what-you-clicked-last-summer.jpg" srcset="https://iainbean.com/they-know-what-you-clicked-last-summer_200.jpg 200w,https://iainbean.com/they-know-what-you-clicked-last-summer_400.jpg 400w,https://iainbean.com/they-know-what-you-clicked-last-summer_800.jpg 800w," alt="Graph showing percentage of global page loads tracked by certain companies: Google 64.4%, Facebook 28.8%, Comscore 12.2%, Twitter 11%, Amazon 10.5%, Yandex 8%, Criteo 6.5%, New Relic 5.9%" falsefalsefalsefalse=""/>
    </source></picture></p>
<p>Of course, Google isn’t the only company involved in the analytics business, but they collect more data from more users than anyone else. According to this graphic from 2017, Google were tracking 64.4% of all page loads across the whole web; three years later, that figure is now probably even higher.</p>
<p>After recently deciding to remove all the client-side JavaScript from my own website, I had a decision to make: either stop tracking visitor numbers entirely, or look for an alternative to GA. Fortunately, there are a number of other ways to measure the popularity of my site that have far less (or even zero) impact on end users. In this post, I’ll cover the main problems with GA and explore some alternatives.</p>
<h2>The downsides</h2>
<p>Let’s look at some of the frequently mentioned downsides of using GA and determine their impact:</p>
<h3>It’s not accurate</h3>
<p>A quick search gives me a figure from 2018 of 27% of web users using an ad blocker. A more recent study suggests that this figure is 40% on desktop and 22% on mobile. Some ad blockers such as uBlock origin block all tracking JS by default (including GA) and even those that don’t block GA by default can often be configured to do so. There are now also privacy controls built into browsers like Safari and Firefox which break certain tracking features by disabling <a href="https://blog.mozilla.org/firefox/cross-site-tracking-lets-unpack-that/">cross-site-tracking cookies</a> (these are what allow ads to follow you around the web after you’ve looked at a product). What does this mean for your analytics numbers? It means you’re going to miss a significant amount of visitors and if your site is one with a tech-savvy audience (e.g. a blog about web development), that number is probably even higher.</p>
<p>This one is a definite <strong>yes</strong>: the numbers you get from GA are wrong and it’s difficult to say exactly how wrong they are.</p>
<h3>It’s bad for performance</h3>
<p>If you’re using the method currently recommended by Google to install GA on your site, each of your users will be downloading the gtag.js library which is 34.72kB of  (compressed) JavaScript <em>and</em> analytics.js which is 18.4kB. For comparison, that’s larger than many popular JavaScript libraries including Vue (22.8kB) or jQuery (30.4kB), and over twice as large as the previously recommended method of loading analytics.js on its own.</p>
<p>I’ve seen it argued that this isn’t a big deal because of the way browsers cache files between requests. To confirm whether this assumption is correct, I opened a new incognito window in Chrome, opened the network tab and then navigated to five different websites which I knew used GA: while gtag.js appeared as a 34.72kB download on the first site, and analytics.js showed up as being 18.4kB, for the next four sites both files showed up as '(disk cache)', meaning the locally downloaded version was being used instead. However, Google sets a  <code>Cache-Control max-age</code> header of only two hours for analytics.js and only fifteen minutes for gtag.js, meaning that after that time the version in the cache is invalid and the file must be downloaded again.</p>
<p>There was a time when websites using Google Analytics were unable to score 100/100 on Google’s own PageSpeed benchmark (the predecessor to Lighthouse) because of this short cache period, leading certain performance-minded developers to host the analytics.js library on their own server with a longer cache period. However, this negates the benefit mentioned above, where the file can be cached between different sites.</p>
<p>I’ll mark this one as a <strong>yes, but with the caveat that for some visitors it won’t be an issue</strong>: you’re still forcing those visitors without a cached version to download multiple libraries which provide them with zero perceptible benefits. It’s also worth mentioning that GA often isn’t the only third-party tracking JavaScript installed on a site. A <a href="https://www.pingdom.com/blog/trackers-impact-performance/">2018 study by Pingdom</a>, showed that the average news site loads over <strong>40 trackers</strong> and the impact of all those trackers is an increase in the average page load time of <strong>6.77 seconds</strong>.</p>
<h3>It’s bad for privacy</h3>
<p>By default, GA harvests a wide variety of data from users, including IP addresses, regardless of whether you have your users’ permission to do so. Efforts by governments, like the EU’s General Data Protection Regulation (<span class="small-caps lowercase">GDPR</span>), have attempted to reduce this kind of harvesting of personal information without good reason; but big tech companies are always looking for loopholes which allow them to carry on these practices. If you’ve ever been overwhelmed by the options on a cookie consent dialog, that’s intentional — these are usually designed to either trick you or bore you into sharing more data than you’re comfortable doing, with as many third parties as possible.</p>
<p>Here’s an excerpt from ‘How Google uses information from sites or apps that use our services’:</p>
<blockquote>
<p>Google uses the information shared by sites and apps to deliver our services, maintain and improve them, develop new services, measure the effectiveness of advertising, protect against fraud and abuse, and personalize content and ads you see on Google and on our partners’ sites and apps.</p>
</blockquote>
<p>When you install GA on your site, you’re basically giving Google free rein to use any data they collect for whatever purpose they choose. One of these purposes Google is somewhat open about is 'Ad personalization' — this is where data collected from multiple sources is combined to build an ‘ad profile’ containing your demographic data and interests. This is then used ‘to make your ads more useful for you’. These personalised, ‘more useful’ ads are shown with the aim of increasing conversions (i.e. clicks and sales), based on the idea you’re more likely to engage with something that’s relevant to your interests. A higher conversion rate means Google can charge higher fees to advertisers for the same ad space.</p>
<p>This is another definite <strong>yes</strong>: the negative impact on privacy caused by GA is undeniable and is something you should be open with your visitors about. The Google Analytics Terms of Service include the following line: “You must post a Privacy Policy and that Privacy Policy must provide notice of Your use of cookies…” — if you’re using GA without making this clear in your privacy policy (you <em>do</em> have a privacy policy, right?), you’re not only violating GA’s terms and privacy regulations, but also your users’ trust.</p>
<h2>The alternatives</h2>
<h3>Minimal Analytics</h3>
<p>When Google Analytics runs in the browser it sends tracking events to an <span class="small-caps lowercase">API</span>. This means that you don’t have to use Google’s JavaScript: you can instead write your own or use one of many existing GA-compatible libraries to track only the things you need. A great example of this is the <a href="https://minimalanalytics.com/">Minimal Google Analytics Snippet</a>, a 1.5kB library that is small enough to paste directly into your website’s HTML with no external dependencies. For websites without complex requirements such as AdWords, this is just as effective (if not more effective, as it should load quicker) as gtag.js or analytics.js, but at a fraction of the size.</p>
<p>This mostly solves the potential performance issue, however, even though we’re not using Google’s JavaScript, we’re still sending data to their servers. This does nothing to fix the privacy issue and most ad blockers will be smart enough to intercept these requests.</p>
<h3>Client-side alternatives</h3>
<p>If you want the features of GA but want to make a more ethical choice, there are plenty of offerings which claim to offer better privacy than GA. I won’t cover all of the available options here, but I will recommend <a href="https://nts.strzibny.name/privacy-oriented-alternatives-to-google-analytics/">this post by Josef Strzibny</a> in which he covers both open source and hosted alternatives. These generally have much smaller file sizes and collect far less data than GA, but are still liable to be blocked by ad-blockers.</p>
<p><picture>
      <source srcset="https://iainbean.com/plausible-analytics_200.webp 200w,https://iainbean.com/plausible-analytics_400.webp 400w,https://iainbean.com/plausible-analytics_800.webp 800w,https://iainbean.com/plausible-analytics_1000.webp 1000w,https://iainbean.com/plausible-analytics_1600.webp 1600w," type="image/webp" sizes="calc(100vw - 2rem)">
      <img src="https://iainbean.com/images/posts/plausible-analytics.png" srcset="https://iainbean.com/plausible-analytics_200.png 200w,https://iainbean.com/plausible-analytics_400.png 400w,https://iainbean.com/plausible-analytics_800.png 800w,https://iainbean.com/plausible-analytics_1000.png 1000w,https://iainbean.com/plausible-analytics_1600.png 1600w," alt="A graph from Plausible analytics, showing the number of visitors during each hour of a single day" falsefalsefalsefalse=""/>
    </source></picture></p>
<p>I’ve recently replaced GA with <a href="https://plausible.io/">Plausible</a> on <a href="https://component.gallery/">the Component Gallery</a>: it’s open source, lightweight (835 bytes), it captures the bare minimum of data, and it even comes with a 30 day free trial (after that, it costs $6 a month or $4 if paying annually). I can’t say whether it’s the best privacy-focused client-side analytics service because I haven’t tried them all, but I’d tend to favour those services that have made their code open source over those which haven’t. Open source analytics programs have the benefit that you can choose to host the program yourself without paying a subscription fee. You can also inspect the source code to get a better idea of how much data they’re collecting.</p>
<p>For hosted services I’d be more inclined to choose a service which charges a fee. While no company should be taken at their word without a healthy pinch of scepticism, it’s easier to understand the business model of a service which charges a subscription fee than one that gives it away for free — with a free service, you could be paying with your users’ data. That said, it’s unlikely that any service is doing anything with data on the scale of Google. If you’re strongly against paying a subscription fee for analytics, <a href="https://www.goatcounter.com">GoatCounter</a> offers a free tier (donations recommended, non-commercial use) for up to 100,000 pageviews per month.</p>
<h3>Other sources of analytics data</h3>
<p>Even without client-side analytics, users leave a trail when using the internet: if you make a search using Google, or click a link in a tweet, those platforms are recording that action. No single tool can give you a definitive measurement of how users arrive on your website, but there are still ways you can build up a picture from data that already exists: sites including Google search and Twitter provide a subset of the data they collect for you to use for your own purposes.</p>
<p><picture>
      <source srcset="https://iainbean.com/google-search-console_200.webp 200w,https://iainbean.com/google-search-console_400.webp 400w,https://iainbean.com/google-search-console_800.webp 800w,https://iainbean.com/google-search-console_1000.webp 1000w,https://iainbean.com/google-search-console_1600.webp 1600w," type="image/webp" sizes="calc(100vw - 2rem)">
      <img src="https://iainbean.com/images/posts/google-search-console.png" srcset="https://iainbean.com/google-search-console_200.png 200w,https://iainbean.com/google-search-console_400.png 400w,https://iainbean.com/google-search-console_800.png 800w,https://iainbean.com/google-search-console_1000.png 1000w,https://iainbean.com/google-search-console_1600.png 1600w," alt="A graph from Google Search console showing the number of clicks and impressions for the last 3 months" falsefalsefalsefalse=""/>
    </source></picture></p>
<p><strong>Google Search Console</strong> (shown above) allows you to track the terms used when visitors see your website in search results as well as the proportion of users who saw those links and went on to click them. It also lets you know which pages have been successfully crawled and which caused crawler errors. Unlike with GA, Google already has this data, so I personally don’t see this as anywhere near as harmful as actively collecting more data on Google’s behalf.</p>
<p>Google Search Console isn’t a replacement for analytics, in fact Google push you to link it with your GA account so the datasets from each platform can be combined. But if you don’t want to feed more data into Google’s ad revenue generating machine, using Search Console on its own may be enough to give you a good idea of how users are arriving on your site and what they’re looking for.</p>
<h3>Netlify analytics</h3>
<p>If you’re hosting your website on Netlify you can enable <a href="https://www.netlify.com/products/analytics/">Netlify Analytics</a> for $9 per site, per month. That might sound steep for a service you can get elsewhere for free, but Netlify’s server-side tracking is an entirely different offering from the client-side services previously mentioned:</p>
<ol>
<li>It doesn’t impact <strong>privacy</strong>. If you’ve ever explored the GA sidebar, you’ll have seen that GA collects a baffling array of location, demographic and acquisition data from your site users. GA can collect this because it runs custom JavaScript in the client’s browser. Netlify Analytics data is compiled from server request logs: it can’t use anything other than the data provided to it by regular HTTP requests from the browser.</li>
<li>It doesn’t impact <strong>performance</strong>. All client-side analytics libraries mean forcing extra JavaScript on users when there’s no benefit to them, whereas code running only on the server will have zero impact on users.</li>
</ol>
<p>Compared to GA, the set of features is fairly minimal, but for small sites like my own personal blog, I’ve found it refreshingly simple to find the information I want. All the data for your site is shown on a single dashboard screen including graphs of visitor numbers over time, a list of top pages, and something I’ve found especially useful: a list of resources which returned the most 404 errors (something that server-side analytics is able to handle far better than client-side analytics).</p>
<p><picture>
      <source srcset="https://iainbean.com/netlify-analytics-not-found_200.webp 200w,https://iainbean.com/netlify-analytics-not-found_400.webp 400w,https://iainbean.com/netlify-analytics-not-found_800.webp 800w,https://iainbean.com/netlify-analytics-not-found_1000.webp 1000w,https://iainbean.com/netlify-analytics-not-found_1600.webp 1600w," type="image/webp" sizes="calc(100vw - 2rem)">
      <img src="https://iainbean.com/images/posts/netlify-analytics-not-found.png" srcset="https://iainbean.com/netlify-analytics-not-found_200.png 200w,https://iainbean.com/netlify-analytics-not-found_400.png 400w,https://iainbean.com/netlify-analytics-not-found_800.png 800w,https://iainbean.com/netlify-analytics-not-found_1000.png 1000w,https://iainbean.com/netlify-analytics-not-found_1600.png 1600w," alt="A screenshot from Netlify Analytics showing a list of resources and the number of 404 errors caused by each" falsefalsefalsefalse=""/>
    </source></picture></p>
<p>There are some issues worth pointing out, perhaps the biggest of which is Netlify’s accuracy: compared to GA which seems to generally underestimate visitor numbers, because Netlify uses raw access logs it treats traffic from bots and aggregators (which don’t tend to run JavaScript) the same as genuine users, meaning your visitor numbers are artificially inflated with non-human visitors. While I appreciate how clean and free of configuration Netlify Analytics is, there are some glaring omissions: firstly, I’d like an option to filter out known bots based on user-agent string; I’d also like to see a method for viewing or exporting data older than 30 days — the lack of historical data makes it hard to do any serious data analysis.</p>
<p>If you aren’t using Netlify, there are other server-side analytics but most require some form of subscription fee. If you’re not afraid of some manual set up you could try <a href="https://awstats.sourceforge.io/">AWStats</a>, an open-source program written in Perl, which parses your server log files and builds an interface which you can use to explore your data.</p>
<h2>What if I don’t have a choice?</h2>
<p>Google Analytics is now so common that for many it’s become synonymous with the word, ‘analytics’. If you build websites for clients, chances are they will expect to be able to log in to ‘analytics’ using their Google account and see the familiar reporting interface. You may have other, more pressing battles you’d rather fight with a client: maybe they insist on using animated <span class="small-caps lowercase">GIF</span>s everywhere, or have a brand palette with <em>only</em> inaccessible colour combinations.</p>
<p>I’m not saying this data can’t be used for good: there are plenty of "top 10 benefits of Google Analytics" articles out there explaining how you can use GA data to make targeted improvements to your site. For example, you could try to improve the content on your most visited pages, or if the majority of your visitors are on mobile devices, you can focus your design on smaller screen sizes. If you’ve got to have it, at least use it to make your site better, but if you aren’t using it to drive improvements to your site, you’re better off without it.</p>
<p>I've found that for my own blog, a combination of Google Search Console, Twitter analytics and Netlify analytics provide me with enough information that I haven’t needed to look further. I’m lucky enough to be able to afford the $9/month fee but I understand that many people, including clients, will be hesitant to pay for something they can get for free elsewhere. It isn’t up to me to tell you whether the privacy of your website users is worth money out of your pocket, but I’d encourage you to ask yourself that question.</p>
<p>Google don’t give away analytics for free as an act of kindness: they’re still, primarily, an advertising company and the more data they can feed into their ad-targeting algorithms, the more money they can make from selling ads. By giving up your users’ data <em>voluntarily</em>, you’re doing Google a favour, but doing your users a disservice.</p>
  </main>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil">🏠</a> •
    <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
    <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend>Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script type="text/javascript">
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>