Repository: tomdyson/wagalytics
Branch: master
Commit: e38d6e748051
Files: 19
Total size: 152.3 KB
Directory structure:
gitextract_vh81vh8u/
├── .gitignore
├── LICENSE
├── MANIFEST.in
├── README.md
├── client/
│ ├── src/
│ │ └── wagalytics.js
│ └── webpack.config.js
├── package.json
├── pytest.ini
├── setup.cfg
├── setup.py
└── wagalytics/
├── __init__.py
├── static/
│ └── wagalytics/
│ ├── .gitkeep
│ ├── vendors.bundle.js
│ └── wagalytics.bundle.js
├── templates/
│ └── wagalytics/
│ └── dashboard.html
├── tests/
│ └── tests.py
├── urls.py
├── views.py
└── wagtail_hooks.py
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
dist/
build/
*.pyc
.DS_Store
*.egg-info
npm-debug.log
node_modules
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2017 Tom Dyson
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: MANIFEST.in
================================================
graft wagalytics
global-exclude __pycache__
global-exclude *.py[co]
================================================
FILE: README.md
================================================
# Wagtail Analytics
(Last Updated 12/17/19 for Wagtail v2.x)
This module provides a simple dashboard of Google Analytics data, integrated into the Wagtail admin UI. Tested on Wagtail 2.0+.
## Instructions
1. [Create a service account](https://ga-dev-tools.appspot.com/embed-api/server-side-authorization) and download the JSON key (Credentials > Create Credentials > API key)
1. Make sure the [Analytics API is enabled for your project](https://console.developers.google.com/apis/api/analytics.googleapis.com) (See [issue 2](https://github.com/tomdyson/wagalytics/issues/2))
1. Add the [service account email address](https://console.developers.google.com/permissions/serviceaccounts) as a read-only user in Google Analytics (Admin > User Management)
1. Find the ID for your Google Analytics property (Admin > Property > View Settings, note: this is NOT the key that begins with "UA-")
1. Store your JSON key somewhere safe, and do not check it into your repo
1. `pip install wagalytics`
1. Add 'wagalytics' to your INSTALLED_APPS
1. Add 'wagtailfontawesome' to INSTALLED_APPS if it's not there already
1. Update your settings:
- `GA_KEY_FILEPATH = '/path/to/secure/directory/your-key.json'`
or when using environment variables (e.g. Heroku):
- `GA_KEY_CONTENT = 'content_of_your_key.json'`
- `GA_VIEW_ID = 'ga:xxxxxxxx'`
If you get CryptoUnavailableError errors, you probably need to `pip install PyOpenSSL` and/or `pip install pycrypto`. See [StackOverflow](http://stackoverflow.com/questions/27305867/google-api-access-using-service-account-oauth2client-client-cryptounavailableerr).
Ensure that your code snippet is included on each page you want to be tracked (likely by putting it in your base.html template.) (Admin > Property > Tracking Code)
## Multisite Support
To enable multisite support you'll need to update your Wagalytics settings _and_ have `wagtail.contrib.settings` installed. Sites can use a `GA_KEY_FILEPATH` or a `GA_KEY_CONTENT` key, but it's best not to use both.
In the snippet below, you'll see `site_id`. This is the ID (Primary Key) of your Wagtail Site.
```python
# Use either the GA_KEY_FILEPATH or the GA_KEY_CONTENT setting on your sites,
# but don't use both
WAGALYTICS_SETTINGS = {
site_id: {
'GA_VIEW_ID': 'ga:xxxxxxxx',
'GA_KEY_FILEPATH': '/path/to/secure/directory/your-key.json',
},
site_id: {
'GA_VIEW_ID': 'ga:xxxxxxxx',
'GA_KEY_CONTENT': 'content_of_your_key.json',
}
}
```
For every Wagalytics site you add in your multisite `WAGALYTICS_SETTINGS` you'll need to make sure you have the proper GA View ID and API Key. One View ID and API Key won't work for all your sites automatically.
Here's a working example of multisite WAGALYTICS_SETTINGS:
```python
WAGALYTICS_SETTINGS = {
# My default site. 2 is the site ID. This one uses GA_KEY_FILEPATH.
2: {
'GA_VIEW_ID': 'ga:xxxxxxxx',
'GA_KEY_FILEPATH': '/path/to/secure/directory/your-key.json',
},
# The secondary site. 3 is the Site ID. This one uses GA_KEY_CONTENT.
3: {
'GA_KEY_CONTENT': 'content_of_your_key.json',
'GA_VIEW_ID': 'ga:xxxxxxxx',
}
}
```
## Wagalytics Developers
Developers will need to carry out the following steps after cloning wagalytics:
- Ensure NodeJS & NPM are installed
- Run `npm install` then `npm run build` in the top level wagalytics directory
You will need to run `npm run build` anytime the javascript source is updated.
### TODO
- [ ] allow configuration of results
- [x] better styling, e.g. using [chart.js](https://ga-dev-tools.appspot.com/embed-api/third-party-visualizations/)
- [ ] Throw an error if the relevant settings aren't available
- [x] add [per-page results](https://github.com/tomdyson/wagalytics/issues/12)
### Notes
This module doesn't help with recording user activity. See [the Wagtail docs](http://docs.wagtail.io/en/latest/topics/writing_templates.html?highlight=analytics#varying-output-between-preview-and-live) and [StackOverflow](http://stackoverflow.com/a/1272312/181793) for pointers on how to avoid gathering data during preview and testing.
### Contributors
- Thijs Kramer
- Stefan Schärmeli
- Alex Gleason
- James Ramm
- Jake Kent
- Kalob Taulien
- Julius Parishy
================================================
FILE: client/src/wagalytics.js
================================================
import moment from 'moment';
$(document).ready(() => {
const el = document.getElementById('wagalytics-data');
setup(el.dataset.token, el.dataset.viewId);
});
/**
* Initialises google analytics and creates the dashboard charts
* @param {*} token_url
* @param {*} view_id
*/
function setup(token_url, view_id) {
if (!window.google || !window.google.load) {
var tag = document.createElement('script');
tag.type = 'text/javascript';
tag.src = 'https://www.google.com/jsapi';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(tag, s);
}
gapi.analytics.ready(function () {
$.get(token_url, function (data) {
gapi.analytics.auth.authorize({
'serverAuth': {
'access_token': data
}
});
});
// Create the dashboard controller
const dashboard = new Dashboard(view_id);
dashboard.refresh();
});
}
/**
* Wagtails' colour palette
*/
const colors = {
BLUE: '#71b2d4',
GREEN: '#189370',
ORANGE: '#e9b04d',
RED: '#cd3238',
SALMON: '#f37e77',
SALMON_LIGHT: '#fcf2f2',
TEAL: '#43b1b0',
TEAL_DARKER: '#358c8b',
TEAL_DARK: '#246060'
};
/**
* Sets up the various charts and controls their UI functionality
*/
class Dashboard {
constructor(view_id) {
this.view_id = view_id;
this.start_date_input = document.getElementById("id_date_from");
this.end_date_input = document.getElementById("id_date_to");
this.export_btn = document.getElementById("export-button");
this.start_date_input.addEventListener('change', () => this.refresh());
this.end_date_input.addEventListener('change', () => this.refresh());
$(document.getElementById("export")).submit(() => {
$(document.getElementById('export-data')).val(JSON.stringify(this.data));
});
this.data = {};
this.tooltips = {
enabled: true,
mode: 'label',
callbacks: {
title: function (tooltipItems, data) {
var idx = tooltipItems[0].index;
return 'Title:' + data.labels[idx];//do something with title
},
label: function (tooltipItems, data) {
return tooltipItems.xLabel;
}
}
}
}
setLoading(id) {
document.getElementById(id).innerHTML = '';
}
/**
* Setup the charts within the specified date range (last 7 or last 30 days)
* @param {int} range - use the `ranges` enum to select. (Can be 1 or 2)
*/
refresh() {
this.sessionsLineChart();
this.popularPagesTable();
this.topReferrersTable();
}
/**
* Query the google API for data within
* the set range.
* @param {Object} options Options specifying metrics, dimensions and any
* other keys accepted by gapi.
*/
getQuery(options) {
$(this.export_btn).prop('disabled', true);
return query(Object.assign({
ids: this.view_id,
'start-date': $(this.start_date_input).val(),
'end-date': $(this.end_date_input).val()
}, options));
}
/**
* Create a line chart showing number of sessions per day
*/
sessionsLineChart() {
const id = 'sessions-line-chart-container';
this.setLoading(id);
this.getQuery(
{
dimensions: 'ga:date,ga:nthDay',
metrics: 'ga:sessions'
}).then(results => {
this.data['sessions'] = results.rows;
$(this.export_btn).prop('disabled', false);
$(this.export_btn).removeClass('button-longrunning-active');
var data1 = results.rows.map(row => row[2]);
var labels = results.rows.map(row => row[0]);
labels = labels.map(function (label) {
return moment(label, 'YYYYMMDD').format('ll');
});
var data = {
labels: labels,
datasets: [
{
label: 'Sessions',
backgroundColor: colors.SALMON_LIGHT,
borderColor: colors.SALMON,
pointBackgroundColor: colors.SALMON,
pointBorderColor: '#fff',
data: data1
}
]
};
new Chart(makeCanvas(id), {
type: 'line',
data: data,
options: {
legend: {
display: false
},
scales: {
xAxes: [{
ticks: {
autoSkip: true,
maxTicksLimit: 4,
maxRotation: 0
}
}]
}
}
});
//generateLegend('legend-1-container', data.datasets);
});
}
/**
* Create table showing 25 most popular pages
*/
popularPagesTable() {
const id = 'popular-pages-table-container';
this.setLoading(id);
const queryData = {
'metrics': 'ga:pageviews',
'dimensions': 'ga:hostname,ga:pagePath',
'sort': '-ga:pageviews',
'max-results': 25
};
this.getQuery(queryData).then(results => {
// The results contain duplicates for variations in hostname
// e.g. if someone visit http://mywebsite.com vs http://www.mywebsite.com
// Here we aggregate these results into single values per page, regardless
// of hostname
var i = 0;
const rows = results.rows;
const l = rows.length;
const bars = {};
for (i; i < l; ++i) {
const key = rows[i][1]
if (bars.hasOwnProperty(key)) {
bars[key][1] += parseInt(rows[i][2], 10);
}
else {
bars[key] = [key, parseInt(rows[i][2], 10)];
}
}
this.data['pages'] = Object.values(bars);
$(this.export_btn).prop('disabled', false);
$(this.export_btn).removeClass('button-longrunning-active');
const table = createTable(['Page URL', 'Views'], Object.values(bars));
const pager = paginateTable(table);
const container = document.getElementById(id);
container.innerHTML = '';
container.appendChild(table);
$(container).append(pager);
});
}
/**
* Create table showing 25 top referrers
*/
topReferrersTable() {
const id = 'top-referrers-table-container';
this.setLoading(id);
const queryData = {
'metrics': 'ga:pageviews',
'dimensions': 'ga:fullReferrer',
'sort': '-ga:pageviews',
'max-results': 25
};
this.getQuery(queryData).then(results => {
this.data['referrers'] = results.rows;
$(this.export_btn).prop('disabled', false);
$(this.export_btn).removeClass('button-longrunning-active');
const table = createTable(['Source', 'Views'], results.rows);
const pager = paginateTable(table);
const container = document.getElementById(id);
container.innerHTML = '';
container.appendChild(table);
$(container).append(pager);
});
}
}
/**
* Create a table
* @param {*} headings
* @param {*} rows
*/
function createTable(headings, rows){
const table = document.createElement('table');
table.className = 'listing';
const head = table.createTHead();
const headerRow = head.insertRow(0);
let i = 0;
for (i; i < headings.length; ++i) {
const heading = headerRow.insertCell(i);
heading.innerHTML = headings[i];
heading.className = 'title';
}
const body = table.createTBody();
for (i = 0; i < rows.length; ++i) {
const rowData = rows[i];
const row = body.insertRow(i);
for (let j = 0; j < rowData.length; ++j) {
row.insertCell(j).innerHTML = rowData[j];
}
}
return table;
}
/**
* Client side pagination of a table.
* Table rows are hidden/shown according to the page number
* @param {*} table
*/
function paginateTable(table) {
let currentPage = 0;
const numPerPage = 5;
const $table = $(table);
// This is the function which controls display of content
$table.bind('repaginate', function() {
$table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
let $pager = $table.next();
if (currentPage <= 0) {
$pager.find('.prev').addClass('disabled');
} else {
$pager.find('.prev').removeClass('disabled');
}
if (currentPage >= numPages - 1) {
$pager.find('.next').addClass('disabled');
} else {
$pager.find('.next').removeClass('disabled');
}
});
$table.trigger('repaginate');
const numRows = $table.find('tbody tr').length;
const numPages = Math.ceil(numRows / numPerPage);
// Create the page selector element and add callbacks to handle setting the page
const $pager = $(`
`);
// Previous page click handler
$pager.find('.prev a').bind('click', event => {
event.preventDefault();
currentPage -= 1;
if (currentPage < 0) {
currentPage = 0;
}
$pager.find('.page-num').text(`${currentPage + 1}`);
$table.trigger('repaginate');
});
// Next page click handler
$pager.find('.next a').bind('click', event => {
event.preventDefault();
currentPage += 1;
if (currentPage >= numPages) {
currentPage = numPages - 1;
}
$pager.find('.page-num').text(`${currentPage + 1}`);
$table.trigger('repaginate');
});
return $pager;
}
/**
* Extend the Embed APIs `gapi.analytics.report.Data` component to
* return a promise the is fulfilled with the value returned by the API.
* @param {Object} params The request parameters.
* @return {Promise} A promise.
*/
function query(params) {
return new Promise(function (resolve, reject) {
var data = new gapi.analytics.report.Data({ query: params });
data.once('success', function (response) { resolve(response); })
.once('error', function (response) { reject(response); })
.execute();
});
}
/**
* Create a new canvas inside the specified element. Set it to be the width
* and height of its container.
* @param {string} id The id attribute of the element to host the canvas.
* @return {RenderingContext} The 2D canvas context.
*/
function makeCanvas(id) {
var container = document.getElementById(id);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
container.innerHTML = '';
canvas.width = container.offsetWidth;
canvas.height = container.offsetHeight;
container.appendChild(canvas);
return ctx;
}
/**
* Create a visual legend inside the specified element based off of a
* Chart.js dataset.
* @param {string} id The id attribute of the element to host the legend.
* @param {Array.