apigoogle-analyticsembedgoogle-analytics-apipolymer-elements

Embed Google Analytics Map View using API

I'm trying to display the "Active Users on Site" count and their location on a US map. We have Google Analytics installed and our dashboard is picking up live data. I'm trying to insert this onto a webpage hosted on our server to display on various screens inside our company building.

I've read through this documentation but I'm not seeing anything displayed on my webpage where this code is placed. It is simply a white screen, no errors in console.

Looking at this part, Polymer Elements, it looks like it is possible and I've inserted the HTML elements to do so. Yet, nothing.

Here is my code below with the CLIENT ID removed for privacy.

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

    <google-analytics-chart
      type="area"
      metrics="ga:sessions"
      dimensions="ga:date"
      startDate="30daysAgo"
      endDate="yesterday">
    </google-analytics-chart>

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


  var CLIENT_ID = 'REMOVED-FOR-PRIVACY';

  gapi.analytics.auth.authorize({
    container: 'auth-button',
    clientid: CLIENT_ID,
  });

  // Step 4: Create the view selector.

  var viewSelector = new gapi.analytics.ViewSelector({
    container: 'view-selector'
  });

  // Step 5: Create the timeline chart.

  var chart = new gapi.analytics.googleCharts.DataChart({
    query: {
      'dimensions': 'ga:country',
      'metrics': 'ga:sessions',
      'start-date': '30daysAgo',
      'end-date': 'yesterday',
    },
    chart: {
      type: 'GEO',
      container: 'timeline',
      options: {
        region: '1', // Western Europe
        displayMode: 'markers'
      }
    }
  });

  // 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
      }
    }
    chart.set(newIds).execute();
  });
});
</script>
</body>
</html>

Ultimately, I'd like to embed and display the two elements below:

Google Analytics Dashboard

Solution

  • I think those polymer elements are for viewing data on GA accounts that the visitor has access to, not for you to display results to users about your site.

    I would suggest that you use Google Data Studio and create a report. Then embed the report on your webpage. https://support.google.com/datastudio/answer/7450249?hl=en

    Also note that this won't be live data, you can use the real time api for that, but I'm not aware of any out of the box solutions to display the data.