Google Analytics API in Your Website

Question

User-1664485818 posted

Hi everyone, I'm trying to embed Google Analytics within my web project.

I have followed the following tutorial;

https://ga-dev-tools.appspot.com/embed-api/third-party-visualizations/

I have created my Client ID and configured Google Analytics to work with my localhost...

But, I only received the following data;

You are logged in as: [e-mail]

This Week vs Last Week (by sessions)

Blank

This Year vs Last Year (by users)

Blank

Top Browsers (by pageview)

Blank

Top Countries (by sessions)

Blank

Errors from Google Chrome development tool;

Failed to load resource: the server responded with a status of 404 (Not Found)

(index):1 Refused to apply style from 'http://localhost:56973/public/css/chartjs-visualizations.css' because its MIME type ('') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

active-users.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)

view-selector2.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)

date-range-selector.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)

active-users.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)

(index):1 Refused to apply style from 'http://localhost:56973/public/css/chartjs-visualizations.css' because its MIME type ('') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Answer 1

User1520731567 posted

Hi brucey,

I find there are many 404 in your error massages.

Have you forgotten to import the reference package?

Or the path of reference package is worry?

I refer to the link you post,you need to load the components and their dependencies:

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

<!-- Include the ViewSelector2 component script. -->
<script src="/public/javascript/embed-api/components/view-selector2.js"></script>

<!-- Include the DateRangeSelector component script. -->
<script src="/public/javascript/embed-api/components/date-range-selector.js"></script>

<!-- Include the ActiveUsers component script. -->
<script src="/public/javascript/embed-api/components/active-users.js"></script>

<!-- Include the CSS that styles the charts. -->
<link rel="stylesheet" href="/public/css/chartjs-visualizations.css">

Best Regards.

Yuki Tao

Answer 2

User-1664485818 posted

Hi Yuki,

I’m a bit confused with loading the components and their dependencies, the tutorial mentions 3 components

Chart.js

Google APIs client library

 Real Time Reporting API

I have installed Chart.js and Google APIs client library, but I can’t find any of the following;

view-selector2.js

date-range-selector.js

active-users.js

chartjs-visualizations.css

Any ideas?

Answer 3

User1520731567 posted

Hi brucey,

Try this code:

<!-- Include the ViewSelector2 component script. -->
<script src="https://ga-dev-tools.appspot.com/public/javascript/embed-api/components/view-selector2.js"></script>

<!-- Include the DateRangeSelector component script. -->
<script src="https://ga-dev-tools.appspot.com/public/javascript/embed-api/components/date-range-selector.js"></script>

<!-- Include the ActiveUsers component script. -->
<script src="https://ga-dev-tools.appspot.com/public/javascript/embed-api/components/active-users.js"></script>

<!-- Include the CSS that styles the charts. -->
<link rel="stylesheet" href="https://ga-dev-tools.appspot.com/public/css/chartjs-visualizations.css">

Best Regards.

Yuki Tao

Answer 4

User-1664485818 posted

Receiving the following errors 

Uncaught ReferenceError: gapi is not defined
at Object.<anonymous> (view-selector2.js:1)
at e (view-selector2.js:1)
at view-selector2.js:1
at view-selector2.js:1
date-range-selector.js:1 Uncaught ReferenceError: gapi is not defined
at Object.130 (date-range-selector.js:1)
at e (date-range-selector.js:1)
at date-range-selector.js:1
at date-range-selector.js:1
active-users.js:1 Uncaught ReferenceError: gapi is not defined
at Object.129 (active-users.js:1)
at e (active-users.js:1)
at active-users.js:1
at active-users.js:1
message_handler.js:15 dcePageScanner::scanPage::Offline
message_handler.js:15 dcePageScanner::scanPage::Offline
cb=gapi.loaded_0:78 Uncaught TypeError: Cannot read property 'ActiveUsers' of undefined
at Array.<anonymous> ((index):316)
at yv (cb=gapi.loaded_0:754)
at cb=gapi.loaded_0:755
at cb=gapi.loaded_0:731
at f (cb=gapi.loaded_0:728)
at h.r2 (cb=gapi.loaded_0:86)
at xs (cb=gapi.loaded_0:89)
at Wq (cb=gapi.loaded_0:89)
at _.C.uea (cb=gapi.loaded_0:89)
at Ap (cb=gapi.loaded_0:82)

Answer 5

User-271186128 posted

Hi brucey,

Google Analytics API in Your Website

Uncaught ReferenceError: gapi is not defined

Please check your code, and make sure you have add the Google Analytics API reference:

<!-- Load the JavaScript API client and Sign-in library. -->
<script src="https://apis.google.com/js/client:platform.js"></script>

Here are some related articles about using Google Analytics API, you could refer to them:

Access the Analytics Reporting API using JavaScript.

gapi is not defined - Google sign in issue with gapi.auth2.init

Best regards,
Dillion