How to Show Google Analytics Data on My Site

Showing live Google Analytics data on your own website gives clients, stakeholders, or even your internal team a real-time pulse on performance without ever needing to log in to GA. This article walks you through the most common methods for embedding GA metrics directly onto your site, from easy-to-use visualizers to custom-coded solutions.

Graphed

Still Building Reports Manually?

Watch how growth teams are getting answers in seconds — not days.

Watch the Demo

Why Put Google Analytics Data on Your Website?

Before jumping into the "how," it's helpful to understand the "why." Displaying key metrics from Google Analytics directly on a webpage serves several practical purposes:

• Client Dashboards: If you run an agency, you can build a password-protected page for each client that shows the direct impact of your work on their site traffic, conversions, and engagement. It's transparent and keeps everyone on the same page.
• Internal Team Visibility: Create an internal dashboard page for your marketing, sales, or content teams. Displaying key performance indicators (KPIs) like daily sessions, top-performing pages, or lead conversions keeps the team aligned and motivated.
• Digital Portfolios: For freelancers or small businesses, showing high-level, anonymized traffic data can be a powerful way to demonstrate a website's reach and authority in a portfolio or "press" page.
• Public-Facing Transparency: Some businesses in media or open-source technology might display public traffic statistics as a sign of transparency and to show the scale of their community.

Method 1: The 'Easier' Way - Using Visualization and Reporting Tools

By far the most common and user-friendly approach is to use a dedicated dashboarding tool. These services connect to your Google Analytics account, let you build charts and tables with a drag-and-drop interface, and then provide a simple <iframe> embed code you can paste anywhere on your site.

Using Google's Looker Studio (Formerly Data Studio)

Looker Studio is Google's free data visualization tool, and it's the natural first choice for this task. It connects seamlessly with other Google products, including Google Analytics 4.

Step-by-Step: Embedding a Looker Studio report

1. Create a New Report: Go to Looker Studio and start a new, blank report.
2. Connect to Google Analytics: You'll be prompted to select a data source. Find and choose the "Google Analytics" connector.
3. Authorize and Select Your Property: Follow the on-screen popups to authorize Looker Studio to access your Google account. Once connected, choose the appropriate Account, Property, and Data Stream for the website you want to display data from.
4. Build Your Dashboard: Now for the fun part. Looker Studio acts like a blank canvas.
5. Get the Embed Code: Once your dashboard looks right, click the "Share" button dropdown and select "Embed report."
6. Customize and Copy Code: A popup will appear. Check the "Enable embedding" box. You can adjust the height and width to fit your website's layout. Copy the <iframe> code provided.
7. Paste it on Your Site: Go into your website's editor (like WordPress, Squarespace, or Webflow). Add a "Custom HTML" or "Code" block to your desired page and paste the <iframe> code you just copied. Publish your page, and your live dashboard will appear!

The beauty of this method is that the data stays fresh. The embedded report in your website will update automatically as new data comes into your Google Analytics property.

Graphed

Still Building Reports Manually?

Watch how growth teams are getting answers in seconds — not days.

Watch the Demo

Using Website Platform Plugins (e.g., WordPress)

If your site runs on a platform like WordPress, you have another easy option: plugins that are built specifically for this purpose.

