Get IDs programatically

[cfjedimaster]

From the demo, you can see that google-analytics-view-selector will give you a nice UI to select a GA view. But how do I get access to that data via JS? For example, imagine I don't want a view picker, but I simply want to iterate over the IDs and display a chart for them all. Or perhaps I just don't like the view picker and want to do my own.

[philipwalton]

The <google-analytics-chart> element (which extends from <google-analytics-query>) takes an ids parameter, so if you know your view ID / ids values, you could easily display charts without using a view selector.

<google-analytics-chart
  type="column"
  ids="ga:1234"
  metrics="ga:sessions"
  dimensions="ga:country"
  sort="-ga:sessions"
  maxResults="5">
</google-analytics-chart>

Check out the documentation page to see all the options, but basically any parameter from the Core Reporting API is supported.

If you want access to the result of a query in JavaScript, you can use Polymer's data binding in a template:

<google-analytics-query
  data="{{myVariable}}"
  ids="ga:1234"
  metrics="ga:sessions"
  dimensions="ga:country"
  sort="-ga:sessions"
  maxResults="5">
</google-analytics-query>

In the above example myVariable will be bound to the result of the query. If you change any of the other attributes, the query will be re-run and you can listen for changes to myVariable via Polymer's change watchers.

[cfjedimaster]

I don't think I'm being clear. :) I don't want to hard code the IDs. I want to get the IDs via JS. Again, imagine I'm building a dashboard but I don't want to use the view selector you guys built. I want to get the IDs and build something else with it, so I can then set the ID myself. Make sense?

[philipwalton]

Sorry, if you want to build a view selector yourself you'd either have to reimplement <google-analytics-view-selector> (check out the code to see how I did it) or you could simply make your own custom element that extends <google-analytics-view-selector> and implement your own UI. (The latter is probably much easier!)

Internally, the view selector queries the Management API's accountSummaries method to get the accounts the user has access to, so ultimately you'd have to do something like that yourself if you wanted to rebuild this from scratch.

[cfjedimaster]

Ok. But - don't you think a good ER would be for google-analytics-dashboard to be populated with the IDs so you can fetch it if you need it? Or would that be bad since some people may want to use hard coded IDs? Maybe a new attribute, autoloadids, could be used.

On Wed, Jul 9, 2014 at 5:28 PM, Philip Walton notifications@github.com wrote:

Sorry, if you want to build a view selector yourself you'd either have to reimplement (check out the code https://github.com/GoogleWebComponents/google-analytics/blob/master/google-analytics-view-selector.html to see how I did it) or you could simply make your own custom element that extends and implement your own UI. (The latter is probably much easier!)

Internally, the view selector queries the Management API's accountSummaries https://developers.google.com/analytics/devguides/config/mgmt/v3/mgmtAccountSummariesGuide method to get the accounts the user has access to, so ultimately you'd have to do something like that yourself if you wanted to rebuild this from scratch.

— Reply to this email directly or view it on GitHub https://github.com/GoogleWebComponents/google-analytics/issues/4#issuecomment-48543511 .

Raymond Camden, Web Developer for Adobe

Email : raymondcamden@gmail.com Blog : www.raymondcamden.com Twitter: raymondcamden

[cfjedimaster]

For context, I'm looking to build something like I did here, http://www.raymondcamden.com/index.cfm/2014/1/24/Proof-of-Concept--Dashboard-for-Google-Analytics, where it shows a dashboard of all my properties at once.

[ebidel]

Can't you get everything with:

<template>
  <style>google-analytics-view-selector {display :none}</style>
  <google-analytics-view-selector on-analytics-dashboard-control-change="{{hasIds}}">
   </google-analytics-view-selector>
</template>
  <script>
    Polymer('my-element', {
      hasIds: function(e, detail, sender) {
        console.log(sender.accounts, sender.views, sender.properties)
      } 
    });
 </script>

[ebidel]

I filed https://github.com/GoogleWebComponents/google-analytics/issues/7 to get those properties documented.

[philipwalton]

@cfjedimaster The idea behind <google-analytics-dashboard> was to link control elements (like view selectors and date selectors) to reporting elements (like the charts). I.e., when the control elements change, the reporting elements detect those changes and automatically update. So for the dashboard to know about all the views a user has access to would kind of go against its intended purpose.

That being said, I definitely think there's value in developers being able to easily access the data for their various GA accounts.

Perhaps there could be a lower level management element that the view selector uses under the hood in the same way that there's a lower level query element that the charts use under the hood.

And in the meantime, you could certainly do what Eric recommended and directly access the accounts property of the view selector. As soon as that attribute is populated you could just loop through the properties and views to get all the ids values.

I'll make sure and update the docs for the accounts, properties, and views attributes.

[philipwalton]

I'm closing this for now as it's possible to extend the existing view selector or compose it within another element. Feel free to reopen if you feel like either of those options doesn't cover your use case.