I'm using the embed api to show some data from GA into a chart but the api only supports basic stuff (LINE, COLUMN, BAR, TABLE, and GEO.).
Is there any way I can use the embed api with the Google Charts library?
Like using a piechart instead of a columnchart?
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>ChartDemo</title>
</head>
<body>
<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>
<div id="embed-api-auth-container"></div>
<div id="chart-container"></div>
<div id="view-selector-container"></div>
<script>
gapi.analytics.ready(function() {
/**
* Authorize the user immediately if the user has already granted access.
* If no access has been created, render an authorize button inside the
* element with the ID "embed-api-auth-container".
*/
gapi.analytics.auth.authorize({
container: 'embed-api-auth-container',
clientid: 'supersecretclientid.apps.googleusercontent.com'
});
/**
* Create a new ViewSelector instance to be rendered inside of an
* element with the id "view-selector-container".
*/
var viewSelector = new gapi.analytics.ViewSelector({
container: 'view-selector-container'
});
// Render the view selector to the page.
viewSelector.execute();
/**
* Create a new DataChart instance with the given query parameters
* and Google chart options. It will be rendered inside an element
* with the id "chart-container".
*/
var dataChart = new gapi.analytics.googleCharts.DataChart({
query: {
metrics: 'ga:sessions',
dimensions: 'ga:date',
'start-date': '30daysAgo',
'end-date': 'yesterday'
},
chart: {
container: 'chart-container',
type: 'COLUMN',
options: {
width: '100%'
}
}
});
/**
* Render the dataChart on the page whenever a new view is selected.
*/
viewSelector.on('change', function(ids) {
dataChart.set({query: {ids: ids}}).execute();
});
});
</script>
</body>
</html>
Not only can you use Google Charts to display the results, you can choose whichever third-party visualization library you like.
More information and demo here: https://ga-dev-tools.appspot.com/embed-api/third-party-visualizations/
Found the solution, had to download and run an sdk which can be found on the github page. Otherwise, the gapi.analytics.ext statement won't be defined...
Late to the party:
you can show PIE charts as well,
/**
* Create a new DataChart instance with the given query parameters
* and Google chart options. It will be rendered inside an element
* with the id "chart-container".
*/
var dataChart = new gapi.analytics.googleCharts.DataChart({
query: {
metrics: 'ga:sessions',
dimensions: 'ga:date',
'start-date': '30daysAgo',
'end-date': 'yesterday'
},
chart: {
container: 'chart-container',
type: 'PIE',
options: {
width: '100%',
'pieHole': 4 / 9, // **pay attention here**
'colors': ['#14dd9f', '#ffffff', '#61d3ff','#ffff7b','#ff5e64','#ff991c']
}
}
});
dataChart.execute();
Related
I have a dashboard in which I need to incorporate Google Analytics charts. Each chart is a different widget and can be removed from or added to the dashboard. The charts display properly when there is only ONE added to the dashboard. When I add two, they don't display anything anymore. Could the fact that I call the same Embed API library in each widget cause this?
An example of the code I am using for each widget:
<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>
<div id="embed-api-auth-container-1"></div>
<div id="chart-container-1"></div>
<div id="view-selector-container-1"></div>
<script>
gapi.analytics.ready(function() {
gapi.analytics.auth.authorize({
container: 'embed-api-auth-container-1',
clientid: '***'
});
var viewSelector = new gapi.analytics.ViewSelector({
container: 'view-selector-container-1'
});
viewSelector.execute();
var dataChart = new gapi.analytics.googleCharts.DataChart({
query: {
metrics: 'ga:sessions',
dimensions: 'ga:date',
'start-date': '30daysAgo',
'end-date': 'yesterday'
},
chart: {
container: 'chart-container-1',
type: 'LINE',
options: {
width: '100%'
}
}
});
viewSelector.on('change', function(ids) {
dataChart.set({query: {ids: ids}}).execute();
});
});
</script>
Managed to temporarily fix this by calling the Embed API library ONLY in the first widget that appears on the page. Not ideal, but it works for now. If anybody figures out the right solution, I'd like to know.
I am creating simple app that renders Google Analytics data in view.
By using multiple examples I have set up everything. Few queries work without problem, but I can't retrieve info about audience, especially, userGender.
I don't receive any error message in view, but just "No data" message.
My code in view:
<div id="chart-2-container"></div>
<div id="view-selector-2-container"></div>
<script>
var viewSelector2 = new gapi.analytics.ViewSelector({
container: 'view-selector-2-container'
});
viewSelector2.execute();
var dataChart2 = new gapi.analytics.googleCharts.DataChart({
query: {
metrics: 'ga:users',
dimensions: 'ga:userGender',
'start-date': '60daysAgo',
'end-date': 'today',
'max-results': 6,
},
chart: {
container: 'chart-2-container',
type: 'PIE',
options: {
width: '100%',
pieHole: 4/9
}
}
});
viewSelector2.on('change', function(ids) {
dataChart2.set({query: {ids: ids}}).execute();
});
</script>
Note: I just showed code for that query that doesn't work, I have other ones that work great (See attached pic):
I tried the same query in query-explorer and received no data message too.
In Audience - Dimensions & Metrics Explorer under ga:userGender dimension isn't requered any metrics, but in Query Explorer they required metric (See in above example).
What could be possible problem and solution for this?
Thanks.
Hi all
I am new for google analytics embed api. And I am trying to use access token in order to get data without user consent. I've got a Key for browser applications in google developer console. But I couldn't figure out how to use it. Here is my code. It doesn't work (I've set the reference to any reference allowed):
Thanks.
<!DOCTYPE html>
<html>
<head>
<title>Embed API Demo</title>
</head>
<body>
<!-- Step 1: Create the containing elements. -->
<section id="auth-button"></section>
<section id="view-selector"></section>
<section id="timeline"></section>
<!-- Step 2: Load the library. -->
<script>
(function(w,d,s,g,js,fjs){
g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(cb){this.q.push(cb)}};
js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
js.src='https://apis.google.com/js/platform.js';
fjs.parentNode.insertBefore(js,fjs);js.onload=function(){g.load('analytics')};
}(window,document,'script'));
</script>
<script>
gapi.analytics.ready(function() {
// Step 3: Authorize the user.
gapi.analytics.auth.authorize({
serverAuth: {
access_token: 'XXXXX' // do not share sensible data
}
});
// Step 4: Create the view selector.
var viewSelector = new gapi.analytics.ViewSelector({
container: 'view-selector'
});
// Step 5: Create the timeline chart.
var timeline = new gapi.analytics.googleCharts.DataChart({
reportType: 'ga',
query: {
'dimensions': 'ga:date',
'metrics': 'ga:sessions',
'start-date': '30daysAgo',
'end-date': 'yesterday',
},
chart: {
type: 'LINE',
container: 'timeline'
}
});
// Step 6: Hook up the components to work together.
gapi.analytics.auth.on('success', function(response) {
viewSelector.execute();
});
viewSelector.on('change', function(ids) {
var newIds = {
query: {
ids: ids
}
}
timeline.set(newIds).execute();
});
});
</script>
</body>
</html>
I have embedded the Google Analytics API to my website (developed using php, yii2 framework). I would like to create a custom metric to include in my chart. The value for my custom metric would be from my database. From the documentation, I tried using the following snippet:
var metric1Value = <?= $modelValue; ?>
ga('set', 'metric1', metric1Value);
This however results in an error stating that 'ga' is undefined. Is it even possible to create a custom metric in Google Analytics? If it is, how can it be achieved?
Here's an overview of my code if it helps. I've followed the tutorial:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div>Analytics Test</div>
<div id="embed-api-auth-container"></div>
<div id="view-selector-container" style="display:none;"></div>
<div id="date-range-selector-container"></div>
<div id="table-container" style="margin:5%"></div>
<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'));
gapi.analytics.ready(function() {
gapi.analytics.auth.authorize({
container: 'embed-api-auth-container',
clientid: 'myclientid'
});
var dataChart = new gapi.analytics.googleCharts.DataChart({
reportType: 'ga',
query: {
'start-date':'50daysAgo',
'end-date':'yesterday',
'metrics': [['ga:sessions', 'ga:users', 'ga:newUsers', 'ga:pageviews']],
'dimensions': [['ga:date']],
},
chart: {
container: 'table-container',
type: 'TABLE',
options: {
width: '80%'
}
}
});
});
</script>
Any help would be greatly appreciated.
Syntax you're using is for tracking custom metric on your website, and code you're using is for showing report data. If you want to show custom metric then add ga:metric1 in your metric list
e.g.
'metrics': [['ga:sessions', 'ga:users', 'ga:newUsers', 'ga:pageviews']]
will be
'metrics': [['ga:sessions', 'ga:users', 'ga:newUsers', 'ga:pageviews', 'ga:metric1']]
Note: Your metric needs to be configured in Google Analytics Account Panel
How would I make this Google Analytic Embed API chart responsive? I noticed that the demo on this page is reponsive: https://ga-dev-tools.appspot.com/embed-api/basic-dashboard/
I have also seen various ways of doing this with Google Charts here
https://code.google.com/p/google-visualization-api-issues/issues/detail?id=1056
<!doctype html>
<html lang="en">
<head>
<title>Google Charts</title>
<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>
<script>
gapi.analytics.ready(function() {
var ACCESS_TOKEN = 'XXX'; // obtained from your service account
gapi.analytics.auth.authorize({
serverAuth: {
access_token: ACCESS_TOKEN
}
});
var linechart = new gapi.analytics.googleCharts.DataChart({
query: {
ids: 'ga:XXXXXX',
metrics: 'ga:users',
dimensions: 'ga:date',
'start-date': '30daysAgo',
'end-date': 'yesterday'
},
chart: {
type: 'LINE',
container: 'line-chart',
options: {
width: '100%',
title: 'Test.com: Visitors over the past 30 days.',
fontSize: 12
}
}
});
linechart.on('success', function(response) {
// response.chart : the Google Chart instance.
// response.data : the Google Chart data object.
});
linechart.execute();
});
</script>
</head>
<body>
<div>
<div id="embed-api-auth-container"></div>
<div id="line-chart" style='width:100%;height:300px;'></div>
</div>
</body>
</html>
I answered this over here
(Google Embed API) How to change chart-table-style width
Basically you just add an option element and assign width of x% within the charts option element
I just noticed the same issue, setting:
options: {
width: '100%'
}
doesn't work when document width changes (only 'TABLE' chart is responsive 'out of the box').
As workaround, you need to trigger a chart redraw on window resize:
window.addEventListener('resize', function() {
linechart.execute();
});
Sidenotes:
linked Google page doesn't seems to use this or whatelse workarounds to have the chart responsive but the behavior is the same;
if you have animations enabled in your chart those animations might be played multiple times on window resize;
I was using google analytics API and I had the same issue but it worked for me by adding
options:{width:'100%'}
chart: {
type: 'LINE',
container: 'timeline',
options: {width: '100%'}
}