{"id":16318046,"url":"https://github.com/willviles/ember-google-analytics-embed","last_synced_at":"2026-03-16T21:02:20.830Z","repository":{"id":57223855,"uuid":"81971245","full_name":"willviles/ember-google-analytics-embed","owner":"willviles","description":"An Ember Addon for adding analytics visualizations using the Google Analytics Embed API.","archived":false,"fork":false,"pushed_at":"2017-12-20T14:06:32.000Z","size":188,"stargazers_count":29,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T20:47:03.470Z","etag":null,"topics":["analytics","chart","ember","ember-addon","google-analytics","google-analytics-embed-api","google-charts","graph","visualizations"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/willviles.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-14T17:30:22.000Z","updated_at":"2024-08-15T15:26:12.000Z","dependencies_parsed_at":"2022-09-04T07:40:44.089Z","dependency_job_id":null,"html_url":"https://github.com/willviles/ember-google-analytics-embed","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willviles%2Fember-google-analytics-embed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willviles%2Fember-google-analytics-embed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willviles%2Fember-google-analytics-embed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willviles%2Fember-google-analytics-embed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/willviles","download_url":"https://codeload.github.com/willviles/ember-google-analytics-embed/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244703681,"owners_count":20496163,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["analytics","chart","ember","ember-addon","google-analytics","google-analytics-embed-api","google-charts","graph","visualizations"],"created_at":"2024-10-10T22:09:50.332Z","updated_at":"2026-03-16T21:02:20.723Z","avatar_url":"https://github.com/willviles.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Ember Google Analytics Embed\n======\n\n[![Build Status](https://travis-ci.org/willviles/ember-google-analytics-embed.svg)](https://travis-ci.org/willviles/ember-google-analytics-embed) [![Ember Observer Score](http://emberobserver.com/badges/ember-google-analytics-embed.svg)](http://emberobserver.com/addons/ember-google-analytics-embed) ![Download count all time](https://img.shields.io/npm/dt/ember-google-analytics-embed.svg) [![npm](https://img.shields.io/npm/v/ember-google-analytics-embed.svg)](https://www.npmjs.com/package/ember-google-analytics-embed)\n\n**Ember Google Analytics Embed** is an addon for quickly building custom Google Analytics dashboards in your Ember.js app, using the [Google Analytics Embed API](https://developers.google.com/analytics/devguides/reporting/embed/v1/).\n\n![](https://cloud.githubusercontent.com/assets/2046935/23407774/741fbae0-fdbd-11e6-8cdd-4eb6d49c9bf1.jpg)\n\nThe addon exposes the following components to use in your templates:\n\n- [Bar Chart](#bar-chart) *(ga-embed-bar-chart)*\n- [Column Chart](#column-chart) *(ga-embed-column-chart)*\n- [Geo Chart](#geo-chart) *(ga-embed-geo-chart)*\n- [Line Chart](#line-chart) *(ga-embed-line-chart)*\n- [Pie Chart](#pie-chart) *(ga-embed-pie-chart)*\n- [Table](#table) *(ga-embed-table)*\n\nThe addon also enables Analytics user authorization using the [authorization](#authorization) *(ga-embed-authorize)* component and view selection via the [view selector](#view-selection) *(ga-embed-view-selector)* component.\n\n## Demos\n\nCheck out the [Embed API demos](https://ga-dev-tools.appspot.com/embed-api/) page for examples.\n\n## Installation\n\n`ember install ember-google-analytics-embed`\n\n## Setup\n\nTo authorize your application to access the [Google Analytics API](https://developers.google.com/analytics/devguides/config), you must create a Client ID from the [Google API Console](https://console.developers.google.com/). When you've obtained your Client ID, add it to your environment file. If you are using Geo Charts, you must also include an API Key, for accessing the [Google Maps Javascript API](https://developers.google.com/maps/documentation/javascript). Both these APIs must be enabled from your API console and have the right origins/referrers set.\n\n```javascript\n// config/environment.js\nENV['google-analytics-embed'] = {\n  clientId: 'YOUR_CLIENT_ID',\n  apiKey: 'YOUR_API_KEY'\n};\n```\n\n\n## Authorization\nThere are two ways to authorize users: through the authorization flow, requiring a user to click and authenticate, or via an access token sent from your server.\n\nAdding the base `ga-embed-authorize` component to your templates will create a 'Sign in to Google Analytics' button and handle the authorization flow automatically:\n\n```handlebars\n{{ga-embed-authorize}}\n```\n\nInject the `ga-embed` service into your templates to conditionally show/hide elements:\n\n```handlebars\n{{#if gaEmbed.isAuthorized}}\n  // Add visualizations here\n{{/if}}\n```\n\nThe `ga-embed` service also exposes information about the current authorized user:\n\n```handlebars\n{{log gaEmbed.authorizedUser}}\n// =\u003e { email: 'foo@bar.com', imageUrl: '...', name: 'Foo Bar' }\n```\n\n### Sign Out\n\nTo enable the user to sign out, inject the `ga-embed` service into the consuming object and create the following action.\n\n```javascript\ngaEmbed: service(),\n\nactions: {\n  signOut() {\n    get(this, 'gaEmbed').signOut().then(() =\u003e {\n      // Returns a promise when complete\n    });\n  }\n}\n```\n\n### Access Token Authorization\nTo remove the user auth flow, you may return an access token from your server. Simply pass the access token to the `ga-embed-authorize` component. You can find more information on setting up server side authorization [here](https://ga-dev-tools.appspot.com/embed-api/server-side-authorization/).\n\n```handlebars\n{{ga-embed-authorize accessToken=analyticsAccessToken}}\n```\n\n## Visualizations\n\nEach visualization accepts two main attributes, a query and an options hash.\n\n### Query\n\nTo get data from our Google Analytics property, we must build a query using the [Google Reporting API](https://developers.google.com/analytics/devguides/reporting/core/v4/). 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.\n\n```handlebars\n{{ga-embed-pie-chart\n    query=(hash\n      ids=\"YOUR_PROPERTY_ID\"\n      metrics=\"ga:sessions\"\n      dimensions=\"ga:country\"\n      start-date=\"30daysAgo\"\n      sort=\"-ga:sessions\"\n      max-results=10\n      end-date=\"today\"\n    )}}\n```\n\n### Options\n\nAn options hash may be passed to each chart, allowing full configuration of the visualization.\n\n```handlebars\n{{ga-embed-pie-chart query=query options=options}}\n```\n\nIndividual options properties may also be passed and can be dynamically updated.\n\n```handlebars\n{{ga-embed-pie-chart\n    query=query\n    options=options\n    title=\"Sessions by country\"\n    is3D=pieChartIs3D\n    }}\n```\n\n\n### Components\n\n#### Bar Chart\n\nCreates a bar chart visualization and accepts the following configuration [options](https://google-developers.appspot.com/chart/interactive/docs/gallery/barchart#configuration-options).\n\n```handlebars\n{{ga-embed-bar-chart query=query options=options}}\n```\n\n#### Column Chart\n\nCreates a column chart visualization and accepts the following configuration [options](https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart#configuration-options).\n\n```handlebars\n{{ga-embed-column-chart query=query options=options}}\n```\n\n#### Geo Chart\n\nCreates a geo chart visualization and accepts the following configuration [options](https://google-developers.appspot.com/chart/interactive/docs/gallery/geochart#configuration-options). This component lazy-loads the Google Maps Geocoding API.\n\nThe region property can be dynamically updated and is validated before the chart is updated to ensure a [valid region code](https://google-developers.appspot.com/chart/interactive/docs/gallery/geochart#continent-hierarchy-and-codes) is used.\n\n```handlebars\n{{ga-embed-geo-chart query=query options=options region=region}}\n```\n\n#### Line Chart\n\nCreates a line chart visualization and accepts the following configuration [options](https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart#configuration-options).\n\n```handlebars\n{{ga-embed-line-chart query=query options=options}}\n```\n\n#### Pie Chart\n\nCreates a pie chart visualization and accepts the following configuration [options](https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart#configuration-options).\n\nTo transform a pie chart into a donut chart, simply add a value for the pie hole.\n\n```handlebars\n{{ga-embed-pie-chart query=query options=options pieHole=0.4}}\n```\n\n#### Table\n\nCreates a table visualization and accepts the following configuration [options](https://google-developers.appspot.com/chart/interactive/docs/gallery/table#configuration-options).\n\n```handlebars\n{{ga-embed-table query=query options=options}}\n```\n\n\n### Loading State\n\nEach visualization has a loading state class of `.ga-embed-visualization-loading`, which you can customize in your CSS. The classes set on visualizations allow for custom loading states per visualization.\n\n```html\n\u003cdiv id=\"ember123\" class=\"ga-embed-visualization ga-embed-chart ga-embed-line-chart ga-embed-visualization-loading\"\u003e...\u003c/div\u003e\n```\n\n### Auto Resizing\n\nBy default, visualizations auto resize on window resize. To disable auto resizing, set `responsiveResize=false` on the visualization.\n\n```handlebars\n{{ga-embed-line-chart query=query options=options responsiveResize=false}}\n```\n\n### Debouncing\n\nWhen dynamically updating many properties on a visualization, it may be beneficial to debounce executing a new render. To do so, the visualization accepts a `debounce` value in milliseconds (ms).\n\n```handlebars\n{{ga-embed-line-chart query=query options=options debounce=100}}\n```\n\n## View Selection\n\nThe `ga-embed-view-selector` component allows the user to select a view from any property they are authorized on. Add the view selector component to your template.\n\n```handlebars\n{{#if gaEmbed.isAuthorized}}\n  {{ga-embed-view-selector ids=(mut viewIds) onChange=(action 'customAction')}}\n{{/if}}\n```\n\nUse the mutable property in your queries:\n\n```handlebars\n{{ga-embed-pie-chart\n    query=(hash\n      ids=viewIds\n      // ...\n    )}}\n```\n\n\n## Querying the Reporting API\n\nThe `gaEmbed` service enables a quick method to query data from analytics without directly using a visualization. This can be useful for querying the Google Analytics Reporting API and using the data in your own custom components.\n\n```javascript\nget(this, 'gaEmbed').getData({\n  'ids': 'YOUR_PROPERTY_ID',\n  'metrics': 'ga:sessions',\n  'dimensions': 'ga:date',\n  'start-date': '30daysAgo',\n  'end-date': 'yesterday'\n}).then(data =\u003e {\n  console.log(data);\n}).catch(err =\u003e {\n  console.log(err);\n});\n```\n\n## Using Google Analytics Embed API\n\n- [Google Embed API](https://developers.google.com/analytics/devguides/reporting/embed/v1/)\n  - [Component Reference](https://developers.google.com/analytics/devguides/reporting/embed/v1/component-reference)\n  - [Examples](https://ga-dev-tools.appspot.com/embed-api/)\n\n- [Google Charts API](https://google-developers.appspot.com/chart/interactive/docs/gallery)\n\n- [Google Reporting API](https://developers.google.com/analytics/devguides/reporting/core/v4/)\n  - [Dimensions \u0026 Metrics Explorer](https://developers.google.com/analytics/devguides/reporting/core/dimsmets)\n\n## Contributing\n\nA crude dummy app demonstrates all the functionality of the addon. To view the dummy app, clone the repo and simply create a .env file with the following information:\n\n```bash\n# .env\nGOOGLE_API_KEY=YOUR_API_KEY\nGOOGLE_CLIENT_ID=YOUR_CLIENT_ID\n```\n\nThen start the server using:\n\n```\nember serve\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillviles%2Fember-google-analytics-embed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwillviles%2Fember-google-analytics-embed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillviles%2Fember-google-analytics-embed/lists"}