DEV Community

Cover image for How to develop a custom Google Analytics Dashboard using Google Analytics Reporting API v4 and React.js
Katsiaryna (Kate) Lupachova
Katsiaryna (Kate) Lupachova

Posted on

How to develop a custom Google Analytics Dashboard using Google Analytics Reporting API v4 and React.js

Originally posted on my personal blog

Google Analytics is a great tool. You can use it for measuring a website performance by a huge amount of metrics. But what if you need to build a custom app where you can see just those metrics that you or your customer want to measure? And this app should have a unique design (Google Analytics default UI, well, is not very impressive).

Let’s try to solve this problem using React.js and Google Analytics Reporting API.

Prerequisites

  • Google Analytics account with an existing web site or app setup
  • Basic knowledge of React.js

We’ll be using the official Google Analytics tutorial - Javascript quickstart for web applications, but the Javascript part will be refactored to React.js code.

Part 1: Enable the API

For that go to this link to Google Developers console.

console1

We can enable Google Analytics Reporting API in a new project or in an existing project. As we are developing an app from scratch, let’s chose the option “Create a project”. Simply press the “Continue” button.

Thus Google Analytics Reporting API is enabled, but to use it we need to get the right credentials.

console2

Click “Go to credentials” button. Now we need to define what credentials do we need.

console3

For that, we have to answer 3 questions about which API are we using, where will we be calling the API from (Web browser (Javascript)) and what data will we be accessing (User data).

Press “What credentials do I need?” button.

Next, we see the modal window with the information that we have to set up OAuth consent screen, so the user can see who (meaning which application) is requesting access to their data and decide whether allow or not to get their data.

oauth-consent

Press “Set up consent screen”. In the next window choose External User Type and press “Create”.

oauth-consent

On the next page, it is sufficient just to fill the Application name and Support email (filled automatically). All other fields are optional and, for development purposes, we can leave them empty. Press “Save” button.

The last thing we have to do in the Google Developers Console is to get an OAuth 2.0 Client ID.

create-credentials

Navigate to “Credentials” menu on the left bar, then press “Create credentials”. In the dropdown menu select “OAuth client ID”.

create-oauth-id

Select Web application in the Application type field, and then enter http://localhost:3000 in the Authorized JavaScript origins field. Also, you can enter the name of the app (Web client 1 by default). Press “Save”.

The data with your Client ID and Client Secret appears. We don’t need to save it in some safe place as we always can see the credentials in the developers’ console.

Finally, we are done with enabling Analytics Reporting API and getting OAuth Client ID. Now it’s time to write some code.

Part 2: Setup React App

Start with the basic Create React App project. In the console run

npx create-react-app react-google-analytics
Enter fullscreen mode Exit fullscreen mode

Open generated project in your text editor of choice and delete all demo code in the App.js file.

App.js

import React from "react";
import "./App.css";

