Engagement rate shows what percentage of your sessions are actually meaningful — but GA4 doesn't surface this metric prominently in every report by default. Whether you're tracking product adoption, content performance, or feature usage, knowing your engagement rate is critical. Let's walk through how to visualize it.
Viewing Engagement Rate in GA4 Reports
The fastest way is to add engagement rate to an existing report using GA4's Reports tab.
Open the Reports section and find your target report
Go to Reports in the left sidebar. Pick a report like User Acquisition, Engagement, or Monetization depending on what you're analyzing. These are pre-built reports with common metrics.
Add Engagement Rate as a metric
Click the pencil icon or Customize button to edit the report. Click Metrics and search for Engagement rate. Add it to the table. GA4 will display it as a percentage alongside your other metrics.
Segment by dimension to drill down
Click Add dimension and pick something like Device category, Country, or User acquisition source. This breaks down engagement rate by user type so you can see where your most engaged sessions come from.
// GA4 automatically calculates engagement rate as:
// (Engaged sessions / Total sessions) × 100
// Where an engaged session = ≥10 seconds OR ≥1 conversion event
// No code needed — this happens in the UICreating a Custom Engagement Visualization with Explorations
For more control, use GA4's Explorations feature to build a custom analysis with engagement rate as your main metric.
Create a new exploration
Go to Explore in the left sidebar and click Create new to start a blank exploration. Choose the Free form template so you can pick any metrics and dimensions.
Add engagement rate and key dimensions
Drag Engagement rate into the metrics panel. Add dimensions like Source, Page title, or Event name to break it down. Use a table or time series chart depending on what story you're telling.
Filter for meaningful segments
Add a filter to exclude bot traffic or focus on specific user cohorts. Click Add filter and choose Exclude traffic from known bots or build a custom filter on User ID, Country, or any custom dimension you've defined.
// Example: Create a filter in Explorations
// Apply a segment where:
// Engagement rate > 25% OR Engagement time > 60 seconds
// Save it as a reusable segment for other reports
// Filters in the UI don't require code — just click and configurePulling Engagement Rate via the Google Analytics Data API
To automate engagement rate visualization or embed it in a dashboard, use the Google Analytics Data API v1.
Authenticate and set up the Data API client
Install the Google Analytics Data API JavaScript library and create a client using a service account key. This lets your backend fetch engagement data programmatically.
import { BetaAnalyticsDataClient } from '@google-analytics/data';
const analyticsDataClient = new BetaAnalyticsDataClient({
credentials: {
type: 'service_account',
project_id: process.env.GOOGLE_CLOUD_PROJECT_ID,
private_key: process.env.GOOGLE_CLOUD_PRIVATE_KEY,
client_email: process.env.GOOGLE_CLOUD_CLIENT_EMAIL,
},
});
console.log('Data API client initialized');Query engagement rate with runReport()
Use the runReport() method to fetch engagement rate for a date range. Specify the property ID (starts with properties/), metrics like engagementRate, and dimensions to slice by.
const response = await analyticsDataClient.runReport({
property: 'properties/YOUR_PROPERTY_ID',
dateRanges: [
{
startDate: '2024-01-01',
endDate: '2024-03-26',
},
],
metrics: [
{ name: 'engagementRate' },
{ name: 'engagedSessions' },
{ name: 'sessions' },
],
dimensions: [
{ name: 'date' },
{ name: 'source' },
],
});
response.rows.forEach(row => {
console.log(`Date: ${row.dimensionValues[0].value}, Source: ${row.dimensionValues[1].value}, Engagement: ${row.metricValues[0].value}`);
});Visualize the results
Transform the API response into a chart format. Use a library like Chart.js, Recharts, or Plotly to render a bar chart, line graph, or heatmap of engagement rate over time or across segments.
// Transform API response for charting
const chartData = response.rows.map(row => ({
date: row.dimensionValues[0].value,
source: row.dimensionValues[1].value,
engagementRate: parseFloat(row.metricValues[0].value),
engagedSessions: parseInt(row.metricValues[1].value),
totalSessions: parseInt(row.metricValues[2].value),
}));
// Sort by engagement rate descending
chartData.sort((a, b) => b.engagementRate - a.engagementRate);
console.log(chartData);0.45 for 45%). Multiply by 100 if you want it as a percentage string for display.Common Pitfalls
- Forgetting that GA4's engagement rate threshold is ≥10 seconds OR ≥1 conversion event. A session under 10 seconds with no conversions will always show as 0% engagement, even if the user saw your product.
- Comparing engagement rate across properties without checking your Goal configuration. If Property A tracks conversions but Property B doesn't, their engagement rates won't be comparable.
- Using engagement rate alone to judge page quality. High engagement rate + low traffic might mean only power users visit that page. Cross-reference with page views and user count.
- Querying the Data API without date ranges. Always specify
dateRangesto avoid querying all historical data, which can be slow and expensive.
Wrapping Up
Now you can visualize engagement rate in GA4 using the built-in UI reports, custom explorations, or the Data API for automated dashboards. Start with the Reports tab to see what your engagement looks like, then move to the Data API if you need to embed this metric into your product analytics dashboard or send alerts when engagement drops. If you want to track this automatically across tools, Product Analyst can help.