Learn › Episode 1

How to Build a Website Traffic Dashboard with AI

Google Analytics has all the answers about your website, buried under dozens of reports nobody opens. In this lesson you'll turn a few GA4 exports into a clean, one-page dashboard using Claude or ChatGPT. It takes about an hour, costs nothing, and you don't need to write any code.

What you'll build

• Sessions, new users, engaged sessions and engagement rate, each compared with the previous period
• Visits over time, daily or weekly
• Where visitors come from, by channel
• Top landing pages, devices and cities
• Filters for the last 30 days, 90 days, 12 months or any custom date range

It's one HTML file. It opens in any browser, works on a phone, and you can email it or turn it into a link.

What you need

• Viewer access to your Google Analytics 4 property
• A free or paid Claude or ChatGPT account
• About an hour

No Google Analytics yet? Download the sample data and follow along.

Step 1: Export four files from GA4

In GA4, open Explore and start a Free form exploration. Set the date range, then add five dimensions (Date, Session default channel group, Landing page, City, Device category) and three metrics (Sessions, New users, Engaged sessions).

Set Show rows to the largest option on every tab, then click the download icon and choose CSV for each one. Don't clean up the files: the comment lines, the "Grand total" row and dates like 20260115 are all handled by the prompt.

Step 2: Paste the first prompt

Upload your four files to a new chat and paste this:

I'm attaching four CSV files exported from Google Analytics 4 for my website: traffic_by_day.csv, landing_pages.csv, devices.csv and cities.csv.

Before using them, clean them up: skip any lines at the top that start with #, skip any "Grand total" row, read dates written like 20260115 as real dates, and remove commas from numbers.

Build me a website traffic dashboard as a single HTML file. Put all the data inside the file so it works offline with no server, and draw the charts with plain SVG (no outside libraries).

Include:
1. Four key numbers at the top: Sessions, New users, Engaged sessions, and Engagement rate (engaged sessions divided by sessions). Under each, show the percent change vs. the previous period of the same length.
2. A line chart of sessions over time with a hover tooltip. Use daily points for ranges up to about 4 months and weekly points for longer ranges. Count weeks back from the last date, and leave out a partial first week so it doesn't look like a drop.
3. "Where visitors come from": sessions by channel as horizontal bars, with each channel's share of sessions and engagement rate.
4. Top 10 landing pages: sessions, share of sessions, engagement rate.
5. Devices: share of sessions and engagement rate for each device.
6. Top 10 cities: sessions, share of sessions, engagement rate.

Do not add up GA4 users across days; GA4 counts unique users, so a sum would be too high.

When you're done, tell me the total sessions and engaged sessions for the full date range so I can check them against GA4.

Then add filters and your branding with prompts 2 and 3. All four prompts, plus troubleshooting, are on the prompt pack page.

Step 3: Check the numbers, then share

Pick your full date range and compare total sessions and engaged sessions with the Grand total row in your GA4 export. They should match exactly. To share it, email the file, or drag it onto Netlify Drop to get a web link in under a minute.

Three mistakes to avoid

1. Adding up users across days. GA4 counts each person once per period, so a daily sum overcounts. Use sessions and engaged sessions, which add up correctly.
2. Comparing seasons without noticing. A 90-day view that starts after your busy season will always look like a drop. Check the same period last year.
3. Trusting it before checking it. AI is fast and usually right, not always right.

Frequently asked questions