Tools like Site Kit by Google (Google's official WordPress plugin) or MonsterInsights not only add the GA tracking script to your site but also provide dashboard widgets that you can display on the frontend or backend of your WordPress site. Many of these use shortcodes or blocks, making it extremely simple to add a traffic chart to a specific page or post without ever touching embed codes.

Method 2: The 'Harder' Way - Building a Custom Solution with the API

If you're comfortable with code or have specific design requirements that a tool like Looker can't meet, you can pull data directly from the Google Analytics Data API. This gives you 100% control over the data you fetch and how it's displayed.

This path is more complex and typically involves both a front-end (what the user sees) and a back-end (a server that securely talks to Google).

Graphed

Still Building Reports Manually?

Watch how growth teams are getting answers in seconds — not days.

Watch the Demo

A Simplified Overview of the API Process:

Step 1: Get Your Credentials from Google Cloud Platform

First, you need to tell Google your application is trying to access data. This is done in the Google Cloud Platform (GCP).

• Create a project in the GCP Console.
• Enable the "Google Analytics Data API" for your project.
• Create service account credentials. A service account is like a robot user that can get data on behalf of your server. Download the JSON key file - and guard it carefully, as it grants access to your data.
• Finally, you need to add the service account's email address as a "Viewer" on your Google Analytics property, just like you would add a human team member. This gives the "robot" permission to read the data.

Step 2: Write Code to Fetch Your Data (Back-end)

Your website's server (running a language like PHP, Node.js, or Python) will use the credentials from Step 1 to make a request to the GA Data API. You’ll need to install the appropriate Google Client Library for your chosen language to make this easier.

Your code will need to specify a few things in its request:

• Your GA4 Property ID (e.g., properties/123456789)
• The date range (e.g., the last 28 days)
• The metrics you want (e.g., sessions, activeUsers)
• The dimensions you want (e.g., date, country)

Google's API will send back your data structured in a JSON format.

Step 3: Display the Data on Your Site (Front-end)

With the data fetched by your server, you can now display it. The simplest way is to just print the numbers in HTML.

For something more visual, you can use a JavaScript charting library like Chart.js or D3.js. Your back-end code passes the JSON data to your front-end script, which then uses the charting library to render a beautiful, interactive graph inside a <div> or <canvas> element on your page.

A quick code example would be too complex to be truly useful here, but the logic flows like this:

// This is conceptual pseudo-code, not runnable!

// 1. On your Back-End Server (e.g., Node.js with Express.js)
// Use the official Google API library and your JSON credentials file
const {BetaAnalyticsDataClient} = require('@google-analytics/data'),
const analyticsDataClient = new BetaAnalyticsDataClient(),

async function getGAData() {
  const [response] = await analyticsDataClient.runReport({
    property: `properties/YOUR_PROPERTY_ID`,
    dateRanges: [{ startDate: '28daysAgo', endDate: 'today' }],
    metrics: [{ name: 'sessions' }],
    dimensions: [{ name: 'date' }],
  }),
  // Send this formatted response to the front-end
  return res.json(response),
}

// 2. On your Front-End (JavaScript in the browser)
// Fetch data from your own server
fetch('/api/ga-data')
  .then(response => response.json())
  .then(data => {
    // Use Chart.js or similar to build a chart
    const totalSessions = data.totals[0].metricValues[0].value,
    document.getElementById('ga-sessions-widget').innerText = `Total Sessions: ${totalSessions}`,
  }),

This approach offers maximum flexibility but comes with the costs of development time, maintenance, and handling API security properly.

Graphed

Still Building Reports Manually?

Watch how growth teams are getting answers in seconds — not days.

Watch the Demo

Which Method Is Right for You?

Choosing between these two paths comes down to your technical skill, budget, and customization needs.

Choose a Visualization Tool like Looker Studio if:

• You are not a developer and want a code-free solution.
• You need a dashboard up and running in minutes, not days.
• The styling and features of a standard dashboard are good enough for your needs.
• You want something reliable and free.

Choose the Custom API Method if:

• You are a developer or have access to one.
• You need full control over the branding, look, and feel of the charts to perfectly match your site design.
• You need to combine GA data with data from another source in a completely custom way.
• You're building this feature as part of a larger web application or SaaS product.

Final Thoughts

Displaying Google Analytics metrics directly on your site is a great way to make data more accessible and actionable for clients or your team. You can get started quickly and for free with tools like Looker Studio for embedding dashboards, or go for a fully custom-built solution using the GA Data API if your needs are more complex.

We built Graphed because we believe getting answers from your data shouldn't require picking between learning a new, complex tool or spending weeks on a custom API integration. By connecting your sources like Google Analytics in just a few clicks, you can use simple, plain English to build dashboards and get insights instantly. It’s a way for your entire team, technical or not, to get the insights they need without the steep learning curve!