No more cookies 🍪 and comments available (if you want them)

Cookie banners suck, and a lot of websites do them very badly. When I launched unravelled.dev I included Google Analytics since I wanted to know what posts were the most read, you know to give me an indication of what my audience was most interested in. However given that this is a developer centric blog I suspect that a good amount of visitors have browser based ad blockers or use something like NextDNS to block analytics from being collected.

No need for Google Analytics

Since moving my DNS over to Cloudflare I get some basic analytics for free, because they are serving up the requests they know what the popular pages are and aren’t. This means that I can remove Google Analytics along with the tracking cookie. The Cloudflare stats can tell me the things I want to know, namely what has been viewed, refers and country, all without a tracking cookie.

Disqus for comments

When I blogged regularly at Wordpress I had a reasonable amount of engagement through the comments, people would ask questions or link to related content etc. I started to look into options for adding comments to my Hugo blog and Disqus seemed like the one that is most popular. It was very easy to integrate, as the Hugo template I’m using already supported it. However, adding the Disqus javascript snippet meant that a cookie would be stored without asking the visitor to opt in 😬

Disqus opt in

Introducing the Disqus opt in, now at the bottom of each post you will see the following

Instead of blindly loading Disqus you will be asked to opt in, this in turn will set a cookie to remember your preference, and then load Disqus going forward.

It was very easy to update the Hugo theme to ask users to opt in, updating the comment.html partial with the following snippet (or take a look on GitHub for the full context).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

{{- if $disqus.enable -}}
    <div id="disqus-alert" style="border: 2px dashed #FF475C; border-radius: 15px; padding: 10px">
        <h2 style="text-align: center;">🍪 I use Disqus for comments</h2>
        <p style="text-align: center;">Because Disqus requires cookies this site doesn't automatically load comments.</p>
        <p style="text-align: center; text-decoration:underline;color: #2d96bd">
        <a href="#comments" onclick=loadDisqus()>I don't mind about cookies - Show me the comments from now on (and set a cookie to remember my preference)</a></p>
    </div>
    <div id="disqus_thread" class="comment"></div>
    <script>
        function loadDisqus() {
            document.cookie = "disqus=optedin; expires=Thu, 18 Dec 2022 12:00:00 UTC";
            var elm = document.getElementById("disqus-alert");
            elm.style.display = "none";
            let disqusJs = document.createElement("script");
            let disqusUri = "https://{{- $disqus.shortname -}}.disqus.com/embed.js";
            disqusJs.setAttribute("src", disqusUri);
            document.body.appendChild(disqusJs);
        }
        if (document.cookie.indexOf("disqus=optedin") >= 0) { loadDisqus(); }
    </script>
{{- end -}}

So go ahead, leave a comment and let me know what you think 😃