GA Demos & Tools
A showcase of demos and tools built with the various Google Analytics APIs and Libraries. View the Site
Submitting Feedback / Reporting Bugs
For the Demos & Tools site
- You may report bugs by submitting an issue.
- You may also submit an issue to request a new demo or tool.
For the Google Analytics platform
- Documentation for all Google Analytics API, libraries and SDKs can be found on Google Analytics Developers.
- If you have questions, please refer to the getting help section of the developers site to find the best place to get your questions answered.
Building and running the site locally
This site is only tested and developed using yarn.
To run the site locally, first make sure you have all the dependencies installed:
Also make sure to install the dependencies in the
cd lib yarn cd ..
Then run the following (from the top level directory) and answer all prompts:
All prompts can be skipped, but certain demos rely on prompt answers to fully function. Notably, any demo that requries authentication will require you to put in a valid Google client ID.
This will set up a local hot-reloading instance of the app that can try out at
To run tests, first make sure you have all the dependencies installed:
Then run the following:
Whats in this repo
This is where the majority of the client-side code lives. All of our demo code can be found here.
This file is useful to decorate our app with functionality that is needed at runtime.
Of note, we use:
Lets us wrap the root element in any necessary context/providers. We use it for injecting a material-ui Theme provider, and a Redux store.
Any code that should run once after the client renders goes here.
Also see Gatsby browser APIs.
This is the main configuration file for our Gatsby site. All of our gatsby plugins are configured here.
Allows us to download/prefetch Google Fonts. From their docs: "Can increase performance as opposed to loading webfonts from Google's external stylesheet."
Makes it easy to load in SVGs as React components via the following stanza:
import SVGComponentName from "-!svg-react-loader!../images/svg-name.svg"
Provides drop-in support for Typescript and TSX.
<opinion>For a site like this, with demos that will live over many years, typescript is a handy way to make it easier to jump back in the code.
Lets us source data into the app that can be queried via graphql.
Also see Gatsby Config API.