DEV Community

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

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

Katsiaryna (Kate) Lupachova on May 19, 2020

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 met...
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?