DASHBOARD WORKSHOP · WEBSITE TRAFFIC PROMPT PACK
https://dashboardworkshop.com/learn/website-traffic-dashboard-with-ai/prompts/

=== PROMPT 1: Build the dashboard ===

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.

=== PROMPT 2: Add the filters ===

Add a filter row at the top:
- Buttons for Last 30 days, Last 90 days and Last 12 months, counted back from the last date in my data.
- A Custom button that shows From and To date pickers, limited to my data's date range. If the From date is after the To date, swap them.
- A channel dropdown with "All channels" plus each channel.
- Open the page on Last 90 days, so the percent changes have an earlier period to compare against.

Every number and chart should update when a filter changes. Clicking a channel's bar should also filter the page, and clicking it again should clear the filter.

The landing page, device and city sections don't have channel data, so keep them on all channels and add a small note saying so.

=== PROMPT 3: Make it yours ===

Polish the design:
- Put "[Your organization name]" and "Website Traffic" at the top.
- Use [your brand color, for example #12405f] as the accent color.
- Add a dark mode that follows my device's setting. In dark mode, use a lighter shade of my accent color so lines and buttons stay easy to see.
- Make it work on a phone: the key numbers should stack in two columns, and nothing should scroll sideways.
- Use clear section titles and short notes under each chart explaining what it shows.

=== PROMPT 4: Update with new data ===

Here are fresh GA4 exports in the same four files. Replace the data in my dashboard with this new data and keep everything else exactly the same. Then tell me the new total sessions for the full date range.

=== BONUS (Episode 2): Build it from a Google Analytics connector ===

Using my Google Analytics connector, pull data for the [property name] property for the last 12 months:
- Daily sessions, new users and engaged sessions by session default channel group
- Sessions and engaged sessions by landing page, by device category and by city

Then build a website traffic dashboard as a single HTML file with all the data inside it and plain SVG charts. Include four key numbers compared with the previous period, sessions over time, channels, top 10 landing pages, devices and top 10 cities, with date and channel filters. Open on the last 90 days.

When you're done, tell me the total sessions and engaged sessions you pulled, and the exact date range.