Google Analytics Embed API: Set selector display defaults

Question

I am using the Google Analytics Embed API. Below is the code example that I'm working with from Google's Development page. Is there a way to set the defaults for the Selector? Account | Property | View

<!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 = 'xxxxx'; // obtained from your service account

        gapi.analytics.auth.authorize({
            serverAuth: {
            access_token: ACCESS_TOKEN
            }
        });


        /**
           * 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:users',
           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>

</head>

<body> 

    <div id="embed-api-auth-container"></div>
    <div id="chart-container"></div>
    <div id="view-selector-container"></div> 

</body>
</html>

I didn't find any ways to set default 'ids' for view selector unfortunately. — whyleee
As an alternative you can take a look at Web Components implementation of embed API: demo, api, code. It does support setting 'ids' to the view selector. I just tested this and created a git repo with example. — whyleee
And yet another option is to use ViewSelector2 component from Google Account Explorer demo page, if you don't want to dig into Web Components/Polymer and have a lot of dependencies. Get the code on GitHub: view-selector2.js. — whyleee
Addition to previous comment: use viewSelector.set({viewId: '{your_view_id}'}); function. See how it is used in Google website: index.js. — whyleee

Matthew Macartney Matthew Macartney · Accepted Answer · 2014-12-18T16:30:04

You first want to find the ids value of the account you want as your default. You do this by simply console logging 'ids' and then choosing the selector in your view-selector-container. This will past a number in your browsers console. You then need to set the value of 'ids' to this number. You change this in two places, firstly you add it into your query for dataChart. So for example if your ids number was 12345678 then you would write it as shown below ( ids: 'ga:12345678' ):

var dataChart = new gapi.analytics.googleCharts.DataChart({
         query: {

         ids: 'ga:12345678',

         metrics: 'ga:users',
         dimensions: 'ga:date',
         'start-date': '30daysAgo',
         'end-date': 'yesterday'
         },
         chart: {
         container: 'chart-container',
         type: 'LINE',
         options: {
         width: '100%'
            }
        }
      });

You then also need to change the value of ids where you execute dataChart

viewSelector.on('change', function(ids) {
    dataChart.set({query: {ids: ids}}).execute();
});

so inside the query the second 'ids' is changed as shown below:

viewSelector.on('change', function(ids) {
    dataChart.set({query: {ids: 'ga:12345678'}}).execute();
    });

Google Analytics Embed API: Set selector display defaults

2 Answers