Early this spring the Google Analytics team released the Embed API, “a JavaScript library that allows you to easily create and embed a dashboard on a 3rd party websites.” Have you had a chance to take a look at it? When I heard they were releasing a new API I took a quick look at it, saw that it was JavaScript based, and just accessed the API. At the time I assumed it was just JavaScript connect to Google API mashed together with Google Charts, I was unimpressed and decided I had better things to do with my time.
Earlier this week I ran across it again in my inbox: “create and embed a dashboard” it said. I am the resident Google Analytics addict here at work, if I want to keep my reputation intact, I had better take a closer look at this.
What I found was amazing! The Embed API isn’t just a javascript library mashed up with Google Charts, or is it? It might be, but what really grabbed my attention is that it is EASY, you can have a dashboard laid out and set up in a matter of minutes, even if you don’t know much Javascript. If you can read Javascript and copy / paste the examples you can get it working. If you’re more advanced, well, I bet you could come up with some really fancy stuff here (if you do please post it in the comments, I would be interested in seeing it). I think we should create some kind of library of standard Embed API Dashboards, maybe Google should expand the Solutions Gallery to include Embed API Dashboards.
One of the really nice things is that the examples and documentation are very well written for this, everything is very easy to follow. Because of that, this is not going to be a tutorial on how to use the Embed API, I will just highlight a few key points.
Developer Console
The Embed API is, after all, an API, so we are going to have to register the application with the Google Console. The documentation isn’t 100% clear on how to do this, so follow these steps and you will have it set up.
- APIs & auth – APIs : Turn off all of the cloud ones that are default turned on, then turn On Analytics API. This will give you access to use the Google Analytics API.
- APIs & auth – Credentials: Click the Create new client id button,
- Select Web application
- Set the JAVASCRIPT ORIGINS to either http://localhost, or the host of your website. (see the picture below)
- Remove the text from the REDIRECT URIS (see the picture below)
- APIs & auth – Consent screen: Make sure to select an email address and set a product name.
- APIs & auth – Credentials screen copy the client_id that was generated for you.
This is all you need in order to get the Authentication working.
Embed API Demos and Sample Code
On top of giving us the normal documentation for the Embed API, Google has put up a Embed API Demos and sample code page. On this page you can find six different demos of how attractive you can make your dashboards look. Remember to Authenticate the API in the upper right hand corner of the demo. Once the demo is loaded and you are all impressed, scroll to the bottom look for the View source on Github link, where the code for all of the demos can be downloaded. I recommend you check out the Third-Party Visualizations demo, it is one of my favorites, it even shows current active users using the Real-time api! It even reloads the metric, that’s right no more crashing real-time page on the website.
Authentication
I don’t know if you have used any of the Google Analytics APIs before or not, but I have. One of the hardest things to do when you are first starting to use the API is understand how to Authenticate your script or application. The Embedded API makes this very easy.
gapi.analytics.auth.authorize({
container: 'auth-button',
clientid: CLIENT_ID,
});
That’s it, that’s all you need to create the Authenticate button. Once the user has accepted authentication, it’s just a matter of detecting it and then loading the data into the dashboard.
gapi.analytics.auth.on('success', function(response) {
});
Conclusion
Just think of all the things we can do with the new Embedded API. Do you currently have a screen some place in the office just sitting there with the Google Analytics website loaded so that you can monitor activity on your website? Do you check the Google Analytics website from time to time throughout the day and have to go to different reports looking for the information you need?
Why not create your own dashboard to do this instead? Decide what metrics are most important to you and set it as your browser home page.
If these ideas interest you I recommend the Embed API – Getting Started tutorial. It’s very easy to follow, you can just copy the code, it will work straight out the box. Once you have mastered that, check out the Github project for some more ideas on how to create the other graphs.
Remember to come back and show off your dashboards.
