I build most of my websites with Server-Side Rendered (SSR) HTML generated via F# and Giraffe.ViewEngine (an HTML DSL). I use Fathom Analytics to get cheap, effective analytics across my dozens of side projects.

In this post we'll dive into how I combine the two to get analytics in my F#-generated websites.

Sign up for Fathom Analytics with my referral link and get a $10 credit: $10 Credit for Fathom Analytics

How I Build Websites with F# + Giraffe.ViewEngine

Over the past few years I've moved to building websites with SSR HTML. I found HTML DSLs like Giraffe.ViewEngine to make this process faster and safer as it allowed me to leverage the power of the F# type system.

Generally my tech stack is:

• Frontend: SSR HTML (via F# + Giraffe.ViewEngine)
• Backend: F# + Giraffe
• DB: Postgres

You can learn more about my current stack in The HAM Stack - A Simple Scalable Tech Stack for building modern web apps fast and cheap

I build my sites like a Multi-Page Application (MPA):

• Request comes in
• My code generates HTML (base layout, then page, then components)
• HTML sent to client where it is loaded in browser

From there I may sprinkle in a little HTMX / Alpine if I want more dynamism.

You can learn more about how I build sites like this in:

• Server-side HTML Rendering with F# and Giraffe.ViewEngine
• Simple Interactive Islands with F# and HTMX
• HTMX vs AlpineJS - Which should you use for your web app?

Adding Fathom Analytics to your Website

Fathom Analytics (referral) is a lightweight analytics tool. You add base analytics to your site by including the Fathom JS payload in your HTML header - this will load itself on your web page, gather some data about the session, and send that off to Fathom's backend servers.

The script tag looks like this:

<script src="https://cdn.usefathom.com/script.js" data-site="YOUR_SITE_ID" defer></script>

You can learn more about Fathom in:

• How I Gather Web Analytics for my 8 side projects for $15/month
• Fathom Analytics - Dashboard Walkthrough

How to use Fathom Analytics with F# + Giraffe.ViewEngine

So now we know how I build websites and how you use Fathom Analytics - we just need to combine the two. F# + Giraffe.ViewEngine builds SSR HTML so to use Fathom we just need to translate the Fathom Analytics script into the Giraffe.ViewEngine DSL. You could also just insert the Fathom script raw but that kinda defeats the purpose of having a type-safe, composable HTML DSL so I like to avoid that.

This script looks like:

script [
    _src "https://cdn.usefathom.com/script.js"
    (attr "data-site" "YOUR_SITE_ID")
    _defer
] []

This is exactly how I generate the Fathom Analytics script embed for this website.

Next

I've enjoyed building little websites with SSR HTML and generating it with F# + Giraffe.ViewEngine. Hopefully this helps you build your next site a little faster and easier.

Q: How are you gathering analytics for your websites? What tech stack are you using to build it?

If you liked this post you might also like:

• How I Gather Web Analytics for my 8 side projects for $15/month
• Server-side HTML Rendering with F# and Giraffe.ViewEngine
• The HAM Stack - A Simple Scalable Tech Stack for building modern web apps fast and cheap