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> |