function App() {
  return <div className="App"></div>;
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Then we should add the script which will load Google JavaScript API client and Sign-in library. For that place the following script tag inside the head tag of the public/index.html file.

<script src="https://apis.google.com/js/client:platform.js"></script>
Enter fullscreen mode Exit fullscreen mode

Next, we’ll add several util functions for initialization of OAuth client and sign in. Create utils.js file in src folder and add the first function there which will initialize GoogleAuth object.

src/utils.js

const initAuth = () => {
  return window.gapi.auth2.init({
    client_id: "YOUR_CLIENT_ID", //paste your client ID here
    scope: "https://www.googleapis.com/auth/analytics.readonly",
  });
};
Enter fullscreen mode Exit fullscreen mode

Docs reference

Remember the client ID which we created in the first part? Now it’s time to copy it from Google Developers Console and paste in our React app.

The next util function will check if the user signed in or not and we’ll use it later in App.js, that’s why we should export it.

export const checkSignedIn = () => {
  return new Promise((resolve, reject) => {
    initAuth() //calls the previous function
      .then(() => {
        const auth = window.gapi.auth2.getAuthInstance(); //returns the GoogleAuth object
        resolve(auth.isSignedIn.get()); //returns whether the current user is currently signed in
      })
      .catch((error) => {
        reject(error);
      });
  });
};
Enter fullscreen mode Exit fullscreen mode

Docs reference

Also, we need to add the Google Sign-in button.

export const renderButton = () => {
  window.gapi.signin2.render("signin-button", {
    scope: "profile email",
    width: 240,
    height: 50,
    longtitle: true,
    theme: "dark",
    onsuccess: onSuccess,
    onfailure: onFailure,
  });
};

const onSuccess = (googleUser) => {
  console.log("Logged in as: " + googleUser.getBasicProfile().getName());
};

const onFailure = (error) => {
  console.error(error);
};
Enter fullscreen mode Exit fullscreen mode

Docs reference

Functions onSuccess and onFailure are just the callback functions to call when a user successfully signs in or sign-in fails respectively.

That’s it for the util functions. Now let’s code the main logic of the app: on page load, check if a user is signed in. If not - render the sign-in button, if yes - request Google Analytics Report (for example, daily user’s visits for the last 10 days) and show it in the browser.

App.js

import React, { useState, useEffect } from "react";
import "./App.css";
import { renderButton, checkSignedIn } from "./utils";

function App() {
  const [isSignedIn, setIsSignedIn] = useState(false);

  const updateSignin = (signedIn) => { //(3)
    setIsSignedIn(signedIn);
    if (!signedIn) {
      renderButton();
    }
  };

  const init = () => { //(2)
    checkSignedIn()
      .then((signedIn) => {
        updateSignin(signedIn);
      })
      .catch((error) => {
        console.error(error);
      });
  };

  useEffect(() => {
    window.gapi.load("auth2", init); //(1)
  });

  return (
    <div className="App">
      {!isSignedIn ? (
        <div id="signin-button"></div>
      ) : (
        <div>Coming soon...</div>
      )}
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode
  1. When the App component mounts, load the Auth2 library (Docs reference)
  2. Initialize auth2 client (runs inside checkSignedIn util function) and call checkSignedIn function.
  3. Update value of isSignedIn state variable with the result of checkSignedIn function. If is not signed in, render sign-in button.

Let’s run the app and see what we’ve developed so far. In the console run

npm start
Enter fullscreen mode Exit fullscreen mode

As we are not signed in yet, we see Google Sign-in button:

signin-button

If we press the button, we'll see Google Sign in a dialog window. Chose the account with which you'd like to sign and then there is a scary alert window:

app-not-verified

This basically means that we request a sensitive or restricted OAuth scope, but hasn't gone through the Google verification process. More details on the matter you can find here.

If you trust yourself as a developer (ha-ha), then click on the Advanced link and then Go to *name of your app*.

app-not-verified

Next, grant your app permission to view your Google Analytics data and you'll see your Google Analytics Report! Well, soon. Very soon.

coming-soon

The last thing that we need to implement is to create a React component which will fetch the necessary data from Google Analytics Reporting API.

But first, you need to get the view ID. It’s a Google Analytics custom property that is created in the Google Analytics account. You can obtain the view ID in two ways:

  1. Using Account Explorer Service
  2. In your Google Analytics account:
- navigate to **Admin** section on the left side menu
Enter fullscreen mode Exit fullscreen mode

analytics1

- in the View column click on **View Settings**
Enter fullscreen mode Exit fullscreen mode

analytics2

- copy the **View ID**
Enter fullscreen mode Exit fullscreen mode

analytics3

Then create a new file in the src folder - report.js.

src/report.js

import React, { useState, useEffect } from "react";

const Report = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const queryReport = () => {//(1)
      window.gapi.client
        .request({
          path: "/v4/reports:batchGet",
          root: "https://analyticsreporting.googleapis.com/",
          method: "POST",
          body: {
            reportRequests: [
              {
                viewId: "YOUR_VIEW_ID", //enter your view ID here
                dateRanges: [
                  {
                    startDate: "10daysAgo",
                    endDate: "today",
                  },
                ],
                metrics: [
                  {
                    expression: "ga:users",
                  },
                ],
                dimensions: [
                  {
                    name: "ga:date",
                  },
                ],
              },
            ],
          },
        })
        .then(displayResults, console.error.bind(console));
    };

    const displayResults = (response) => {//(2)
      const queryResult = response.result.reports[0].data.rows;
      const result = queryResult.map((row) => {
        const dateSting = row.dimensions[0];
        const formattedDate = `${dateSting.substring(0, 4)}
        -${dateSting.substring(4, 6)}-${dateSting.substring(6, 8)}`;
        return {
          date: formattedDate,
          visits: row.metrics[0].values[0],
        };
      });
      setData(result);
    };

    queryReport();
  }, []);

  return data.map((row) => (
    <div key={row.date}>{`${row.date}: ${row.visits} visits`}</div>//(3)
  ));
};

export default Report;
Enter fullscreen mode Exit fullscreen mode
  1. After the component renders, query the Google Analytics Reporting API. In this example, we are querying for daily visits for the last 10 days. The all available query parameters you can find in the Docs.
  2. Transform the response data into an array of objects with two keys each: date and number of visits. Then set the value of the data state variable to the formatted result.
  3. Render the data array.

Import this component into App.js and replace the “Coming soon” div element with it.

App.js

...
import Report from './report';
...

return (
    <div className="App">
      {!isSignedIn ? (
        <div id="signin-button"></div>
      ) : (
        <Report />
      )}
    </div>
  );
  ...
Enter fullscreen mode Exit fullscreen mode

By running the app for my personal site, I get the following result:

query-result

Conclusion

In this blog post, I’ve described the process of enabling the Google Analytics Reporting API and how to query it from React App. Using this approach I’ve built a Custom Google Analytics Dashboard with different reports. The results are shown in charts, graphs and tables.

users

pages

devices

The source code of the Custom Google Analytics Dashboard, as well as the code fragments, which are used in this blog post, are available in this GitHub repo.

Top comments (27)

Collapse
 
dontech09 profile image
Don Jose Mathew

I want to build a dashboard for my client using Google Analytics. Is it possible without adding the SignIn method

Collapse
 
ramonak profile image
Katsiaryna (Kate) Lupachova

