DEV Community

John Ajera
John Ajera

Posted on

Embed a public GA4 dashboard with Looker Studio

#googleanalytics #ga4 #lookerstudio #staticsite

Embed a public GA4 dashboard with Looker Studio

Goal: open https://your.domain/stats and see three GA4 embeds (this year to date monthly, last 30 days daily, top URLs this week). One Looker Studio report per chart: three Public shares, three embed URLs. No Analytics login for viewers. No API keys.

You need gtag already on the site (GA4 static site setup). Know your Measurement ID (G-...).

1. Prerequisites

  • Browser signed into a Google account that can open your property in Google Analytics.
  • A folder you can deploy as the site (or add one HTML file to the host you already use).

2. Create the Looker Studio reports

Build three reports (one chart each). Shared create steps once; then configure each report.

Shared setup (first report)

  1. Open https://lookerstudio.google.com/.
  2. Click Create → Report (or Create a report / + Create new report on the home page).
  3. First time only: complete account setup (country, company if asked, agree to terms) → Continue.
  4. In Add data to report, choose Google Analytics.
  5. Click Authorize if Data Studio asks to connect to your Analytics accounts.
  6. Pick the property that matches your G-... Measurement ID → Add → Add to report.

If your property is missing from the list, that Google account cannot see GA4. Use the account that owns the property and start this section again.

For reports 2 and 3: Create → Report again. Reuse the same GA data source if Looker offers it; otherwise pick the same property.

Report A - Site traffic - this year to date

  1. Rename Untitled Report to Site traffic - this year to date.
  2. Keep one Bar chart (Add a chart → Bar chart / Column chart; delete other charts or tables). Monthly buckets read clearer as bars than a line.
  3. Select the chart. Under Setup:
    • Dimension: Date → granularity Year Month (or pick Year month as the X-axis / category dimension).
    • Metric: Sessions.
    • Default date range: Custom → This year to date.
  4. Drag the chart to fill the canvas (full width and height, little empty margin).
  5. Share menu → Invite people → Public → Viewer → Save.

Report B - Site traffic - last 30 days

  1. Rename Untitled Report to Site traffic - last 30 days.
  2. Keep one Time series (prefer this over a bar chart for ~30 days); delete extras. If you use a Bar chart, under Setup → Display turn Top N / Group the rest as "Others" off. Otherwise you only get 10 bars and a useless Others column.
  3. Select the chart. Under Setup:
    • Dimension: Date.
    • Metric: Sessions.
    • Default date range: Custom → Last 30 days.
  4. Drag the chart to fill the canvas.
  5. Share → Invite people → Public → Viewer → Save.

Report C - Top URLs - this week

  1. Rename Untitled Report to Top URLs - this week.
  2. Keep one Table (Add a chart → Table; delete extras).
  3. Select the table. Under Setup:
    • Dimension: Page location (full URL, so subdomains do not collapse into the same path).
    • Metric: Views.
    • Sort by Views descending.
    • Rows per page: 10 (or Top N = 10; leave Group the rest as "Others" off).
    • Default date range: Custom → Last 7 days.
  4. Drag the table to fill the canvas.
  5. Share → Invite people → Public → Viewer → Save.

Note: if local preview uses the same G-..., top rows may show localhost or 127.0.0.1. Optional chart filter: Hostname does not equal localhost (add another for 127.0.0.1 if needed). Skip if that traffic is not an issue for your site.

3. Get the embed URLs

Do this for each report:

  1. Open the report → Share menu → Embed report.
  2. Turn Enable embedding on.
  3. Uncheck Show report navigation in embedded mode.
  4. Leave Embed Code selected (or Embed URL; same link either way).
  5. Copy only the URL inside src="...". It must contain /embed/reporting/ (not plain /reporting/).

Example shape:

https://lookerstudio.google.com/embed/reporting/aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee/page/XXXXX
Enter fullscreen mode Exit fullscreen mode

The dialog may show datastudio.google.com instead of lookerstudio.google.com; either host is fine. You need three URLs for the next section.

4. Add /stats on the site

Create a file the host serves at /stats (for a plain static host: stats/index.html in the published root).

Replace each PASTE_EMBED_URL_* with the matching URL from section 3:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="robots" content="noindex, nofollow" />
    <title>Site traffic</title>
  </head>
  <body>
    <iframe
      src="PASTE_EMBED_URL_A"
      title="Site traffic - this year to date"
      style="width:100%;height:60vh;border:0"
      allowfullscreen
      loading="lazy"
    ></iframe>
    <iframe
      src="PASTE_EMBED_URL_B"
      title="Site traffic - last 30 days"
      style="width:100%;height:60vh;border:0"
      allowfullscreen
      loading="lazy"
    ></iframe>
    <iframe
      src="PASTE_EMBED_URL_C"
      title="Top URLs - this week"
      style="width:100%;height:60vh;border:0"
      allowfullscreen
      loading="lazy"
    ></iframe>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Do not add /stats to the site nav. Deploy (or refresh local preview).

CSP: if an iframe is blank and DevTools says blocked by Content-Security-Policy, add this and redeploy:

frame-src https://lookerstudio.google.com https://datastudio.google.com;
Enter fullscreen mode Exit fullscreen mode

5. Check it worked

Open https://your.domain/stats in a private/incognito window (not signed into Google). You should see all three embeds.

If one is missing or shows a sign-in wall, fix that report's share/embed (sections 2-3) and update its iframe src. Later chart edits stay in Looker Studio; the site keeps the same URLs unless you change a report.

6. Troubleshooting

What you see What to do
Sign-in wall on /stats That report: Share → Invite people → Public → Viewer → Save
Empty chart Confirm G-... on the live site; Realtime in Analytics; correct property. Avoid Last year if the property is new (that is the previous calendar year, not a rolling year)
Top URLs show localhost / 127.0.0.1 Optional: filter those hostnames out (see Report C note)
Bar chart shows a huge Others Turn off Top N / Group the rest as "Others" (or use a time series)
Iframe blocked Section 4 CSP frame-src; redeploy
Chart looks tiny In that report, resize the chart to fill the canvas

7. References

Top comments (0)