Google Analytics Embed API Demos

This repo showcases many of the things that are possible with the Embed API. Each demo builds on ideas presented in the previous demo, so you should check them out in order. If you're curious how anything is done, browse around in the code to see for yourself.

View Demos →

Demos Source Code

• Basic Dashboard
• Multiple Views
• Multiple Date Ranges
• Interactive Charts
• Third-Party Visualizations
• Pure HTML Dashboards

Custom Components Source Code

• Datepicker
• Viewpicker
• Active Users

Running the Demos Yourself

To run the demos yourself, all you have to do is download the repo, navigate to the site folder, and start up a local server. Here's a really easy way:

# Clone the repo and cd into the site directory.
git clone git@github.com:googleanalytics/embed-api-demos.git
cd embed-api-demos/site/

# Start running a local server at http://localhost:4000
python -m SimpleHTTPServer 4000

Now just go to http://localhost:4000 in your browser and you should see the site.

Alternatively you can copy and paste the files manually or use FTP to transfer them to a remote server, though if you do that you'll have to change the client ID to one with your site's domain set as an approved origin.

Note: if you copy the files into a folder that is not at the root of your server, most of the links will not work and the page will probably look broken.

Building the site using Jekyll

If you're familiar with Jekyll it can make running the demos locally or deploying them to a remote server much easier. It's actually how this repo is built and how the demo app is deployed.

# Clone the repo and cd into the repo directory.
git clone git@github.com:googleanalytics/embed-api-demos.git
cd embed-api-demos

# Run the site locally using Jekyll
jekyll serve

The jekyll serve command will build all the files and load up a server on your local machine. Then you can go to http://localhost:4000 and everything should work fine. If you run jekyll serve -w it will also watch for changes to your source files and rebuild the site on the fly. This makes it easy to change a few things and see the results immediately.

If you need to change any of the configuration settings (like your client ID) you can set them in the _config.yml file and rerun the jekyll serve command.