Ember Google Analytics Embed

Ember Google Analytics Embed is an addon for adding analytics visualizations to your app using the Google Analytics Embed API.

The addon exposes the following components to use in your templates:

• Bar Chart (ga-embed-bar-chart)
• Column Chart (ga-embed-column-chart)
• Geo Chart (ga-embed-geo-chart)
• Line Chart (ga-embed-line-chart)
• Pie Chart (ga-embed-pie-chart)
• Table (ga-embed-table)

The addon also enables Analytics user authorization using the authorization (ga-embed-authorize) component and view selection via the view selector (ga-embed-view-selector) component.

Demos

Check out the Embed API demos page for examples.

Installation

ember install ember-google-analytics-embed

Setup

To authorize your application to access the Google Analytics API, you must create a Client ID from the Google API Console. When you've obtained your Client ID, add it to your environment file.

// config/environment.js
ENV['google-analytics-embed'] = {
  clientId: 'YOUR_CLIENT_ID'
};

Authorization

Each user will need to have access to the GA account queried and authorize themselves. Adding the ga-embed-authorize component to your templates will create a 'Sign in to Google Analytics' button and handle authorization automatically:

{{ga-embed-authorize}}

Inject the ga-embed service into your templates to conditionally show/hide elements:

{{#if gaEmbed.isAuthorized}}
  // Add visualizations here
{{/if}}

The ga-embed service also exposes information about the current authorized user:

{{log gaEmbed.authorizedUser}}
// => { email: 'foo@bar.com', imageUrl: '...', name: 'Foo Bar' }

Sign Out

To enable the user to sign out, inject the ga-embed service into the consuming object and create the following action.

gaEmbed: service(),

actions: {
  signOut() {
    get(this, 'gaEmbed').signOut().then(() => {
      // Returns a promise when complete
    });
  }
}

Access Token Authorization

To remove the process of user authorization, you may return an access token from your server. This functionality is not yet implemented in Ember Google Analytics Embed, but you can find more information on server side authorization here.

Query

Each visualization accepts two main attributes, a query and an options hash.

To get data from our Google Analytics property, we must build a query using the Google Reporting API. The example below shows a pie chart of sessions, segmented by country. It limits the data to the last 30 days up until today and requests just the top ten results.

{{ga-embed-pie-chart
    query=(hash
      ids="YOUR_PROPERTY_ID"
      metrics="ga:sessions"
      dimensions="ga:country"
      start-date="30daysAgo"
      sort="-ga:sessions"
      max-results=10
      end-date="today"
    )}}

Options

An options hash may be passed to each chart, allowing full configuration of the visualization.

{{ga-embed-pie-chart query=query options=options}}

Individual options properties may also be passed and can be dynamically updated.

{{ga-embed-pie-chart
    query=query
    options=options
    title="Sessions by country"
    is3D=pieChartIs3D
    }}

Visualizations

Bar Chart

Creates a bar chart visualization and accepts the following configuration options.

{{ga-embed-bar-chart query=query options=options}}

Column Chart

Creates a column chart visualization and accepts the following configuration options.

{{ga-embed-column-chart query=query options=options}}

Geo Chart

Creates a geo chart visualization and accepts the following configuration options.

The region property can be dynamically updated and is validated before the chart is updated to ensure a valid region code is used.

{{ga-embed-geo-chart query=query options=options region=region}}

Line Chart

Creates a line chart visualization and accepts the following configuration options.

{{ga-embed-line-chart query=query options=options}}

Pie Chart

Creates a pie chart visualization and accepts the following configuration options.

To transform a pie chart into a donut chart, simply add a value for the pie hole.

{{ga-embed-pie-chart query=query options=options pieHole=0.4}}

Table

Creates a table visualization and accepts the following configuration options.

{{ga-embed-table query=query options=options}}

View Selection

The ga-embed-view-selector component allows the user to select a view from any property they are authorized to view. Add the view selector component to your template.

{{#if gaEmbed.isAuthorized}}
  {{ga-embed-view-selector ids=(mut viewIds) onChange=(action 'customAction')}}
{{/if}}

Use the mutated property in your queries:

{{ga-embed-pie-chart
    query=(hash
      ids=viewIds
      // ...
    )}}

Querying Data

The gaEmbed service enables a quick method to query data from analytics without directly using a visualization.

get(this, 'gaEmbed').getData({
  'ids': 'YOUR_PROPERTY_ID',
  'metrics': 'ga:sessions',
  'dimensions': 'ga:date',
  'start-date': '30daysAgo',
  'end-date': 'yesterday'
}).then(data => {
  console.log(data);
}).catch(err => {
  console.log(err);
});

Using Google Analytics Embed API

• Google Embed API

  • Component Reference
  • Examples

• Google Charts API

• Google Reporting API

  • Dimensions & Metrics Explorer

Contributing

A crude dummy app demonstrates all the functionality of the addon. To view the dummy app, clone the repo and export your client id from tests/dummy/config/ga-client-id.js like so:

module.exports = 'YOUR_CLIENT_ID';

Then start the server using:

ember serve