24 | Top Sites Today
25 |
32 |
76 |
77 |
78 |
79 | | Site |
80 | Page views |
81 |
82 |
83 |
84 | ${createRows(sites, data)}
85 |
86 |
87 | How to Use
88 |
89 | Add the following HTML snippet to your site:
90 |
91 |
95 |
96 | That's it!
97 | Your stats will start to be collected with every page view.
98 | When a user clicks on the LibreCounter logo they will be taken to the stats collected
99 | at https://librecounter.org/[site]/show,
100 | where [site] is your domain name (e.g. example.org).
101 |
102 |
103 | There are more options available.
104 |
105 |
106 | Compliance
107 |
108 | LibreCounter is GDPR compliant by default: no browser tracking done,
109 | no IPs or user agents stored anywhere.
110 |
111 |
112 | Since no cookies are used you don't need to add a disclaimer to your site.
113 |
114 |
115 | ${createFooter()}`
116 | }
117 |
118 | function createRows(sites, data) {
119 | const rows = []
120 | for (let index = 0; index < sites.length; index++) {
121 | const label = sites[index]
122 | const row = `
20 | Default
21 |
22 | The default style is to show a logotype
23 | (technically an isotype),
24 | with brown background and white symbols.
25 | To use it, simply add the following HTML snippet to your site:
26 |
27 |
31 |
32 |
33 | The "unsafe-url" referrer policy is there to make sure that the browser
34 | sends the whole referrer to LibreCounter,
35 | so it can do its thing and attribute the page correctly.
36 |
37 |
38 | Color and Style
39 |
40 | To match your site better you can choose from a variety of colors,
41 | all within the Egyptian theme:
42 | brown, orange, yellow and sometimes white.
43 | You can also pick your favorite style.
44 |
45 |
46 | solid (default):
47 | 
48 | 
49 | 
50 |
51 |
52 |
53 | white:
54 | 
55 | 
56 | 
57 |
58 |
59 |
60 | outline:
61 | 
62 | 
63 | 
64 | 
65 |
66 |
67 | isologo:
68 | 
69 | 
70 | 
71 |
72 |
73 |
74 | To add to your site just pick style and color and join them with a dash:
75 | [style]-[color].svg,
76 | and use this instead of counter.svg.
77 | E.g. outline-orange.svg will give you an outline in orange:
78 |
79 |
83 |
84 | Old Style Counter
85 |
86 | This style is an homage to old-time counters,
87 | but with LibreCounter stats.
88 |
89 | 
90 |
91 | Watch the counter grow every time you reload the page!
92 |
93 |
94 | To use it, simply add the following HTML snippet to your site:
95 |
96 |
100 |
101 | Unique Visitors
102 |
103 | If you want to count unique visitors to your website instead of page views,
104 | just add unique.svg to your site instead of counter.svg:
105 |
106 |
110 |
111 | This makes LibreCounter send the header cache-control: max-age=1800, private,
112 | so that the image is cached in your browser across multiple page views,
113 | for half an hour.
114 |
115 |
116 | Hidden Counter
117 |
118 | If you prefer your stats to be hidden the HTML snippet to add is even simpler:
119 |
120 |
122 |
123 | Keep in mind that your stats may still appear in the list of top sites on the home page.
124 |
125 |
126 | Bring Your Own Style
127 |
128 | If you would like to have a custom style for your site,
129 | why not create it yourself?
130 | Pull requests are welcome!
131 |
132 |
133 | ${createFooter()}`
134 | }
135 |
136 |
--------------------------------------------------------------------------------
/lib/page/stats.js:
--------------------------------------------------------------------------------
1 | import {getTop10} from '../core/format.js'
2 | import {createHead, createFooter} from './common.js'
3 |
4 | const dayOptions = [1, 3, 7, 14, 30]
5 |
6 | export function createStatsPage(query, stats) {
7 | const showingDays = query.days == 1 ? 'day' : `${query.days} days`
8 | return `${createHead(`LibreCounter Stats for ${query.site}`)}
9 |
18 |
19 | Showing data for the last ${showingDays}. Change to show:
20 | ${getDayLinks(query.days)}
21 | days.
22 |
23 |
24 |
Stats per day
25 | ${createTimeSeries(stats.byDay)}
26 |
27 |
28 |
29 |
Stats per page
30 | ${createHorizontalChart(stats.byPage, 'pages', '#934147')}
31 |
32 |
33 |
Stats per country
34 | ${createHorizontalChart(stats.byCountry, 'countries', '#cc7658')}
35 |
36 |
37 |
Stats per browser
38 | ${createHorizontalChart(stats.byBrowser, 'browsers', '#dbaf61')}
39 |
40 |
41 |
Stats per OS
42 | ${createHorizontalChart(stats.byOs, 'os', '#507589')}
43 |
44 |
2 |
3 | # LibreCounter Stats
4 |
5 | Free, libre and open website statistics.
6 | GDPR compliant: no cookies, no tracking done in the browser,
7 | no IP addresses stored, no marketing or advertising done (or even possible).
8 |
9 | LibreCounter provides website traffic analysis and statistics for free at
10 | [librecounter.org](https://librecounter.org/).
11 |
12 | ## How to Use
13 |
14 | Simply add the following snippet to your website,
15 | in all pages that you want analyzed:
16 |
17 | ```html
18 | 
20 | 
10 | 