Permalink
Cannot retrieve contributors at this time
<?php | |
// MUST be using composer | |
require_once '/home/csengineer13/dannyrb.com/traffic/vendor/autoload.php'; | |
session_start(); | |
$client = new Google_Client(); | |
$client->setApplicationName("API Project"); // Name of proj in GoogleDeveloperConsole | |
// Generated in GoogleDeveloperConsole --> Credentials --> Service Accounts | |
$client->setAuthConfig('/home/csengineer13/secure-creds/API Project-c0a14bc34a03.json'); | |
$client->addScope(Google_Service_Analytics::ANALYTICS_READONLY); | |
// Grab token if it's set | |
if (isset($_SESSION['service_token'])) { | |
$client->setAccessToken($_SESSION['service_token']); | |
} | |
// Refresh if expired | |
if ($client->isAccessTokenExpired()) { | |
$client->refreshTokenWithAssertion(); | |
} | |
// Pin to Session | |
$_SESSION['service_token'] = $client->getAccessToken(); | |
$myToken = $client->getAccessToken(); | |
?> | |
<html> | |
<head> | |
<title>Traffic for Dannyrb.com</title> | |
<!-- This demo uses the Chart.js graphing library and Moment.js to do date | |
formatting and manipulation. --> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script> | |
<style> | |
* { | |
margin: 0; | |
padding: 0; | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
body { text-align: center; } | |
/* Grid Magic */ | |
main { padding: 0 15px;} | |
.row { | |
margin-right: -15px; | |
margin-left: -15px; | |
margin-bottom: 35px; | |
} | |
.row:after { | |
content:''; | |
display:block; | |
clear: both; | |
} | |
.col { | |
float: left; | |
width: 50%; | |
position: relative; | |
min-height: 1px; | |
padding-right: 15px; | |
padding-left: 15px; | |
} | |
/* End Grid */ | |
.chart { | |
width: 90%; | |
margin: 0 auto; | |
min-height: 200px; | |
} | |
/* Styling Charts.JS Legend */ | |
.legend { | |
list-style: none; | |
margin: 0; | |
padding: 1em 0 0; | |
text-align: center; | |
} | |
.legend > li { | |
display: inline-block; | |
padding: .25em .5em; | |
} | |
.legend > li > i { | |
display: inline-block; | |
height: 1em; | |
margin-right: .5em; | |
vertical-align: -.1em; | |
width: 1em; | |
} | |
</style> | |
</head> | |
<body> | |
<!-- Google Analytics --> | |
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ | |
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), | |
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) | |
})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); | |
ga('create', 'UA-42182376-5', 'auto'); | |
ga('send', 'pageview');</script> | |
<!-- Load Google's Embed API Library --> | |
<script>(function(w,d,s,g,js,fs){ | |
g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(f){this.q.push(f);}}; | |
js=d.createElement(s);fs=d.getElementsByTagName(s)[0]; | |
js.src='https://apis.google.com/js/platform.js'; | |
fs.parentNode.insertBefore(js,fs);js.onload=function(){g.load('analytics');}; | |
}(window,document,'script'));</script> | |
<!-- Include the ViewSelector2 component script. --> | |
<script src="http://dannyrb.com/traffic/components/view-selector2.js"></script> | |
<!-- Include the DateRangeSelector component script. --> | |
<script src="http://dannyrb.com/traffic/components/date-range-selector.js"></script> | |
<!-- Include the ActiveUsers component script. --> | |
<script src="http://dannyrb.com/traffic/components/active-users.js"></script> | |
<main> | |
<h1>Traffic For The Last 30 Days</h1> | |
<section> | |
<h2 id="view-name"></h2> | |
<div class="t" id="view-selector-container"></div> | |
<div class="t" id="active-users-container"></div> | |
<div class="row"> | |
<div class="col"> | |
<div class="chart" id="chart-1-container"></div> | |
<div class="legend" id="legend-1-container"></div> | |
</div> | |
<div class="col"> | |
<div class="chart" id="chart-2-container"></div> | |
<div class="legend" id="legend-2-container"></div> | |
</div> | |
</div> | |
<div class="row"> | |
<div class="col"> | |
<div class="chart" id="chart-3-container"></div> | |
<div class="legend" id="legend-3-container"></div> | |
</div> | |
<div class="col"> | |
<div class="chart" id="chart-4-container"></div> | |
<div class="legend" id="legend-4-container"></div> | |
</div> | |
</div> | |
</section> | |
</main> | |
<script> | |
gapi.analytics.ready(function() { | |
/** | |
* Authorize the user with an access token obtained server side. | |
*/ | |
gapi.analytics.auth.authorize({ | |
'serverAuth': { | |
'access_token': '<?php print_r($myToken["access_token"]); ?>' | |
} | |
}); | |
/** | |
* Create a new ActiveUsers instance to be rendered inside of an | |
* element with the id "active-users-container" and poll for changes every | |
* five seconds. | |
*/ | |
var activeUsers = new gapi.analytics.ext.ActiveUsers({ | |
container: 'active-users-container', | |
pollingInterval: 5 | |
}); | |
/** | |
* Add CSS animation to visually show the when users come and go. | |
*/ | |
activeUsers.once('success', function() { | |
var element = this.container.firstChild; | |
var timeout; | |
this.on('change', function(data) { | |
var element = this.container.firstChild; | |
var animationClass = data.delta > 0 ? 'is-increasing' : 'is-decreasing'; | |
element.className += (' ' + animationClass); | |
clearTimeout(timeout); | |
timeout = setTimeout(function() { | |
element.className = | |
element.className.replace(/ is-(increasing|decreasing)/g, ''); | |
}, 3000); | |
}); | |
}); | |
/** | |
* Create a new ViewSelector2 instance to be rendered inside of an | |
* element with the id "view-selector-container". | |
*/ | |
var viewSelector = new gapi.analytics.ext.ViewSelector2({ | |
container: 'view-selector-container', | |
}) | |
.execute(); | |
/** | |
* Update the activeUsers component, the Chartjs charts, and the dashboard | |
* title whenever the user changes the view. | |
*/ | |
viewSelector.on('viewChange', function(data) { | |
var title = document.getElementById('view-name'); | |
title.innerHTML = data.property.name + ' (' + data.view.name + ')'; | |
// Start tracking active users for this view. | |
activeUsers.set(data).execute(); | |
// Render all the of charts for this view. | |
renderWeekOverWeekChart(data.ids); | |
renderYearOverYearChart(data.ids); | |
renderTopBrowsersChart(data.ids); | |
renderTopCountriesChart(data.ids); | |
}); | |
/** | |
* Draw the a chart.js line chart with data from the specified view that | |
* overlays session data for the current week over session data for the | |
* previous week. | |
*/ | |
function renderWeekOverWeekChart(ids) { | |
// Adjust `now` to experiment with different days, for testing only... | |
var now = moment(); // .subtract(3, 'day'); | |
var thisWeek = query({ | |
'ids': ids, | |
'dimensions': 'ga:date,ga:nthDay', | |
'metrics': 'ga:sessions', | |
'start-date': moment(now).subtract(1, 'day').day(0).format('YYYY-MM-DD'), | |
'end-date': moment(now).format('YYYY-MM-DD') | |
}); | |
var lastWeek = query({ | |
'ids': ids, | |
'dimensions': 'ga:date,ga:nthDay', | |
'metrics': 'ga:sessions', | |
'start-date': moment(now).subtract(1, 'day').day(0).subtract(1, 'week') | |
.format('YYYY-MM-DD'), | |
'end-date': moment(now).subtract(1, 'day').day(6).subtract(1, 'week') | |
.format('YYYY-MM-DD') | |
}); | |
Promise.all([thisWeek, lastWeek]).then(function(results) { | |
var data1 = results[0].rows.map(function(row) { return +row[2]; }); | |
var data2 = results[1].rows.map(function(row) { return +row[2]; }); | |
var labels = results[1].rows.map(function(row) { return +row[0]; }); | |
labels = labels.map(function(label) { | |
return moment(label, 'YYYYMMDD').format('ddd'); | |
}); | |
var data = { | |
labels : labels, | |
datasets : [ | |
{ | |
label: 'Last Week', | |
fillColor : 'rgba(220,220,220,0.5)', | |
strokeColor : 'rgba(220,220,220,1)', | |
pointColor : 'rgba(220,220,220,1)', | |
pointStrokeColor : '#fff', | |
data : data2 | |
}, | |
{ | |
label: 'This Week', | |
fillColor : 'rgba(151,187,205,0.5)', | |
strokeColor : 'rgba(151,187,205,1)', | |
pointColor : 'rgba(151,187,205,1)', | |
pointStrokeColor : '#fff', | |
data : data1 | |
} | |
] | |
}; | |
new Chart(makeCanvas('chart-1-container')).Line(data); | |
generateLegend('legend-1-container', data.datasets); | |
}); | |
} | |
/** | |
* Draw the a chart.js bar chart with data from the specified view that | |
* overlays session data for the current year over session data for the | |
* previous year, grouped by month. | |
*/ | |
function renderYearOverYearChart(ids) { | |
// Adjust `now` to experiment with different days, for testing only... | |
var now = moment(); // .subtract(3, 'day'); | |
var thisYear = query({ | |
'ids': ids, | |
'dimensions': 'ga:month,ga:nthMonth', | |
'metrics': 'ga:users', | |
'start-date': moment(now).date(1).month(0).format('YYYY-MM-DD'), | |
'end-date': moment(now).format('YYYY-MM-DD') | |
}); | |
var lastYear = query({ | |
'ids': ids, | |
'dimensions': 'ga:month,ga:nthMonth', | |
'metrics': 'ga:users', | |
'start-date': moment(now).subtract(1, 'year').date(1).month(0) | |
.format('YYYY-MM-DD'), | |
'end-date': moment(now).date(1).month(0).subtract(1, 'day') | |
.format('YYYY-MM-DD') | |
}); | |
Promise.all([thisYear, lastYear]).then(function(results) { | |
var data1 = results[0].rows.map(function(row) { return +row[2]; }); | |
var data2 = results[1].rows.map(function(row) { return +row[2]; }); | |
var labels = ['Jan','Feb','Mar','Apr','May','Jun', | |
'Jul','Aug','Sep','Oct','Nov','Dec']; | |
// Ensure the data arrays are at least as long as the labels array. | |
// Chart.js bar charts don't (yet) accept sparse datasets. | |
for (var i = 0, len = labels.length; i < len; i++) { | |
if (data1[i] === undefined) data1[i] = null; | |
if (data2[i] === undefined) data2[i] = null; | |
} | |
var data = { | |
labels : labels, | |
datasets : [ | |
{ | |
label: 'Last Year', | |
fillColor : 'rgba(220,220,220,0.5)', | |
strokeColor : 'rgba(220,220,220,1)', | |
data : data2 | |
}, | |
{ | |
label: 'This Year', | |
fillColor : 'rgba(151,187,205,0.5)', | |
strokeColor : 'rgba(151,187,205,1)', | |
data : data1 | |
} | |
] | |
}; | |
new Chart(makeCanvas('chart-2-container')).Bar(data); | |
generateLegend('legend-2-container', data.datasets); | |
}) | |
.catch(function(err) { | |
console.error(err.stack); | |
}); | |
} | |
/** | |
* Draw the a chart.js doughnut chart with data from the specified view that | |
* show the top 5 browsers over the past seven days. | |
*/ | |
function renderTopBrowsersChart(ids) { | |
query({ | |
'ids': ids, | |
'dimensions': 'ga:browser', | |
'metrics': 'ga:pageviews', | |
'sort': '-ga:pageviews', | |
'max-results': 5 | |
}) | |
.then(function(response) { | |
var data = []; | |
var colors = ['#4D5360','#949FB1','#D4CCC5','#E2EAE9','#F7464A']; | |
response.rows.forEach(function(row, i) { | |
data.push({ value: +row[1], color: colors[i], label: row[0] }); | |
}); | |
new Chart(makeCanvas('chart-3-container')).Doughnut(data); | |
generateLegend('legend-3-container', data); | |
}); | |
} | |
/** | |
* Draw the a chart.js doughnut chart with data from the specified view that | |
* compares sessions from mobile, desktop, and tablet over the past seven | |
* days. | |
*/ | |
function renderTopCountriesChart(ids) { | |
query({ | |
'ids': ids, | |
'dimensions': 'ga:country', | |
'metrics': 'ga:sessions', | |
'sort': '-ga:sessions', | |
'max-results': 5 | |
}) | |
.then(function(response) { | |
var data = []; | |
var colors = ['#4D5360','#949FB1','#D4CCC5','#E2EAE9','#F7464A']; | |
response.rows.forEach(function(row, i) { | |
data.push({ | |
label: row[0], | |
value: +row[1], | |
color: colors[i] | |
}); | |
}); | |
new Chart(makeCanvas('chart-4-container')).Doughnut(data); | |
generateLegend('legend-4-container', data); | |
}); | |
} | |
/** | |
* 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.<Object>} items A list of labels and colors for the legend. | |
*/ | |
function generateLegend(id, items) { | |
var legend = document.getElementById(id); | |
legend.innerHTML = items.map(function(item) { | |
var color = item.color || item.fillColor; | |
var label = item.label; | |
return '<li><i style="background:' + color + '"></i>' + label + '</li>'; | |
}).join(''); | |
} | |
// Set some global Chart.js defaults. | |
Chart.defaults.global.animationSteps = 60; | |
Chart.defaults.global.animationEasing = 'easeInOutQuart'; | |
Chart.defaults.global.responsive = true; | |
Chart.defaults.global.maintainAspectRatio = false; | |
}); | |
</script> | |
</body> | |
</html> |