icon code gradient

jkirkwood.dev

I built one dashboard for two analytics tools and made the data actionable with AI-powered insights

Author

Jackie Kirkwood

Date Published

An image of the analytics dashboard on a laptop screen

Google Analytics 4 (GA4) and Google Search Console (GSC) are the two main tools for monitoring web traffic and user behavior. Between them, they provide a lot of data, but data isn't the same as clarity. I wanted to build a dashboard that got to the point, and used AI to provide actionable insights. I built the whole thing using Claude Code, which turned out to be especially useful when the Google authentication setup got complicated. This post covers what I built, the decisions behind it, and how you can clone it to make it your own.

The Problem With Analytics Tools

If you run a website, you probably have Google Analytics set up. You might have Search Console too. And if you've ever tried to get a clear picture of how your site is actually performing, you know the drill: open Analytics, dig through the metrics, open Search Console in another tab, dig through that, and then try to hold it all in your head long enough to figure out what it means.

Even when you do piece it together, the data tells you what happened, not what to do about it. It shows you that traffic dropped, or that a page has a high bounce rate, or that a keyword is gaining impressions. But it doesn't tell you why, or what to fix first, or what's actually worth celebrating.

I wanted to build something that solved both problems: one place to see all my data, and an AI to help me make sense of it.

What I Built

The result is a web analytics dashboard that pulls live data from both GA4 and Google Search Console, displays it in one clean interface, and includes an AI insights panel powered by the Claude API.

Here's what it shows:

From GA4:

  • Sessions, active users, new users, page views, engaged sessions, engagement rate, average session duration, and conversions
  • A sessions-over-time line chart with configurable date ranges
  • Traffic source breakdown by channel group
  • Top 10 pages by views, with engagement rate and average session duration per page

From Google Search Console:

  • Total clicks, impressions, CTR, and average position
  • A clicks and impressions trend chart over time
  • Top 10 search queries by clicks

AI Insights

When you click "Generate Insights," the dashboard sends your current analytics data to the Claude API and returns a structured analysis broken into three sections: What's Working, What Needs Attention, and Quick Wins. Insights are cached per date range so you're not making unnecessary API calls every time you reload.

There's also a date range picker, for 7, 28, and 90 days, that updates every chart and metric simultaneously.

A video of the website analytics dashboard in action

The Stack

Frontend: React with Vite for the build tooling, and Recharts for the data visualizations. Vite made the development experience fast and the charts library gave me enough flexibility to get the visuals where I wanted them without spending days on it.

Backend: Node.js and Express. The server handles all the API calls to Google Analytics, Google Search Console, and the Anthropic API, and exposes clean endpoints for the frontend to consume.

APIs:

  • Google Analytics Data API for GA4 metrics
  • Google Search Console API via the googleapis package
  • Anthropic SDK for the Claude integration

The frontend and backend run concurrently in development: Express on port 3001, Vite on port 5173. A single npm run dev from the project root starts both.

The Hardest Part: Google Auth

I'll be honest – getting the Google API authentication working was the most painful part of this project by a significant margin.

Both GA4 and Search Console require a Google Cloud service account: a credential file that grants your application permission to read your data. Setting one up involves creating a project in Google Cloud Console, enabling the right APIs, generating a service account, downloading a JSON credentials file, and then granting that service account access inside your GA4 property and Search Console separately.

None of it is especially complicated in isolation, but the steps are spread across multiple Google products, the error messages aren't always helpful, and one misconfigured permission means nothing works and you're not sure why.

This is where Claude Code genuinely earned its place in the project. I'd hit an error, paste it into the terminal, and Claude would identify exactly what was misconfigured and walk me through fixing it. When I got the permissions wrong on the service account, it spotted the issue and explained which roles needed to be granted and where. When my environment variables weren't being picked up correctly, it debugged the setup and explained why.

It didn't just give me the answer – it gave me enough context to understand what I was actually doing, which meant fewer repeat mistakes as the project went on.

The end result is four environment variables you need to run the project:

1ANTHROPIC_API_KEY=your_anthropic_api_key
2GOOGLE_APPLICATION_CREDENTIALS=your-service-account-file.json
3GA4_PROPERTY_ID=your_ga4_property_id
4GSC_SITE_URL=https://yoursite.com

Once those are in place and the service account has the right permissions, everything connects cleanly.

The AI Insights Piece

This was the part I was most curious about building, and the most satisfying once it worked.

When you click "Generate Insights," the frontend sends a POST request to /api/insights with your current analytics data as the request body: GA4 overview metrics, traffic sources, top pages, Search Console summary, and top queries. The server constructs a prompt from that data and sends it to the Claude API.

Claude analyzes the numbers and returns a structured response with three sections:

  • What's Working — metrics and trends that are genuinely positive and worth doubling down on
  • What Needs Attention — areas where something looks off and probably warrants a closer look
  • Quick Wins — specific, actionable things you could do in the near term based on what the data shows

The response is rendered directly in the dashboard and cached in localStorage per date range. That means if you switch between 7-day and 28-day views, each one generates and stores its own insights. You only need to regenerate when you want a fresh analysis.

What makes this useful rather than just novel is that Claude is working with your actual data, not a generic description of analytics metrics. The observations are specific: a particular page underperforming, a traffic source gaining share, a query that's getting impressions but not clicks. It's the kind of read that used to take me twenty minutes of manually comparing tabs.

There's also a meta layer here that I find genuinely interesting: I used Claude Code to build a tool that uses Claude to analyze data. The same AI that helped me debug the Google auth setup is the one running the insights engine.

What I Learned

Google's API setup is real work.

The authentication layer is the biggest barrier to entry for projects like this. If you're comfortable with service accounts and environment variables, it's manageable. If you're not, budget extra time — you can always leverage AI to help you through the error messages.

Caching was worth the extra effort.

The AI insights call isn't free. It makes an API request to Anthropic every time you trigger it. Adding localStorage caching per date range meant the dashboard became much more practical to actually use day-to-day. It's a small thing that made a big difference in feel.

Local-only was the right call, for now.

The /api/insights endpoint calls the Anthropic API on every request. Without an auth layer in front of it, exposing that publicly would mean anyone who found the URL could trigger API calls at my expense. Keeping the project local-only was the pragmatic decision, but adding an auth layer and deploying it is on the roadmap.

Claude Code made the whole thing faster.

Not just for the Google auth, for all of it. Wiring up new API endpoints, debugging unexpected data shapes, structuring the React components. Having a collaborator that could read my code and respond in context cut the time I would have spent context-switching between documentation and my editor.

Clone It Yourself

The full project is on my GitHub. If you want to run it for your own site, you'll need:

  • A Google Analytics 4 property
  • Google Search Console access for the same site
  • A Google Cloud service account with access to both
  • An Anthropic API key

The README walks through the full setup step by step, including how to create the service account and which permissions to grant. Once the environment variables are in place, npm run dev from the project root starts everything.

It won't work out of the box for a site you don't own — it's pulling real live data from your GA4 property and Search Console account. But if you have those set up already getting the dashboard running is mostly just the credential configuration.

Here is a link to the GitHub Repo. Feel free to fork it, adapt it, or use it as a reference if you're building something similar.