Google Web Components a Polymer approach — A step-by-step guide Part 2

Google Web Components a Polymer approach — A step-by-step guide Part 2

Google Web Components a Polymer approach — A step-by-step guide Part 2

This post is to explain how to obtain a Google API — Client ID — to run the Google Web Components utilizing the Polymer code.

This is the continuation of my previous blog post HERE.

First go to:

Google Cloud Platform

https://console.developers.google.com/

After you login, you will see the following screen. Click on “Use Google APIs“.

Google Developers Console

Now, click on “Enable” to start the API Project.

GDC_02

A few seconds later, you will be able to create a new credential for your — Client ID — variable.

GDC_03

Follow the step-by-step process filling all the necessary field. Click on “What credentials do I need?” to continue.

GDC_04

Here you will create an OAuth 2.0 client ID. Give it a name. If you are still running the project locally in your machine, you still can use http://localhost and any specific web server ports — in my case port 4000.

GDC_05

Continue with steps 3 and 4, and download the JSON file for your records. You are done!

Your client ID is the Client_ID_Hashtag.apps.googleusercontent.com

Keep in mind that you can always manage your Google API Credentials through the dashboard.

GDC_06

The best part of all is here:

https://ga-dev-tools.appspot.com/query-explorer/

Allow the Query Explorer to access your GA data and you will be able to fill the remaining variable on the <google-analytics-dashboard> block of code.

Now you will be able to get “YOUR_ID”, and create your data tile based on metrics that you want to display.

Here is another piece of metric that you can add in another block of <google-analytics-dashboard>.

A full Polymer Elements Demo can be found HERE.

Lucas Callado

Lucas Callado

Full stack developer, architect and a technical lead in the field of web engineering.
Lucas Callado

One thought on “Google Web Components a Polymer approach — A step-by-step guide Part 2

  1. Klaus Nielsen

    Hi,
    Does the Polymer Elements Demo work for you? I’m able to log in, but the view-/date-selector and the charts are empty. Not sure if it’s google-signin or google-analytics that’s causing the issue.

Leave a Reply

Your email address will not be published. Required fields are marked *

5 × four =