Jekyll Migration From WordPress - What about the stats?!
Recently I migrated my blog off of WordPress hosting and over to static sites generated from Markdown files, hosted on GitHub Pages.
In migrating from Wordpress.com hosting, I noticed that there wasnāt any great one step solution for the āWordPress Statsā info I got from WordPressā JetPack Service. In this post, Iāll show you exactly how I recreated both the utility AND more importantly the Vanity I got from WordPress Stats (the later to satisfy my ego!)
Post Outline
- What were WordPress Stats?
- Finding a way to satisfy my ego
- Automatically adding it below posts in Jekyll
- How does this compare to Google Analytics?
What are WordPress Stats
If youāre a long time reader of blogs but donāt blog on your own, you might never have paid much attention to little widgets like these on the sites you visit.
But believe me, the authors of those sites definitely know what Iām talking about.
What does it do? Well, it might be a little bit old school but it just keeps track of the page loads of a site. If someone comes and visits an article, then clicks to see some more in the series and ends up looking at four other articles, it would tick up five more times.
If you host your blog on WordPress, one of the nifty features you can enable is a Plugin called JetPack which gives you a number of cool features, one of which is the stat tracker I showed above.
Unfortunately if you migrate away from WordPressā¦you canāt bring it with you.
>Why do you even need this though?
Can we just hack this into place?
Or can we?? I originally looked at monitoring to see if the request to the WordPress.com hosted site had an obvious method toā¦extract the call to the API used to track hits to the site.
Unfortunately, stats seem to be tracked as part of the page load request, and not a separate API call.
Furthermore, while their API does allow you to query the current traffic stats and milestones, they do not allow you to increment the hits with a simple call that I could find.
This didnāt stop me though, I needed a way to see my pretty numbers counting up!
Finding a way to satisfy my ego
All I really needed was an API that could increment simply. I thought of writing my own dotnet core app, as Iāve done a bunch of times, like when I wrote a Game of Throne Deathpool site with logons and passwords, or when I wrote a simple app to check the UV levels of a given day (needed because of my ghastly palor, due to being a redhead).
But thenā¦I got lazy.
My normal level of energy on a given day
So I hunted for an easy peasey API, and found a great one in countapi.xyz
All you do with this API is register your new counter with an optional reset / control code and then trigger a Get request to increment and retrieve the new value!
So to create a new tracker for a site called mysite.com
and then set its starting value at 42, weād run:
GET https://api.countapi.xyz/create?namespace=mysite.com&value=42
ā 200 {"namespace":"mysite.com", "key":"33606dbe-4800-4228-b042-5c0fb8ec8f08", "value":42}
And then, after that, we only need to run a new get request to see that weāre up and running.
Invoke-RestMethod "https://api.countapi.xyz/hit/foxdeployhits"
>2075540
Getting it working in JavaScript
Now I have a mechanism to track my hits, I just need to actually trigger this when the page is loaded. This needs to happen client side (which sadly means I lose tracking and counts if the user has JavaScript disabled or very strict settings, c`est la vie).
Automatically adding it to posts in Jekyll
This was really easy. My blog theme, Bulma-Clean-Theme already had a look and feel I liked from my site on WordPress foxdeploy.wordpress.com, so with a minimal amount of configuration, I had something that felt familiar.
It even had a great sidebar function, provided via a file called Latest-Posts.html
. Hereās mine if you want to see what it looks like:
when someone looks at my source code
Adding a new node here to mimic the āPage Statsā feature was very easy, just adding a new div with the right class.
<div class="card" style="padding-top:20px;">
<header class="card-header">
<div class="card-header-title">Blog Stats</a>
</header>
<div class="card-content">
<div class="content">
<div id='blogHits'></div>
</div>
</div>
</div>
Note: Pay special attention to the currently empty div called blogHits above, for now it will be empty but weāll use this as an anchor to inject a value in just a moment!
Now to reload and see how it shows upā¦
I can trigger a http request when this element is loaded by adding a bit of JS, like this:
<Script>
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.countapi.xyz/hit/foxdeployhits");
xhr.responseType = "json";
xhr.onload = function() {
document.getElementById('blogHits').innerText = this.response.value + ' hits';
console.log("total hits " + this.response.value);
}
xhr.send();
</Script>
With this code, we prepare a GET request over to countapi.xyz, and then onload (when we have a response), we scan the document object model (the DOM, a code based interpretation of the current webpage, which feels very familiar coming from PowerShell) to find the empty div we setup earlier.
This works BUTā¦.the number is uggo.
Fortunately JavaScript has approximate 857,3028,237 different built in formatting tools, and I can make use of the convenient .toLocaleString('en')
utility to transpose strings into different formats. Because Iām Anglo-centric, I have chose the right way to do it, using comma separators. Sorry if you like other format types!
With this in placeā¦
How does this compare to Google Analytics?
Frankly, Google Analytics gives me INCREDIBLE amounts of data and is dramatically far and away much, much better than what I had before with WordPress stats. It even has a load of tools to show me ways I can improve the site, like Accessibility and page loads.
I did a lot of work transcribing Accessibility and alt tags onto images, and now have a much better layout for keyboard navigation, and now no longer have screen shots of code, and the site loads much faster.
All of these issues were surfaced to me by Google Analytics, which is frankly the bomb, and I will probably write a blog post about it later on!
Wrapping up
Did you like this post? Are you interested in what it took to migrate my site from WordPress over to GitHub pages? Youāre in luck, I have some more posts planned for that topic! Leave me a message below and lemme know!
š¦ - Shout out to Chris for the excellent Bulma Clean Theme
š¦ - Shout out to this blog post by Rohit from Eyehunts for the tip on how to format numbers in a way that makes me happy.