Update, 2016-04-23: Hit Kounter was originally deployed on SAE. Since SAE recently began charging applications that use MySQL, the service has been moved to LeanCloud. Hit Kounter is a small spare-time utility with a deliberately simple feature set, so it is not well suited to running on a paid service. Users interested in the current version should refer to the newer Hit Kounter v0.3 usage instructions. The old SAE-based service was expected to be shut down after the May Day holiday. Apologies to anyone already using the earlier deployment.
Many developers keep their own technical blogs today. Static site generators such as Hexo and Jekyll make publishing straightforward, and even features that require some dynamic behavior—comment boxes, for example—can be handled through services such as Duoshuo or Disqus.
Page view statistics are a different matter. It is easy to add analytics to a site, but not as easy to display the visit count of each post directly on the blog page. After trying to solve this with Baidu Analytics and not getting the desired result, a very small PHP service was built for the job. After one refactor, that service became Hit Kounter.
The basic idea is simple: include a script, add a few HTML attributes where the count should appear, and let the script fetch the numbers from the server.
Add the script
<script src="https://jerry-cdn.b0.upaiyun.com/hit-kounter/hit-kounter-0.1.1.js"></script>
First, include the script on the page. Since page views usually need to be displayed on many pages, placing it in the root template is often the most convenient choice.
Show the view count for the current page
<span data-hk-page="current"> - </span>
Insert this snippet wherever the count should be displayed. After the script loads, it automatically looks for elements containing data-hk-* attributes. Based on the attribute value, it requests the corresponding data from the server and replaces the default content inside the tag with the returned result.
In the example above, data-hk-page="current" tells Hit Kounter to fetch the view count for the page currently being visited.
Show the view count for a specific page
On an index page or archive page, it is often useful to show the view counts of several posts at once. In that case, fill data-hk-page with the target URL:
<span data-hk-page="https://jerryzou.com/posts/design-for-all-mobile-resolution/"> - </span>
When Hit Kounter detects this element, it requests the view count for that exact address and replaces the default - with the real number.
Using the JavaScript API
Hit Kounter injects a global Icarus object into the page. This object acts as the data interface for communicating with the server, so requests can also be sent directly through JavaScript.
For example:
Icarus.request({
api: 'hk.page.get',
v: '1.0',
pages: [
{ url: 'http://test.com/1' },
{ url: 'http://test.com/2' },
{ url: 'http://test.com/3' }
],
success: function(results) {
for (var i = 0; i < results.length; i++) {
console.log(results[i].domain, results[i].url, results[i].count);
}
},
failure: function(code, err) {
console.log(code, err);
}
});
This request retrieves the page view counts for three URLs. At the time of the 0.1 beta version, Icarus supported four APIs:
- hk.page.increment
- hk.page.get
- hk.page.getTop
- hk.page.getByDomain
The rest depends on how the blog needs to use the data.
What may come next
Hit Kounter 0.1 was still a beta release, and the feature set was intentionally small. Planned improvements included:
- An API for getting the total view count of the entire site
- Support for an element such as
<div data-hk-top-pages="5">, which would list the five most-viewed pages on the site inside thediv - A convenient way to import initial page view data
- More complete error messages, covering both server-side and browser-side errors
Hit Kounter was also an open-source project, so feedback and code contributions were welcome.