No, not possible. If there are no sign in, then it means that anyone can have an access to your client's analytics data which is not good at all. Luckily Google makes it impossible.

Collapse
 
surendraga profile image
Divyansh-sysadmin-creative • Edited

Hi Kate, thanks for your blog. I request you to please guide me here I am have two apps one admin dashboard for viewing all user activity and 2nd second react app for end user so how can I integrate Google analytics in order to view user activity in admin dashboard. Looking forward for your guidance

Thread Thread
 
ramonak profile image
Katsiaryna (Kate) Lupachova

Hi! How would you like me to guide you?

Thread Thread
 
surendraga profile image
Divyansh-sysadmin-creative

I hope I am able to explain my requirement. I want to view reports via ga api v4 in admin dashboard

Thread Thread
 
ramonak profile image
Katsiaryna (Kate) Lupachova

How to view reports via Google analytics API v4 is described in the blog post. If you have any specific questions, please feel free to ask.

Collapse
 
manishpaudel profile image
manishpaudel

There is no view panel and view settings in Analytics page. Where can I find it?

Collapse
 
ramonak profile image
Katsiaryna (Kate) Lupachova

Go to your Google Analytics account analytics.google.com/, in the bottom left corner select Admin option, then you'll see View Settings in the right column. Screenshots of all these steps are present in the blog post.

Collapse
 
manishpaudel profile image
manishpaudel

I am sorry but I couldn't find the view settings tab there.
Here is the screenshot:
dev-to-uploads.s3.amazonaws.com/i/...

Thread Thread
 
ramonak profile image
Katsiaryna (Kate) Lupachova

Looks like a known issue. Could you please try to solve this issue using this answer support.google.com/analytics/threa...

Thread Thread
 
manishpaudel profile image
manishpaudel

Thank you very much. I was stuck for a week. Thanks a lot.

Thread Thread
 
ramonak profile image
Katsiaryna (Kate) Lupachova

Glad I could help!

Collapse
 
siddiquesheikh30 profile image
siddiquesheikh30

Thanks for the blog, after going through all the above steps it is showing me a blank screen and in my chrome console it is giving an error 'Failed to load resource: the server responded with a status of 403 ()' so is there any way to solve it please do tell me

Collapse
 
shoaibqasim1 profile image
ShoaibQasim1

hi katsiaryna(kate) i want to make a custome dashboard in React app where i can see my all google analytics specialy daily visitors,per page view, etc kinldy help me

Collapse
 
ramonak profile image
Katsiaryna (Kate) Lupachova

Hi! How would you like me to help you? You can find the complete code of how to get the metrics that you need (daily visitors,per page view) in the blog post.

Collapse
 
shoaibqasim1 profile image
ShoaibQasim1

how can i setup my site view id in your code because i can't find where i can replace my site's view id and second question is this you code is not running in my vscode giving blank screen just displaying title bar and header footer just

Thread Thread
 
ramonak profile image
Katsiaryna (Kate) Lupachova

re the second question: did you configure your project in Google developer console and add your CLIENT_ID into the .env file?

re the first question: there is a dedicated input element in the app where you should enter your view id. Meaning once you run the project, you'll be able to enter you view id in the app

Thread Thread
 
shoaibqasim1 profile image
ShoaibQasim1

Yes i added my project CLIENT_ID into the .env file but still i saw just attached picture screen

Collapse
 
ekoydakoykoy profile image
ekoydakoykoy

Hello thank you for this tutorial, it is very helpful. I am trying to create a heatmap base on google analytics data but I am not sure if we can retrieve the points where visitor hover their mouse on the website(is this a custom events to implement to GA). Have you tried to get this or setup this kind of data in GA? by default we only get the page and site visit in GA right?

Collapse
 
sankets10 profile image
sanket-s10

Hey .. thanks for article. I am able to get the data from google anaytics but it is working for only ga3 view. In my application we are not sending any data to ga3 universal property. So by using above article, can we get data for GA4 ?
I have gone through some articles and cant find how to create view for ga4.

So for my usecase, as we are not sending any data to universal analytics which has views, is it possible to get data by using above reporting API's ?

Collapse
 
ramonak profile image
Katsiaryna (Kate) Lupachova

Hi! No, using this article you can't get data for GA4. This blog post uses Google Analytics Reporting API v4, which doesn't support GA4 properties.

And by the way, GA4 is still in testing. You need to join Analytics Data API Trusted Testers program to be able to test it.

developers.google.com/analytics/de...

Collapse
 
glennanj1 profile image
John Glennan

This is excellent. I did the same project for electronjs, react and express. Lots of fun to see your data on your own terms. Love programming.

Collapse
 
wafa_bergaoui profile image
Wafa Bergaoui

thank you very much. This helped me a lot

Collapse
 
ramonak profile image
Katsiaryna (Kate) Lupachova

Happy to help!

Collapse
 
ttphu2 profile image
ttphu2

tks u very much !! <3

Collapse
 
arefi123 profile image
Sayed Ashraf Arefi

can you help me ?
How to implement google analytics api in angular ?

Collapse
 
xgusein profile image
Huseyn Ibadzade

Hello these codes is not working and I have a task. Could you help me?