{"id":26898447,"url":"https://github.com/jabercrombia/google-dashboard-api","last_synced_at":"2026-03-01T02:05:21.567Z","repository":{"id":280085852,"uuid":"940946006","full_name":"jabercrombia/google-dashboard-api","owner":"jabercrombia","description":"This project demonstrates how to integrate Google Analytics 4 (GA4) with a Next.js application, leveraging the GA4 Data API to fetch and analyze user interaction data programmatically. The integration enables seamless tracking of user behavior and dynamic reporting of key metrics, such as active users, page views, and more.","archived":false,"fork":false,"pushed_at":"2025-05-16T17:37:06.000Z","size":1535,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-03T01:38:59.723Z","etag":null,"topics":["analytics","ga4","google","nextjs","vercel"],"latest_commit_sha":null,"homepage":"https://google-dashboard-api.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jabercrombia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-03-01T05:34:19.000Z","updated_at":"2025-05-30T00:44:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"02d2f37b-2cd8-4387-a7e7-83f4105197ab","html_url":"https://github.com/jabercrombia/google-dashboard-api","commit_stats":null,"previous_names":["jabercrombia/google-dashboard-api"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jabercrombia/google-dashboard-api","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jabercrombia%2Fgoogle-dashboard-api","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jabercrombia%2Fgoogle-dashboard-api/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jabercrombia%2Fgoogle-dashboard-api/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jabercrombia%2Fgoogle-dashboard-api/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jabercrombia","download_url":"https://codeload.github.com/jabercrombia/google-dashboard-api/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jabercrombia%2Fgoogle-dashboard-api/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29958420,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-01T01:47:18.291Z","status":"online","status_checked_at":"2026-03-01T02:00:07.437Z","response_time":124,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["analytics","ga4","google","nextjs","vercel"],"created_at":"2025-04-01T05:47:34.811Z","updated_at":"2026-03-01T02:05:16.553Z","avatar_url":"https://github.com/jabercrombia.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Google Analytics 4 (GA4) Custom Dashboard\n\n![homepage image](/public/homepage.png)\n\nThis project demonstrates how to integrate **Google Analytics 4 (GA4)** with a **Next.js** application, leveraging the **GA4 Data API** to fetch and analyze user interaction data programmatically. The integration enables seamless tracking of user behavior and dynamic reporting of key metrics, such as active users, page views, and more.\n\n---\n\n## **Project Overview**\nThis project was built to:\n1. **Track User Interactions**: Use GA4 to monitor page views and user interactions on a Next.js application.\n2. **Fetch Data Programmatically**: Utilize the GA4 Data API to retrieve analytics data for reporting and analysis.\n3. **Ensure Secure Authentication**: Authenticate API requests using a Google Cloud Service Account for secure access to GA4 data.\n\n## **Project Setup**\n\n### **Project Keys and Client Email**\n1. You will need to login to your Google Console and select API \u0026 Services\n2. Click on the \"Library\" tab and search for ``google analytics data api`` in the Search for APIs \u0026 Services search box.\n   - Click the \"Google Analytics Data API\" Button and click Enable.\n3. Once enabled you will go to the \"Credentials\" tab and at the top middle of the screen click \"+Create Credentials\".\n   - Click \"Service account\" and fill in the appropriate fields. You will to copy the email address field onces all the fields are fill in this will be used later in your .env.local file. In this case the value is ``test-644@ga4-dashboard-1740677661577.iam.gserviceaccount.com``\n4. Under the \"Credentials\" Section click on ``test-644@ga4-dashboard-1740677661577.iam.gserviceaccount.com`` Service Account.\n5. Click on the \"Keys\" tab which is on the top middle of the screen.\n   - Click the \"Add Key\" Drop-Down Button\n      - Click on the \"Create new key\" and Select JSON as the Key Type and click the Create link.\n6. This will download a json file to your local machine.\n7. Open the json file and find the below fields.\n   - \"private_key\":\n   - \"client_email\":\n8. Open your .env.local file and add the below fields and values\n   - GOOGLE_PRIVATE_KEY=[``private_key`` value from json file]\n   - GOOGLE_CLIENT_EMAIL=[``client_email`` value from json file]\n### **Google Tracking ID**\n1. Navigate to your Google Analytics [property](https://analytics.google.com/analytics/web/) that you want to retrieve the data from.\n2. Click on the \"Gear Icon\" that will take you to the Admin section.\n3. Scroll to ``Data collection and modification`` section and click on ``Data Streams``\n4. Click on the data stream you want your data from and find the field ``MEASUREMENT ID``.\n   - It will start with a ``G-XXXXXXXXXX``.\n5. Copy this value and paste it in your .env.local file as below\n   - GOOGLE_TRACKING_ID=``G-XXXXXXXXXX``\n\nYou are now done with the setup!\n\n\n\n## **Key Features**\n- **GA4 Tracking**: Integrated GA4 tracking to monitor user interactions and page views.\n- **Dynamic Data Fetching**: Used the GA4 Data API to fetch metrics like active users, session duration, and more.\n- **Secure Authentication**: Implemented secure authentication using a Google Cloud Service Account.\n- **Custom Reporting**: Built custom dashboards and reports using the fetched GA4 data.\n- **Password Modal for Secure API Access**: Added a password modal to restrict access to sensitive API requests. The modal ensures that only authenticated users can make requests to the GA4 Data API.\n---\n\n## **How It Works**\n1. **GA4 Tracking**:\n   - The project integrates GA4 tracking into the Next.js app to monitor user interactions and page views.\n   - Page views are tracked dynamically as users navigate through the app.\n\n2. **GA4 Data API**:\n   - The GA4 Data API is used to fetch analytics data programmatically.\n   - Metrics such as active users, page views, and session duration are retrieved for analysis.\n\n3. **Authentication**:\n   - A Google Cloud Service Account is used to authenticate API requests securely.\n   - The Service Account has access to the GA4 property, ensuring data privacy and security.\n\n4. **Custom Reporting**:\n   - The fetched data is used to generate custom reports and dashboards.\n   - These reports provide insights into user behavior and app performance.\n\n5. **Password Modal**:\n   - A password modal was added to restrict API requests, ensuring that only users with the correct credentials can access and fetch data.\n   - The modal was created using **Shadcn** for an elegant and user-friendly design.\n\n   ![modal password image](/public/modalpassword.png)\n\n---\n\n## **Technologies Used**\n- **Next.js**: A React framework for building server-rendered and static web applications.\n- **Google Analytics 4 (GA4)**: For tracking user interactions and analyzing app performance.\n- **GA4 Data API**: For programmatically fetching analytics data.\n- **Google Cloud Service Account**: For secure authentication and API access.\n- **Shadcn**: Used for building the password modal.\n\n---\n\n## **Project Structure**\nThe project is organized into the following components:\n1. **GA4 Tracking**: Integrated into the Next.js app to monitor user interactions.\n2. **API Integration**: Uses the GA4 Data API to fetch analytics data.\n3. **Authentication**: Securely authenticates API requests using a Google Cloud Service Account.\n4. **Reporting**: Generates custom reports and dashboards using the fetched data.\n5. **Password Modal**: Restricts access to sensitive API endpoints using a password modal created with Shadcn.\n\n---\n\n## **How to Use**\n1. **Set Up GA4**:\n   - Create a GA4 property in your Google Analytics account.\n   - Add the GA4 tracking script to your Next.js app.\n\n2. **Enable GA4 Data API**:\n   - Enable the GA4 Data API in your Google Cloud project.\n   - Create a Service Account and grant it access to your GA4 property.\n\n3. **Fetch Data**:\n   - Use the GA4 Data API to fetch analytics data programmatically.\n   - Retrieve metrics like active users, page views, and session duration.\n\n4. **Generate Reports**:\n   - Use the fetched data to generate custom reports and dashboards.\n   - Analyze user behavior and app performance.\n\n5. **Password Modal**:\n   - When accessing secure endpoints, users will be prompted with a password modal.\n   - Enter the correct credentials to gain access to the API data.\n\n---\n\n## **Benefits**\n- **Real-Time Insights**: Gain real-time insights into user behavior and app performance.\n- **Custom Reporting**: Build custom reports tailored to your needs.\n- **Secure Authentication**: Ensure secure access to GA4 data using a Service Account.\n- **Scalable Solution**: Designed to scale with your app and user base.\n\n---\n\n## **License**\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjabercrombia%2Fgoogle-dashboard-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjabercrombia%2Fgoogle-dashboard-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjabercrombia%2Fgoogle-dashboard-api/lists"}