Google Analytics Server Side Authorization to get

Question

How can I display visitor count to your web page without having to logging in or authenticating like Google Analytics?

I'm trying to implement Google Analytics Server Side Authorization to get Page View Count analytics data and display it to random visitors on the front page

I read their docs and found service account but the issue is that there is no full example of doing it written in JavaScript.

I tried this implementation. However, there is no client_email in googleServiceAccountKey. Where do I get client_email ? Please share hwo to do Server Side Authorization on node.js + react apps! thanks

import google from 'googleapis'
import googleServiceAccountKey from '/path/to/private/google-service-account-private-key.json' // see docs on how to generate a service account

const googleJWTClient = new google.auth.JWT(
  googleServiceAccountKey.client_email,
  null,
  googleServiceAccountKey.private_key,
  ['https://www.googleapis.com/auth/analytics.readonly'], // You may need to specify scopes other than analytics
  null,
)

googleJWTClient.authorize((error, access_token) => {
   if (error) {
      return console.error("Couldn't get access token", e)
   }
   // ... access_token ready to use to fetch data and return to client
   // even serve access_token back to client for use in `gapi.analytics.auth.authorize`
})

I've tried examples with authentication buttons but I don't want users have to authenticate in order to see a page view count. https://developers.google.com/analytics/devguides/reporting/core/v4/quickstart/web-js

/* Non Google Analytics API*/ https://www.freevisitorcounters.com/ One example that counts every time user refresh the page which is wrong implementation. http://javascriptexample.blogspot.de/2008/09/visit-counter.html

Does anyone know how to do this? Or other libraries or solutions are welcome too.

thanks in advance!

Answer 1

In order to display the count on your website along with other components such as charts, you can use the Embed API.

Step 1 - Load the 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>

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 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: 'REPLACE WITH YOUR CLIENT ID'
});


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

See link for further details: https://ga-dev-tools.appspot.com/embed-api/basic-dashboard/

Answer 2

I found a solution just today actually to display data without authentication.

Google has a tool called data studio.
https://datastudio.google.com/

You can link this to your Google analytics account.
After you create an account you build a dashboard to present to the users with graphs tables and charts or what you want.
It's easy click and drag.
Then you can click the embed button and get a html code you add to your webpage.
It's a simple one line ifram tag.

This is the dashboard I made today, it took me about 20-30 minutes.
http://www.hoppvader.nu/Data.php

Much simpler than authentication and using Json strings to build an own dashboard in my opinion.

---

EDIT: I have now noticed the dashboard shows as private.
You can fix this by going to the main screen of Google data studio.
Click the menu button on the dashboard you want public.
Click Share.
Advanced.
Click on change at "Who has access" and change it to public and save.

If it still does not work, it may be that the data from Google analytics require user authentication.

Go to the main screen of Google Data studio and click "Data sources" in the menu to the left.
Click on the data source from Google analytics.
Make sure it's set to "USING OWNER'S CREDENTIALS" at the top right corner.