Track Web Views in Grafana

Latest Comments

Grafana

This blog post is going to explain how to display your tracked WordPress page views using Grafana, and the best bit there is no cost 😊

We are going to explain some terminology to start off with….

Example if person x visited your site then visited again it would be 2 visits however 1 visitor

Visits – The number of times someone has loaded a page on the site non unique

Visitor – The amount of times someone unique has visited your site

Before you start!

You will need to make sure you have a Grafana instance hosted somewhere with access to your mysql db to pull the required information. There are 100’s of guides online on how to setup Grafana yourself or even use Grafana’s SAaS solution if this is easier for you.

You will also need to know the username and password for you WordPress admin account if this is not you.

As the guide requires reading the SQL DB you will also need to know the password to inspect all the tables within the database.

Step 1

Step 1 is a simple one, make sure you are logged as an admin to the WP-admin panel, once in please install the plugin WP Statistics, if it is not there or you having trouble installing google is your friend for this one, as there are a number of guides online for this.

Once installed you will need to make sure that the plugin is activated so you start collecting stats otherwise this is not going to work.

Step 2

If you login to your PHP myadmin you will now see a list of new entries in the list with statistics will be called wp_statistics
What we are interested in is visit visitor and online

Step 3

Setup Grafana datastore

  • Go to add new connection
  • Select My SQL
  • Put in the data about where your DB is and the DB Name
  • Authentication method
  • Save and test

Example below

Step 4

Add the dashboard to Grafana

New Dashboard >Import

Then paste the JSON below

