⏳
6 mins
read time
Google analytics allows to measure a website performance. The information collected by this module allows to improve the content of a website by giving the owner insights about:
All this information is available in the google analytics website, where you can find a sort of predefined charts. Sometimes you want to personalize this charts and use them at your own will. In this article I will show you how to:
In order to fetch your analytics data, you have to:
2) Create service account and download json key file
3) Enable Google Analytics API
4) Grant service account to access Analytics account
All this information is also available in analytics developer guide.
After downloading the json service account key, you can use it in python or nodejs API to fetch your data.
I used the example shown in the google
documentation.
I modified the example to:
csv filedict form instead of reading it from a file.
This will allow us to read the token from an environment variable.Javascript libraries like d3 allow us to create interactive visualizations, where the reader is able to define his own story by making his own data explorations.
js libraries in the htmldiv place holder in the html where the figures will be drawn.For the ones that like to see some code, here I present a simplified extraction from my js code to show you how it is simple to create the interactive figures.
// Reading data
d3.csv("data.csv").then(function(data) {
// Create a Crossfilter instance
var ndx = crossfilter(data);
// Parse date
var dateFormatParser = d3.timeParse("%Y%m%d");
data.forEach(function(d) {
d.dd = dateFormatParser(d.date);
});
//Define Dimensions
var countryDim = ndx.dimension(function(d) { return d["country"]; });
var dateDim = ndx.dimension(function(d) { return d.dd; });
var deviceDim = ndx.dimension(function(d) { return d["device"]; });
var sourceDim = ndx.dimension(function(d) { return d["source"]; });
var pageDim = ndx.dimension(function(d) { return d["pagePath"]; });
var allDim = ndx.dimension(function(d) {return d;});
//Group Data
var countryGroup = countryDim.group().reduceSum(function (d) {
return d["sessions"];
});
var dateGroup = dateDim.group().reduceSum(function (d) {
return d["sessions"];
});
var deviceGroup = deviceDim.group().reduceSum(function (d) {
return d["sessions"];
});
var sourceGroup = sourceDim.group().reduceSum(function (d) {
return d["sessions"];
});
var pageGroup = pageDim.group().reduceSum(function (d) {
return d["sessions"];
});
var all = ndx.groupAll();
//Charts
var countryChart = dc.rowChart("#country-chart");
var timeChart = dc.barChart("#time-chart");
var deviceChart = dc.pieChart("#device-chart");
var sourceChart = dc.rowChart("#source-chart");
var pageChart = dc.rowChart("#page-chart");
var dataTable = dc.dataTable("#data-table");
var numberRecordsND = dc.numberDisplay("#number-records-nd");
// Count the number of records
numberRecordsND
.formatNumber(d3.format("d"))
.valueAccessor(function(d){return d; })
.group(all);
// Country chart
countryChart
.width(300)
.height(400)
.margins({top: 10, right: 50, bottom: 30, left: 40})
.dimension(countryDim)
.group(filter_countryGroup)
.cap(10)
.ordering(function(d) { return -d.value })
.elasticX(true);
// ....
// Draw all the charts
dc.renderAll();
});
In a few words:
csv file (other formats can be used csv, json, tsv, ..) ;Deploying the code in github pages allows to deploy static page and removes
completely the server dependency. In addition github actions allows to have a
complete CI/CD that can be configured in a yaml file like the following:
on:
schedule:
# * is a special character in YAML so you have to quote this string
- cron: '57 23 * * *'
jobs:
publish:
name: Publish github pages
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- name: Set up Python 3.7
uses: actions/setup-python@v1
with:
python-version: 3.7
- name: install requirements
run: make venv
- name: get data
run: make data
env:
TOKEN: ${{ secrets.TOKEN }}
- name: build html
run: make build
- name: deploy
uses: docker://peaceiris/gh-pages:v2.3.2
if: success()
env:
ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
PUBLISH_BRANCH: gh-pages
PUBLISH_DIR: ./dist
In this way, I will:
dist folder ;dist folder ;js script to the dist folder ;dist folder to the gh-pages branch so that github can publish it in github-pages. I use @peaceiris github action to publish to github-pages.This file is put in the .github/workflows folder. It’s automatically taken
into account if you have github actions active for you account. It’s still in
beta phase but it will be released to the public in November 2019.
Github actions are a great way to publish content in a serverless architecture. It’s schedule option opens great opportunities like the ones published in their repository.
The interactive dashboard uses only div elements in the html page. The
frontend part can be controlled from libraries such as bulma in order to create
responsive designs.
From my dashboard I can conclude that people visit mostly:
As always, the code is available at github. Don’t forget to 🌟.
Interactive visualizations allows the reader to explore data for differents points of views. Javascript library Dc.js allows to combine multi variable firlters to the analysis.
This article shows how to collect data from article shows how to analyze logs using Kibana dashboards. Fluentbit is used for injecting logs to elasticsearch, then it is connected to kibana to get some insights.
Vim is a simple and ubiquitous text editor that I use daily. In this article I show how to use Vim to take and publish diary notes using Vimwiki and Hugo.
Services like Mopidy and Snapcast are ideal to create a multiroom streaming audio player using devices like the RaspberryPi or android telephones. This posts presents a web interface that uses the state of the art web technologies and integrates nicely with Mopidy and Snapcast.