I want to use analytics on my page for a long time. But using Google Analytics was a no go for me because of its’ privacy issues. So I looked out for privacy focused analytics software very early. Especially cookie-less analytics were something is something that I want to use. I don't like those cookie banners, so having a solution without one would be a great thing.Simple Analytics andFathom Analytics were solutions I liked. Both are bootstrapped indie companies which is something I value very much.

Simple Analytics is available in theGitHub education pack. It is possible to use it as a student for free for 1 year. So today was the day where I blocked the time to implement it on myGatbsyJS blog. In the following I will talk about how easy it is to add it to a GatsbyJS page.

Installation

First you have to create an account with Simple Analytics. When you already have an account log into it.
When you don't have a website added yet you will be redirected to the page where you can add one. Otherwise go to your dashboard and click on theAdd website button. Then create add your website’s URL and hit theAdd website button below the form.

To now add thescript tags that are required to make the analytics work at the end of yourbody tag open up thegatsby-ssr.js file or create it in your Gatsby root directory. Inside of the file add the following lines:

exportconstonRenderBody=({setPostBodyComponents})=>{setPostBodyComponents([<scriptasyncdefersrc="https://scripts.simpleanalyticscdn.com/latest.js"/>,<noscript><imgsrc="https://queue.simpleanalyticscdn.com/noscript.gif"alt=""/></noscript>])}

setPostBodyComponents will add the content of the array at the end of thebody in thehtml.js file created by GatsbyJS.

After that you can check if your page is able to build. If successful you can push your page to production. After finishing the GatsbyJS build and pushing it to the web, Simple Analytics will find your page automatically and will present you your website's dashboard. That's it. You successfully added Simple Analytics to your GatsbyJS site.

Thank you for reading,
Niklas