How to add analytics code to your site

Help Customization
1

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.

8 Likes
2

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!

3

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
4

hello everyone
i’ve searched high and low but this is the only info i can find on how to add analytics code.
i use counter.dev
i tried adding the supplied code (which is supposed be in the section) to the custom javascript section but of course it doesn’t work.
can anyone help?
many thanks!
this is the code
<script>if(!sessionStorage.getItem("_swa")&&document.referrer.indexOf(location.protocol+"//"+location.host)!== 0){fetch("https://counter.dev/track?"+new URLSearchParams({referrer:document.referrer,screen:screen.width+"x"+screen.height,user:"xxxxx",utcoffset:"1"}))};sessionStorage.setItem("_swa","1");</script>

6

Certainly. Your code needs to be simplified. Enter it like this:

if(!sessionStorage.getItem("_swa")&&document.referrer.indexOf(location.protocol+"//"+location.host)!== 0){fetch("https://counter.dev/track?"+new URLSearchParams({referrer:document.referrer,screen:screen.width+"x"+screen.height,user:"XXXXX",utcoffset:"2"}))}sessionStorage.setItem("_swa","1");
1 Like
7

it works! thank you so much! :sunny:

1 Like
8

quick additional question : is this supposed to add the tracker code into the of every individual post on my blog or only on the index page?

9

In every single post on your blog. Obviously the code must be inserted in the JavaScript section in the general customization settings of writer.as. (I’m using Counter.dev too)

10

thanks. as i thought, but i know i am getting hits direct to individual posts (i can see them on the post’s page) but they are not showing up on the counter.dev dashboard. could the other custom javascripts i have running be interfering? for example i run
var x = document.querySelector('footer nav'); etc as well…

11

By inserting the code in the Javascript customization section, this code will be displayed in every single post. However, the problem seems to be really only with counter dev. Being new, it is not as complete as Google Analytics so it seems that it limits itself to monitoring almost exclusively the homepage with respect to the posts.

I recommend that you insert the Google Analytics script by replacing your ID

var gtagJs = document.createElement("script");
gtagJs.src = 'https://www.googletagmanager.com/gtag/js?id=YOUR ID';
gtagJs.async = true;
document.head.appendChild(gtagJs);
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'YOUR ID');
12

i liked counter.dev because it is not google but that seems like a serious limitation! maybe i will write to them :slightly_smiling_face:

1 Like
13

I’m sorry for dredging up an old topic, but I self-host Fathom.

Excuse the stupid question: is the correct url the https://cdn.fathom or should it be to the .js url my self-hosted script uses.

Here is the script code my Fathom install gives me.

<!-- Fathom - simple website analytics         https://github.com/usefathom/fathom -->
  <script>
   (function(f, a, t, h, o, m){
a[h]=a[h]||function(){
	(a[h].q=a[h].q||[]).push(arguments)
};
o=f.createElement('script'),
m=f.getElementsByTagName('script')[0];
o.async=1; o.src=t; o.id='fathom-script';
m.parentNode.insertBefore(o,m)
    })(document, window,               
    '//fathom.muttering.me/tracker.js', 'fathom');
    fathom('set', 'siteId', 'ATTRF');
     fathom('trackPageview');
     </script>
      <!-- / Fathom -->

I know, I know… :stuck_out_tongue:

14

Apologies for reviving this old topic. Could anyone please help me integrate:

and

Thanks!

15

Hi, it’s the Javascript code your self-hosted Fathom server uses. If you didn’t register on usefathom.com your infrastructure has zero dependency upon this particular server and if Fathom is free software then you’ll be able to use the code you’ve downloaded on your own server for as long as it will stay compatible with the broader tech stacks you’ll be using.

In other words, if Fathom is fully free software and self-contained then there’s zero reason to link to their own flagship server at all. Use your own FQDN (server link) whenever you need to “use Fathom”.

16

So I’m digging up this topic again because apparently the write.as Javascript parser rejects this one. It more or less cowardly, but politely tells me that my Javascript data form isn’t valid.

Here’s the Javascript code I’m giving it:

const script = document.createElement('script');
script.setAttribute('defer', true);
script.setAttribute('src', 'https://plausible.io/js/script.js');
script.setAttribute('data-site', 'anra.example');
document.head.appendChild(script);

I’ve only edited the src and data-site script attributes so I guess there was an update in the WriteFreely code base breaking compatibility with this workaround.