Google Analytics widget


Google Analytics widget

Our widget shows additional information that is provided by Google Analytics:

Bar chars and Pie charts

We will need to set up a Google Cloud platform account.

  1. Open Google Developers Console and click Create Project on the dashboard.

    • We suggest to use the site or organization name: eg. "", "brand name"

      New project button
  2. Open the top level menu in the top left and open "APIs & Services" → Dashboard

    Shows the top level menu open and the APIs & Services item expanded
  3. We want to enable a couple of APIs so press the "+ Enable APIs and services" on the top of the page:

    Show the button labeled "+ Enable apis and services"
  4. Search for "Google Analytics Reporting API" using the API Library search.

    • It should look like this:

      Shows The google analytics API in the search result
  5. Click the "Enable" button:

    Shows the analytics API page with an enable button
  6. Repeat the same two steps for the Maps JavaScript API

    Shows the Maps JavaScript API with an enable button
  7. After enabling Maps JavaScript API go to the "Credentials" tab which should look like this:

    Shows the credentials tab
  8. Press the "+ Create credentials" button.

    A full page view of the credentials tab
  9. We want to create an API key:

    Dropdown of different authentications
    • After creating it make sure to copy it. We will use this value later.

  10. We also need a Service account. Select this option from the same dropdown as the "API key".

    • This will propmt you to create a new Service account.

      A new service account dialog with placeholder tekst
  11. Give the account the viewer role. Create the new account as the final step.

  12. After you have created the account you should be brought back to the overview page.

    The list of service accounts
  13. Copy the email of the service account we will need twice later.

    Now that we have created an account we need to give it access to our project.
  14. Go back to our Analytics page, and the property that you want the APIs to work with. Then enter the property access management page.

    Analytics overview the property column with the property access management at the bottom
    • On this page you can add new users and give them access to this property.

  15. We want to add our Service account to give access to this property

    Dropdown on the property access page that shows create a new user
  16. Now add the service account to the users that have access to the property. It only needs Read & Analyse access.

    A new user form filled in and showing the app button in the top right
  17. Go back to the Cloud platform and the service accounts menu option. Press on the service that was created.

    Service accounts in a list
  18. On the service find the tab that is called "Keys" and add a new key.

    Show the keys tab with an add key button

  19. We need to create a new p12 key. This file gives services access, so be careful and share it only with those that need access to it.

  20. Now for our widget to be set up we need to add this information to our configuration file:

ga.serviceAccount = <service-account>
ga.p12KeyPath = ${xp.home}/config/ga_key.p12
ga.mapsApiKey = <maps-api-key>
  • Where: service-account is the email for our service and mapsApiKey is the maps api key we have created and the p12 key with the correct name and path. (Need to add the p12 key to the folder too)