{ “annotations”: { “list”: [ { “builtIn”: 1, “datasource”: { “type”: “datasource”, “uid”: “grafana” }, “enable”: true, “hide”: true, “iconColor”: “rgba(0, 211, 255, 1)”, “name”: “Annotations & Alerts”, “type”: “dashboard” } ] }, “description”: “WordPress statistics dashboard includes:\n – Top 5 pages\n – Top browsers\n – Top 10 Referring Sites\n – Top Engines\n – Total Visitors \n – Total Online Users\n – Total Visits\n – Top 10 Countries (Count Visitor)\n – Top 10 Countries (Hits)\n – Visit & Visitor in the last 10 days\n”, “editable”: true, “fiscalYearStartMonth”: 0, “graphTooltip”: 0, “id”: 1, “links”: [], “panels”: [ { “datasource”: { “type”: “mysql”, “uid”: “fe5xt0e4jewowb” }, “fieldConfig”: { “defaults”: { “displayName”: “Total Visitors”, “mappings”: [], “max”: 1000000, “min”: 0, “thresholds”: { “mode”: “absolute”, “steps”: [ { “color”: “rgb(22, 182, 210)”, “value”: null } ] }, “unit”: “short” }, “overrides”: [] }, “gridPos”: { “h”: 4, “w”: 3, “x”: 0, “y”: 0 }, “id”: 7, “options”: { “colorMode”: “background”, “graphMode”: “area”, “justifyMode”: “auto”, “orientation”: “auto”, “percentChangeColorMode”: “standard”, “reduceOptions”: { “calcs”: [ “mean” ], “fields”: “”, “values”: true }, “showPercentChange”: false, “textMode”: “auto”, “wideLayout”: true }, “pluginVersion”: “11.3.2”, “targets”: [ { “datasource”: { “type”: “mysql”, “uid”: “fe5xt0e4jewowb” }, “editorMode”: “code”, “format”: “table”, “group”: [], “metricColumn”: “none”, “rawQuery”: true, “rawSql”: “SELECT count(id) as ‘Total Visitor’ FROM wp_statistics_visitor;”, “refId”: “A”, “select”: [ [ { “params”: [ “comment_ID” ], “type”: “column” } ] ], “sql”: { “columns”: [ { “parameters”: [], “type”: “function” } ], “groupBy”: [ { “property”: { “type”: “string” }, “type”: “groupBy” } ], “limit”: 50 }, “table”: “wpl7_comments”, “timeColumn”: “comment_post_ID”, “timeColumnType”: “bigint”, “where”: [ { “name”: “$__unixEpochFilter”, “params”: [], “type”: “macro” } ] } ], “title”: “”, “type”: “stat” }, { “datasource”: { “type”: “mysql”, “uid”: “fe5xt0e4jewowb” }, “fieldConfig”: { “defaults”: { “displayName”: “Total Online Users”, “mappings”: [], “max”: 1000000, “min”: 0, “thresholds”: { “mode”: “absolute”, “steps”: [ { “color”: “rgb(22, 126, 210)”, “value”: null } ] }, “unit”: “short” }, “overrides”: [] }, “gridPos”: { “h”: 4, “w”: 3, “x”: 3, “y”: 0 }, “id”: 17, “options”: { “colorMode”: “background”, “graphMode”: “area”, “justifyMode”: “auto”, “orientation”: “auto”, “percentChangeColorMode”: “standard”, “reduceOptions”: { “calcs”: [ “mean” ], “fields”: “”, “values”: true }, “showPercentChange”: false, “textMode”: “auto”, “wideLayout”: true }, “pluginVersion”: “11.3.2”, “targets”: [ { “datasource”: { “type”: “mysql”, “uid”: “fe5xt0e4jewowb” }, “editorMode”: “code”, “format”: “table”, “group”: [], “metricColumn”: “none”, “rawQuery”: true, “rawSql”: “SELECT count(*) as ‘Online Users’ FROM wp_statistics_useronline;”, “refId”: “A”, “select”: [ [ { “params”: [ “comment_ID” ], “type”: “column” } ] ], “sql”: { “columns”: [ { “parameters”: [], “type”: “function” } ], “groupBy”: [ { “property”: { “type”: “string” }, “type”: “groupBy” } ], “limit”: 50 }, “table”: “wpl7_comments”, “timeColumn”: “comment_post_ID”, “timeColumnType”: “bigint”, “where”: [ { “name”: “$__unixEpochFilter”, “params”: [], “type”: “macro” } ] } ], “title”: “”, “type”: “stat” }, { “datasource”: { “type”: “mysql”, “uid”: “fe5xt0e4jewowb” }, “fieldConfig”: { “defaults”: { “displayName”: “Total Visits”, “mappings”: [], “max”: 1000000, “min”: 0, “thresholds”: { “mode”: “absolute”, “steps”: [ { “color”: “rgb(43, 161, 86)”, “value”: null } ] }, “unit”: “short” }, “overrides”: [] }, “gridPos”: { “h”: 4, “w”: 3, “x”: 6, “y”: 0 }, “id”: 6, “options”: { “colorMode”: “background”, “graphMode”: “area”, “justifyMode”: “auto”, “orientation”: “auto”, “percentChangeColorMode”: “standard”, “reduceOptions”: { “calcs”: [ “mean” ], “fields”: “”, “values”: true }, “showPercentChange”: false, “textMode”: “auto”, “wideLayout”: true }, “pluginVersion”: “11.3.2”, “targets”: [ { “datasource”: { “type”: “mysql”, “uid”: “fe5xt0e4jewowb” }, “editorMode”: “code”, “format”: “table”, “group”: [], “metricColumn”: “none”, “rawQuery”: true, “rawSql”: “SELECT sum(visit) as ‘Total Visits’ FROM wp_statistics_visit order by last_visit desc limit 15;\n”, “refId”: “A”, “select”: [ [ { “params”: [ “comment_ID” ], “type”: “column” } ] ], “sql”: { “columns”: [ { “parameters”: [], “type”: “function” } ], “groupBy”: [ { “property”: { “type”: “string” }, “type”: “groupBy” } ], “limit”: 50 }, “table”: “wpl7_comments”, “timeColumn”: “comment_post_ID”, “timeColumnType”: “bigint”, “where”: [ { “name”: “$__unixEpochFilter”, “params”: [], “type”: “macro” } ] } ], “title”: “”, “type”: “stat” }, { “datasource”: { “type”: “mysql”, “uid”: “fe5xt0e4jewowb” }, “fieldConfig”: { “defaults”: { “color”: { “mode”: “palette-classic” }, “custom”: { “axisBorderShow”: false, “axisCenteredZero”: false, “axisColorMode”: “text”, “axisLabel”: “”, “axisPlacement”: “hidden”, “barAlignment”: 0, “barWidthFactor”: 0.6, “drawStyle”: “line”, “fillOpacity”: 20, “gradientMode”: “none”, “hideFrom”: { “legend”: false, “tooltip”: false, “viz”: false }, “insertNulls”: false, “lineInterpolation”: “linear”, “lineWidth”: 1, “pointSize”: 6, “scaleDistribution”: { “log”: 2, “type”: “log” }, “showPoints”: “always”, “spanNulls”: false, “stacking”: { “group”: “A”, “mode”: “none” }, “thresholdsStyle”: { “mode”: “off” } }, “mappings”: [], “thresholds”: { “mode”: “absolute”, “steps”: [ { “color”: “green”, “value”: null }, { “color”: “red”, “value”: 80 } ] }, “unit”: “short” }, “overrides”: [ { “matcher”: { “id”: “byName”, “options”: “Visit” }, “properties”: [ { “id”: “color”, “value”: { “fixedColor”: “rgb(28, 184, 235)”, “mode”: “fixed” } } ] }, { “matcher”: { “id”: “byName”, “options”: “Visitor” }, “properties”: [ { “id”: “color”, “value”: { “fixedColor”: “rgb(159, 21, 227)”, “mode”: “fixed” } } ] }, { “matcher”: { “id”: “byName”, “options”: “Visitorrs” }, “properties”: [ { “id”: “color”, “value”: { “fixedColor”: “rgb(65, 250, 42)”, “mode”: “fixed” } } ] }, { “matcher”: { “id”: “byName”, “options”: “Visits” }, “properties”: [ { “id”: “color”, “value”: { “fixedColor”: “rgb(28, 235, 255)”, “mode”: “fixed” } } ] }, { “matcher”: { “id”: “byName”, “options”: “visit” }, “properties”: [ { “id”: “color”, “value”: { “fixedColor”: “rgb(32, 99, 243)”, “mode”: “fixed” } } ] }, { “matcher”: { “id”: “byName”, “options”: “Visit” }, “properties”: [ { “id”: “color”, “value”: { “fixedColor”: “rgb(28, 184, 235)”, “mode”: “fixed” } } ] }, { “matcher”: { “id”: “byName”, “options”: “Visitor” }, “properties”: [ { “id”: “color”, “value”: { “fixedColor”: “rgb(159, 21, 227)”, “mode”: “fixed” } } ] }, { “matcher”: { “id”: “byName”, “options”: “Visitorrs” }, “properties”: [ { “id”: “color”, “value”: { “fixedColor”: “rgb(65, 250, 42)”, “mode”: “fixed” } } ] }, { “matcher”: { “id”: “byName”, “options”: “Visits” }, “properties”: [ { “id”: “color”, “value”: { “fixedColor”: “rgb(28, 235, 255)”, “mode”: “fixed” } } ] }, { “matcher”: { “id”: “byName”, “options”: “visit” }, “properties”: [ { “id”: “color”, “value”: { “fixedColor”: “rgb(32, 99, 243)”, “mode”: “fixed” } } ] } ] }, “gridPos”: { “h”: 9, “w”: 12, “x”: 10, “y”: 0 }, “id”: 2, “options”: { “alertThreshold”: false, “legend”: { “calcs”: [ “lastNotNull”, “max”, “min”, “sum” ], “displayMode”: “table”, “placement”: “bottom”, “showLegend”: true }, “tooltip”: { “mode”: “multi”, “sort”: “none” } }, “pluginVersion”: “11.3.2”, “targets”: [ { “datasource”: { “type”: “mysql”, “uid”: “fe5xt0e4jewowb” }, “editorMode”: “code”, “format”: “time_series”, “group”: [], “metricColumn”: “none”, “rawQuery”: true, “rawSql”: “SELECT\n last_visit AS \”time\”,\n Visit\nFROM wp_statistics_visit\nWHERE\n $__timeFilter(last_visit)\nORDER BY last_visit”, “refId”: “A”, “select”: [ [ { “params”: [ “visit” ], “type”: “column” } ] ], “sql”: { “columns”: [ { “parameters”: [], “type”: “function” } ], “groupBy”: [ { “property”: { “type”: “string” }, “type”: “groupBy” } ], “limit”: 50 }, “table”: “wpl7_statistics_visit”, “timeColumn”: “last_visit”, “timeColumnType”: “datetime”, “where”: [ { “name”: “$__timeFilter”, “params”: [], “type”: “macro” } ] }, { “datasource”: { “type”: “mysql”, “uid”: “fe5xt0e4jewowb” }, “editorMode”: “code”, “format”: “time_series”, “group”: [], “metricColumn”: “none”, “rawQuery”: true, “rawSql”: “SELECT DATE(last_counter) as time, count(*) as Visitor FROM wp_statistics_visitor group by last_counter;”, “refId”: “B”, “select”: [ [ { “params”: [ “comment_ID” ], “type”: “column” } ] ], “sql”: { “columns”: [ { “parameters”: [], “type”: “function” } ], “groupBy”: [ { “property”: { “type”: “string” }, “type”: “groupBy” } ], “limit”: 50 }, “table”: “wpl7_comments”, “timeColumn”: “comment_date”, “timeColumnType”: “timestamp”, “where”: [ { “name”: “$__timeFilter”, “params”: [], “type”: “macro” } ] } ], “title”: “Visit & Visitor in the last 10 days”, “transparent”: true, “type”: “timeseries” }, { “datasource”: { “type”: “mysql”, “uid”: “fe5xt0e4jewowb” }, “fieldConfig”: { “defaults”: { “displayName”: “$__cell_0”, “mappings”: [], “min”: 0, “thresholds”: { “mode”: “absolute”, “steps”: [ { “color”: “red”, “value”: null }, { “color”: “yellow”, “value”: 10 }, { “color”: “purple”, “value”: 30 }, { “color”: “#6ED0E0”, “value”: 40 }, { “color”: “blue”, “value”: 50 }, { “color”: “rgb(4, 165, 249)”, “value”: 60 }, { “color”: “rgb(34, 113, 232)”, “value”: 70 }, { “color”: “rgb(19, 231, 215)”, “value”: 80 }, { “color”: “rgb(66, 226, 197)”, “value”: 90 }, { “color”: “rgb(40, 221, 7)”, “value”: 100 } ] }, “unit”: “none” }, “overrides”: [] }, “gridPos”: { “h”: 6, “w”: 10, “x”: 0, “y”: 4 }, “id”: 9, “options”: { “displayMode”: “gradient”, “legend”: { “calcs”: [], “displayMode”: “list”, “placement”: “bottom”, “showLegend”: false }, “maxVizHeight”: 300, “minVizHeight”: 16, “minVizWidth”: 8, “namePlacement”: “auto”, “orientation”: “vertical”, “reduceOptions”: { “calcs”: [ “mean” ], “fields”: “”, “values”: true }, “showUnfilled”: true, “sizing”: “auto”, “valueMode”: “color” }, “pluginVersion”: “11.3.2”, “targets”: [ { “datasource”: { “type”: “mysql”, “uid”: “fe5xt0e4jewowb” }, “editorMode”: “code”, “format”: “table”, “group”: [], “metricColumn”: “none”, “rawQuery”: true, “rawSql”: “SELECT location, COUNT(location) AS count FROM wp_statistics_visitor where location not like ‘000’ GROUP BY location ORDER BY count DESC limit 10;”, “refId”: “A”, “select”: [ [ { “params”: [ “comment_ID” ], “type”: “column” } ] ], “sql”: { “columns”: [ { “parameters”: [], “type”: “function” } ], “groupBy”: [ { “property”: { “type”: “string” }, “type”: “groupBy” } ], “limit”: 50 }, “table”: “wpl7_comments”, “timeColumn”: “comment_date”, “timeColumnType”: “timestamp”, “where”: [ { “name”: “$__timeFilter”, “params”: [], “type”: “macro” } ] } ], “title”: “Top 10 Countries (Count Visitor)”, “transparent”: true, “type”: “bargauge” }, { “datasource”: { “type”: “mysql”, “uid”: “fe5xt0e4jewowb” }, “fieldConfig”: { “defaults”: { “displayName”: “$__cell_0”, “mappings”: [], “min”: 10, “thresholds”: { “mode”: “absolute”, “steps”: [ { “color”: “red”, “value”: null }, { “color”: “red”, “value”: 5 }, { “color”: “rgb(224, 78, 149)”, “value”: 10 }, { “color”: “rgb(158, 32, 131)”, “value”: 20 }, { “color”: “rgb(99, 27, 184)”, “value”: 30 }, { “color”: “rgb(142, 97, 235)”, “value”: 40 }, { “color”: “yellow”, “value”: 50 }, { “color”: “orange”, “value”: 60 }, { “color”: “rgb(16, 81, 156)”, “value”: 70 }, { “color”: “rgb(33, 169, 245)”, “value”: 80 }, { “color”: “rgb(2, 250, 196)”, “value”: 90 }, { “color”: “rgb(57, 201, 0)”, “value”: 100 } ] }, “unit”: “none” }, “overrides”: [] }, “gridPos”: { “h”: 7, “w”: 10, “x”: 0, “y”: 10 }, “id”: 18, “options”: { “displayMode”: “gradient”, “legend”: { “calcs”: [], “displayMode”: “list”, “placement”: “bottom”, “showLegend”: false }, “maxVizHeight”: 300, “minVizHeight”: 16, “minVizWidth”: 8, “namePlacement”: “auto”, “orientation”: “horizontal”, “reduceOptions”: { “calcs”: [ “mean” ], “fields”: “”, “values”: true }, “showUnfilled”: true, “sizing”: “auto”, “valueMode”: “color” }, “pluginVersion”: “11.3.2”, “targets”: [ { “datasource”: { “type”: “mysql”, “uid”: “fe5xt0e4jewowb” }, “editorMode”: “code”, “format”: “table”, “group”: [], “metricColumn”: “none”, “rawQuery”: true, “rawSql”: “SELECT location, sum(hits) AS count FROM wp_statistics_visitor where location not like ‘000’ GROUP BY location ORDER BY count DESC limit 10;”, “refId”: “A”, “select”: [ [ { “params”: [ “comment_ID” ], “type”: “column” } ] ], “sql”: { “columns”: [ { “parameters”: [], “type”: “function” } ], “groupBy”: [ { “property”: { “type”: “string” }, “type”: “groupBy” } ], “limit”: 50 }, “table”: “wpl7_comments”, “timeColumn”: “comment_date”, “timeColumnType”: “timestamp”, “where”: [ { “name”: “$__timeFilter”, “params”: [], “type”: “macro” } ] } ], “title”: “Top 10 Countries (Hits)”, “transparent”: true, “type”: “bargauge” } ], “preload”: false, “refresh”: “”, “schemaVersion”: 40, “tags”: [], “templating”: { “list”: [] }, “time”: { “from”: “now-7d”, “to”: “now” }, “timepicker”: {}, “timezone”: “”, “title”: “WordPress statistics dashboard”, “uid”: “wckvJzOMk”, “version”: 13, “weekStart”: “” }

There is a good chance you will see the triangle of error like below


You will need to make sure that each panel has a reference to your database so mine has “wp_” however yours might not.

No responses yet

Leave a Reply

Your email address will not be published. Required fields are marked *