Skip to main content

How to use the Web API tile with Google APIs, such as Google Analytics

Catherine
  • Updated

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:

  1. Creating a new provider in SquaredUp
  2. Configuration in the Google Developer Console
  3. Completing the provider in SquaredUp
  4. 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

  1. Log on to SquaredUp and navigate to the right-hand menu ☰ then system and then click on the web api perspective.
  2. Click Add new provider
  3. Change the provider type to OAuth
  4. 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.
  5. Leave the grant type as authorization code
  6. The base URL should be https://www.googleapis.com/
  7. The authorization URL should https://accounts.google.com/o/oauth2/v2/auth

  8. 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.

  9. Click add provider to save the provider.

    mceclip0.png

    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.

  10. Copy the redirect url displayed. This will be used in the next section.

2. Configuration in the Google Developer Console

  1. Visit the Google Developer Console
  2. Create a new project as required.
  3. Select Create Credentials > OAuth Client ID
  4. Select Web Application

  5. 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 where GoogleAPIProvider 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.

  6. Click save/create
  7. Copy the client ID and secret to use in the next section.

3. Completing the provider in SquaredUp

  1. In SquaredUp navigate to the provider you created earlier: SquaredUp right-hand menu ☰ > system > web api perspective.
  2. Click the settings button next to the provider to edit it.
  3. Paste in the client id and secret copied from the Google Developer Console.
  4. 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
  5. 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

  1. Create a new dashboard and click on the Web API tile.
  2. 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.
  3. Leave the scope as it is and click next.

  4. 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:

  5. In a separate tab browse to the Google Analytics Query Explorer
  6. Select your Account, Property, and View.
  7. Under metrics, start typing pageviews and select Page Views (ga:pageviews)
  8. Click Run Query

  9. 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

  10. Paste this URL into the http mode URL box on your SquaredUp dashboard.
  11. Leave the headers & data section as it is, and click on to the response data section.

  12. In the response data section, paste rows.0.0 into the key path box.

    mceclip1.png

  13. In the scalar section, paste pageviews into the unit box.

  14. Click done

    mceclip2.png

Related articles