I am trying out this Embed API tutorial which doesn't seem to be working for me:
https://developers.google.com/analytics/devguides/reporting/embed/v1/getting-started
This is my code following, with the steps followed to create the client ID:
<!DOCTYPE html>
<html>
<head>
<title>Embed API Demo</title>
</head>
<body>
<!-- Step 1: Load the Embed API 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>
<!-- Step 2: Add HTML containers to host the dashboard components. -->
<div id="embed-api-auth-container"></div>
<div id="chart-container"></div>
<div id="view-selector-container"></div>
<!-- Step 3: Write the dashboard code. -->
<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: 'CLIENT ID' <!-- I put my actual client ID here in the file -->
});
/**
* 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: 'LINE',
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>
I follow the steps perfectly, but it does not render in the page and I don't get any helpful errors, just a blank page.
My question is: Do I have to be using this on an authorised domain? There are authorised domain steps, but it does not accept localhost (which doesn't make sense when you're just trying out an app). So I am currently opening this file in localhost:5500/home.html. I added my own html in there just to check the actual file is loading, which it is. The JS just isn't rendering, so I am assuming it is a problem with my client ID and the setup with authorised domains?
Does anyone have any experience of this, and can suggest a way to test google oauth2 functions on localhost?
Thanks.
question from:
https://stackoverflow.com/questions/66066299/google-analytics-oauth2-client-id-localhost 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
