Google Analytics Embed API demo not showing at all -
i replicating google analytics embed api demos, can find here. far, have been able replicate basic dashboard, multiple date ranges, multiple views , interactive charts using clientid 1 giving me trouble third party visualizations , following steps according posted. way step 3 using full path "https://ga-dev-tools.appspot.com/public/..." once log in google account, embed-api-auth-container not charts. using following code: (apologies, new stackoverflow)
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>thirtd party visualizations</title> <link rel="stylesheet" href="https://ga-dev-tools.appspot.com/public/css/main.css" /> <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> </head> <body> <div id="embed-api-auth-container"></div> <div id="view-selector-container"></div> <div id="active-users-container"></div> <div id="chart-1-container"></div> <div id="legend-1-container"></div> <div id="chart-2-container"></div> <div id="legend-2-container"></div> <div id="chart-3-container"></div> <div id="legend-3-container"></div> <div id="chart-4-container"></div> <div id="legend-4-container"></div> </body> <script src="https://ga-dev-tools.appspot.com/public/javascript/chart.min.js"></script> <script src="https://ga-dev-tools.appspot.com/public/javascript/moment.min.js"></script> <script src="https://ga-dev-tools.appspot.com/public/javascript/embed-api/view-selector2.js"></script> <script src="https://ga-dev-tools.appspot.com/public/javascript/embed-api/date-range-selector.js"></script> <script src="https://ga-dev-tools.appspot.com/public/javascript/embed-api/active-users.js"></script> <script> gapi.analytics.ready(function() { gapi.analytics.auth.authorize({ container: 'embed-api-auth-container', clientid: 'xxxx', }); var activeusers = new gapi.analytics.ext.activeusers({ container: 'active-users-container', pollinginterval: 5 }); 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); }); }); var viewselector = new gapi.analytics.ext.viewselector2({ container: 'view-selector-container', }) .execute(); viewselector.on('viewchange', function(data) { var title = document.getelementbyid('view-name'); title.innerhtml = data.property.name + ' (' + data.view.name + ')'; activeusers.set(data).execute(); renderweekoverweekchart(data.ids); renderyearoveryearchart(data.ids); rendertopbrowserschart(data.ids); rendertopcountrieschart(data.ids); }); function renderweekoverweekchart(ids) { // adjust `now` experiment different days, testing only... var = 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); }); } function renderyearoveryearchart(ids) { // adjust `now` experiment different days, testing only... var = 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']; (var = 0, len = labels.length; < 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); }) } 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); }); } 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); }); } 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(); }); } 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; } 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(''); } chart.defaults.global.animationsteps = 60; chart.defaults.global.animationeasing = 'easeinoutquart'; chart.defaults.global.responsive = true; chart.defaults.global.maintainaspectratio = false; }); </script> </html>
the example code linked missing elements , needs updated.
check out bug on github has workaround , allows track progress of fix: https://github.com/googleanalytics/ga-dev-tools/issues/51
Comments
Post a Comment