Help with Embed API

[Tim Fisher]

Hey everyone,

Sorry for the novice question. I have some basic JS under my belt and have had success creating several small projects with the Embed API, but I'm hung up on what seems like a small thing. Hopefully one of you much smarter folks can help me out.

I'll try to keep this as short as possible.

I'm creating a page that, for now, I intend to simply display a number - yesterday's pageviews to be exact. Like I said, I've done a few small projects with the Embed API and they've all gone swimmingly. All of my projects to date, however, have involved charts, and thus the DataChart component. What I'm having trouble doing now is making the Data component work like I want.

I started with the Embed API Basic Dashboard example (https://ga-dev-tools.appspot.com/embed-api/basic-dashboard/) and implemented it without a problem. From that example, I hoped to hack my way to my stated goal - simply display yesterday's pageviews on the page - only I can't quite figure out how to do it.

I understand how to use the basics of the API, which is 100% due to the well-written documentation on ga-dev-tools-appsopt.com and developers.google.com/analytics/devguides/reporting/embed/v1/. I think my problem is more my lack of JS skills. I hear that I may need to use JS Promises to make this work but I'm still wrapping my head around that concept.

Sans the Embed API loading script, here's what I have:

<script>

gapi.analytics.ready(function() {

  gapi.analytics.auth.authorize({
    container: 'embed-api-auth-container',
    clientid: 'MY CLIENT ID IS HERE',
  });

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

  viewSelector.execute();

  var data = new gapi.analytics.report.Data({
    query: {
      metrics: 'ga:pageviews',
      'start-date': 'yesterday',
      'end-date': 'yesterday'
    }
  });

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

});

</script>

I know my code is all wrong - I'm just not sure I know where to go from here. I imagined doing a simple replace of existing text on the page using innerHTML.replace once I have the data in a variable.

If going from the chart example from the Basic Dashboard to what I'm asking is anything more than some simple JS you can provide me in a reply, I'm OK with with just some general advice. I don't want anyone doing my work for me if we're talking about a ton of code. I'm just stuck and not totally sure where to go next.

Thanks in advance!!