How to add analytics code to your site

Hello folks!

Pretty new in this community but loving it so far. I found Write.as is the easiest way I found to set up a blog that also has code syntax highlighting which is huge for me since I like writing coding tutorials.

To give thanks I have a small contribution. I wanted to add analytics to my blog, I use Fathom Analytics and they only give you a code snippet with a script tag like this:

<!-- Fathom - beautiful, simple website analytics -->
<script src="https://cdn.usefathom.com/script.js" data-site="WHATEVER" defer></script>
<!-- / Fathom -->

But this doesn’t work in write.as because the Custom Javascript section only allows pure javascript there, not HTML.

So, being a developer like I am, I just converted that above snippet intro vanilla JS, it turned out like this:

const script = document.createElement('script');
script.setAttribute('defer', true);
script.setAttribute('src', 'https://cdn.usefathom.com/script.js');
script.setAttribute('data-site', 'YOUR_SITE_ID_HERE');
document.head.appendChild(script);

You can also do this with CSS if you want to add fonts, for example I added a Google font like this earlier today:

const font = document.createElement('link');
font.setAttribute('rel', 'stylesheet')
font.setAttribute('href', 'https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&family=IBM+Plex+Sans:wght@400;700&family=IBM+Plex+Serif:wght@700&display=swap')
document.head.appendChild(font);

I have tested it on my end and it works! Maybe it can help someone else :slightly_smiling_face:.

FOR MODS: Let me know if this post should be into another category and I’ll be happy to move it, I looked over all the available topics but I didn’t find anything that fit, that’s why I put it here.

4 Likes

This is awesome @vivgui! Thanks for posting about this. There are a lot of people who want to add custom analytics to their blog so this will be a welcome resource.

I just moved the topic to Customization if that’s alright with you. We also have a massive topic going about customizations people are making to their blogs on Write.as. Feel free to put anything there too. Here’s the topic: Share what you are working on and using!

Welcome to the community and thanks again for the contribution. Can’t wait to see what other stuff you’ll come up with and feel free to reach out to any of us if you need anything!

Awesome, thanks @cjeller1592 for directing me here! I have a couple more tutorial ideas for write.as so I’m happy to contribute more :slightly_smiling_face:.

2 Likes