This article covers how to use the Web API tile to query data from Google APIs, such as Google Analytics, and display this data in SquaredUp.
This article covers these areas:
- Creating a new provider in SquaredUp
- Configuration in the Google Developer Console
- Completing the provider in SquaredUp
- Configuring the Web API tile
Prerequisites
- A Google project account and account, such as Google Analytics.
- If you use a proxy server you may need to configure the proxy to allow the Web API tile to communicate with the Google APIs.
1. Creating a new provider in SquaredUp
- Log on to SquaredUp and navigate to the right-hand menu ☰ then system and then click on the web api perspective.
- Click Add new provider
- Change the provider type to OAuth
- In the service name box type in a suitable name for this provider. This name is used to create a URL so it is best to avoid spaces and non-alphanumeric characters., e.g. GoogleAnalytics.
- Leave the grant type as authorization code
- The base URL should be
https://www.googleapis.com/
- The authorization URL should
https://accounts.google.com/o/oauth2/v2/auth
-
The token URL should be
https://www.googleapis.com/oauth2/v4/token
At this point we need to save the provider and follow the next steps to obtain a client ID and secret from the Google Developer Console, after which we will return to complete these provider details.
-
Click add provider to save the provider.
If the configuration is correct you will see a green tick.
If the provider is not authorised it could be that some of the provider configuration is incorrect (for example the username, password, secret etc), or if you use a proxy it could be that the proxy is not configured. See How to configure SquaredUp to use a proxy.
- Copy the redirect url displayed. This will be used in the next section.
2. Configuration in the Google Developer Console
- Visit the Google Developer Console
- Create a new project as required.
- Select Create Credentials > OAuth Client ID
- Select Web Application
-
Enter the following:
Name: This can be anything
Authorised JavaScript origins: Should be the hostname of your SquaredUp server including the http/https
Authorised Redirect URIs: Should be the redirect url copied from SquaredUp right-hand menu ☰ > system > web api. It will be your SquaredUp instance followed by
/ext-core-webapi/callback/GoogleAPIProvider
whereGoogleAPIProvider
is the name of the provider you created.For example:
https://SquaredUpServer/SquaredUpv4/ext-core-webapi/callback/GoogleAnalytics
Where
SquaredUpServer
is the name of the server where SquaredUp is installed. - Click save/create
- Copy the client ID and secret to use in the next section.
3. Completing the provider in SquaredUp
- In SquaredUp navigate to the provider you created earlier: SquaredUp right-hand menu ☰ > system > web api perspective.
- Click the settings button next to the provider to edit it.
- Paste in the client id and secret copied from the Google Developer Console.
- Paste in the relevant authorisation scope from OAuth 2.0 Scopes for Google APIs. For example, for Google Analytics it should be the URL scope listed for 'View your Google Analytics data' which is
https://www.googleapis.com/auth/analytics.readonly
- Click add provider. You will be redirected to Google to login and authorise and then back to SquaredUp.
If the configuration is correct then you will see a green tick.
4. Configuring the Web API tile
The walkthrough below takes you through configuring a simple scalar tile to show the number of pageviews using Google Analytics.
This walkthrough is specific to Google Analytics, but the same principle can be applied to any of the Google APIs.
Walkthrough: Configuring the Web API tile for Google Analytics
- Create a new dashboard and click on the Web API tile.
- Select Web API (Scalar). The Web API (Scalar) tile is designed to show a single value, such as the number of pageviews. Web API (Grid) is for showing a table of data.
- Leave the scope as it is and click next.
-
In the provider section select the provider that you created earlier, for example GoogleAnalytics
Next you need to find the correct URL to put in the http mode URL box for Google Analytics:
- In a separate tab browse to the Google Analytics Query Explorer
- Select your Account, Property, and View.
- Under metrics, start typing
pageviews
and select Page Views (ga:pageviews) - Click Run Query
-
Copy the URL (minus the
https://www.googleapis.com/
) from the API Query URI section, so you have something like the following:/analytics/v4/data/ga?ids=ga%3A5###ACCOUNTID###&start-date=30daysAgo&end-date=yesterday&metrics=ga%3Apageviews
- Paste this URL into the http mode URL box on your SquaredUp dashboard.
- Leave the headers & data section as it is, and click on to the response data section.
-
In the response data section, paste
rows.0.0
into the key path box. - In the scalar section, paste
pageviews
into the unit box. -
Click done