๐พ Archived View for m0yng.uk โบ 2020 โบ 10 โบ A-simple-hit-counter captured on 2024-08-18 at 17:22:34. Gemini links have been rewritten to link to archived content
โฌ ๏ธ Previous capture (2024-08-18)
โก๏ธ Next capture (2024-08-31)
-=-=-=-=-=-=-
Created 2020-10-01
I don't have any analytics on this site, but it would still be nice to know if anyone is looking... and something reminded me of the hit counters we used to have back on the old web.
They were almost always a graphic which showed a number that increased every time that image was loaded, I don't think I ever made one so I'm not sure how exactly they worked.
I wondered if I could combine a bit of PHP, with a JSON file, some SVG, and good old HTTP headers to make a very simple page counter that would just work, and automatically handle new pages being added to the site.
Well, it seems that yes, I can.
This is the code that does all the work, I'm sure it could be better!
<?php // tell the browser to expect an svg header('Content-Type: image/svg+xml'); // set some default text $thisCount = 'ERROR!'; // if we have a referer if (isset($_SERVER['HTTP_REFERER'])) { // and it is OUR website if (strpos($_SERVER['HTTP_REFERER'], 'm0yng.uk') > 0) { // strip out index.html so it is counted the same as / if (substr($_SERVER['HTTP_REFERER'], -10) === 'index.html') { $_SERVER['HTTP_REFERER'] = substr($_SERVER['HTTP_REFERER'], 0, strlen($_SERVER['HTTP_REFERER']) - 10); } // remove any trailing /s $_SERVER['HTTP_REFERER'] = rtrim($_SERVER['HTTP_REFERER'], '/'); // sanitize the string $pageHash = filter_var($_SERVER['HTTP_REFERER'], FILTER_SANITIZE_STRING); // load the json file of counts $counterData = json_decode(file_get_contents("counterData.json"), true); // if it already exists if (isset($counterData[$pageHash])) { // add one to it $counterData[$pageHash]++; } else { // otherwise, start counting at one $counterData[$pageHash] = 1; } // cast that number to a string for later use $thisCount = (string) $counterData[$pageHash]; // save the counting file_put_contents("counterData.json", json_encode($counterData)); } } // below we have the SVG ... and inject our count with left padded zeros into the text area using php ?> <svg height="15px" width="50px" fill="#c9cacc" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 32 32"><text x="-34px" y="28px" font-family="monospace" font-size="32px"><?php echo str_pad($thisCount, 5, '0', STR_PAD_LEFT); ?></text></svg>
To use the counter simply use an `<img>` tag like so
<img src="/counter.php" alt="page hit counter"/>
It ends up looking a bit like this, which means I can grab the file and read it myself if I want, without having to visit every page to see a number.
{ "https:\/\/m0yng.uk": 3, "https:\/\/m0yng.uk\/2020\/08\/The-Portable-Web": 2 }
It would be great to embed the SVG itself into the page, this would allow it to inherit font colours, etc. and be accessible as text to accessibility technology.
However, I'm not sure how to do that, whilst keeping it very simple to use.
-+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+-
๐ค Black Lives Matter
๐๐ค๐ Trans Rights are Human Rights
โค๏ธ๐งก๐๐๐๐ Love is Love
Copyright ยฉ 2024 Christopher M0YNG - It is forbidden to use any part of this site for crypto/NFT/AI related projects.
Code snippets are licenced under the Hippocratic License 3.0 (or later.)
Page generated 2024-07-12 by Complex 19