How to Integrate Retool with Google Analytics

Navigate to the Resources tab in Retool's left sidebar and click Add Resource. In the resource type picker, scroll to or search for Google Analytics. Click it to open the configuration panel. Retool offers two Google Analytics resource types: Google Analytics (for Universal Analytics / GA3, now deprecated) and Google Analytics 4 for GA4 properties. Select Google Analytics 4 for any property created after October 2020. Give the resource a descriptive name such as Google Analytics - Production. In the Authentication section, click the Connect Google Account button. Retool redirects you to Google's OAuth consent screen where you will see a list of requested permissions — Retool needs read access to Google Analytics Data API to query your GA4 properties. Sign in with a Google account that has at least Viewer access to the GA4 property. After authorizing, Google redirects back to Retool and the resource configuration shows your authenticated Google account. You can optionally set a Default Property ID if you primarily query one GA4 property — enter the property ID in the format 123456789 (the numeric ID from GA4 Admin settings, not the measurement ID starting with G-). Click Save and confirm the resource shows a Connected status.

Open or create a Retool app and click + to create a new query in the Code panel. Select your Google Analytics 4 resource. The query editor shows GA4-specific fields: Property ID, Date ranges, Dimensions, and Metrics. In the Property ID field, enter your GA4 property ID (e.g., 123456789). Set the Date range to a relative range — select Last 30 days from the preset options, or set a custom date range using Retool's date picker components by referencing {{ dateRangePicker.startDate }} and {{ dateRangePicker.endDate }}. In the Dimensions section, click Add dimension and add date to get a day-by-day breakdown. In the Metrics section, add the metrics you want to track: sessions, activeUsers, newUsers, bounceRate, and conversions are the most common starting points. Click Run to execute the query. GA4 returns a rows array where each row has a dimensionValues array and a metricValues array — the values are positional, matching the order of dimensions and metrics you specified. This nested structure needs to be flattened with a transformer before you can bind it to a Table or Chart component meaningfully.

1// GA4 query transformer — flattens dimensionValues/metricValues into named objects
2// Paste into Advanced → Transform results
3const rows = data.rows || [];
4const dimensionHeaders = data.dimensionHeaders?.map(h => h.name) || [];
5const metricHeaders = data.metricHeaders?.map(h => h.name) || [];
6
7return rows.map(row => {
8  const obj = {};
9  // Map dimension values
10  (row.dimensionValues || []).forEach((val, i) => {
11    obj[dimensionHeaders[i] || `dim_${i}`] = val.value;
12  });
13  // Map metric values
14  (row.metricValues || []).forEach((val, i) => {
15    const key = metricHeaders[i] || `metric_${i}`;
16    // Convert numeric metric strings to numbers
17    obj[key] = isNaN(val.value) ? val.value : parseFloat(val.value);
18  });
19  return obj;
20});

Drag a Chart component from the Component panel onto the canvas. In the Chart's Data source field, set it to {{ getTrafficMetrics.data }} where getTrafficMetrics is the name of your GA4 query. Switch to the Chart configuration panel on the right side. Set Chart type to Line chart. Set the X axis to the date dimension field. Set the Y axis to sessions. The chart should immediately render a line showing daily session counts. To improve readability, configure the date field formatting in the Chart settings — GA4 returns dates in YYYYMMDD format (e.g., 20240315) so you may want to add a date formatting step to your transformer using new Date(dateStr.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3')).toLocaleDateString(). Add a second Y-axis data series for newUsers to show new vs returning traffic on the same chart. To make the chart date-responsive, add a DateRangePicker component to the canvas above the chart. Reference the picker's values in the GA4 query's date range fields using {{ dateRangePicker.value[0] }} and {{ dateRangePicker.value[1] }}. Set the GA4 query to auto-run when triggered and configure it to re-run when the date picker value changes using the query's dependencies or a manual trigger from the date picker's onChange event handler.

1// Enhanced transformer with date formatting and percentage conversion
2const rows = data.rows || [];
3const dimensionHeaders = data.dimensionHeaders?.map(h => h.name) || [];
4const metricHeaders = data.metricHeaders?.map(h => h.name) || [];
5
6return rows.map(row => {
7  const obj = {};
8  (row.dimensionValues || []).forEach((val, i) => {
9    const key = dimensionHeaders[i] || `dim_${i}`;
10    if (key === 'date' && val.value && val.value.length === 8) {
11      // Convert YYYYMMDD to readable date
12      const d = val.value;
13      obj[key] = `${d.slice(0,4)}-${d.slice(4,6)}-${d.slice(6,8)}`;
14    } else {
15      obj[key] = val.value;
16    }
17  });
18  (row.metricValues || []).forEach((val, i) => {
19    const key = metricHeaders[i] || `metric_${i}`;
20    const num = parseFloat(val.value);
21    // Convert bounceRate from decimal to percentage
22    obj[key] = key === 'bounceRate' ? (num * 100).toFixed(1) + '%' : num;
23  });
24  return obj;
25});

Create a second GA4 query for channel breakdown. Use the same resource but change the Dimensions to sessionDefaultChannelGroup (GA4's channel grouping: Organic Search, Direct, Paid Search, etc.) and sessionSource for the specific traffic source. Set Metrics to sessions, activeUsers, and conversions. Remove the date dimension so this query returns aggregated totals per channel for the selected period rather than day-by-day data. Apply the same flattening transformer. Drag a Table component onto the canvas below the chart and bind it to {{ getChannelBreakdown.data }}. Configure column formatting: add a Number format to the sessions column, make the conversions column bold using conditional styling, and add a percentage column calculated as {{ currentRow.conversions / currentRow.sessions * 100 }} to show the conversion rate per channel. Sort the table by sessions descending by default. Add a Text component above the table as a heading: Traffic by Channel. To create the cross-source ROI analysis, add a third query targeting a PostgreSQL or other database Resource that contains revenue data attributed by channel. In a JavaScript query, merge the two datasets using the channel name as the join key and calculate revenue per session for each channel.

1// JavaScript query to join GA4 channel data with revenue database
2// Assumes getChannelBreakdown.data and getRevenueByChannel.data are both available
3const gaData = getChannelBreakdown.data || [];
4const revenueData = getRevenueByChannel.data || [];
5
6// Build a lookup map from the revenue data
7const revenueMap = {};
8revenueData.forEach(row => {
9  revenueMap[row.channel?.toLowerCase()] = row.revenue || 0;
10});
11
12// Join datasets
13return gaData.map(row => {
14  const channel = (row.sessionDefaultChannelGroup || '').toLowerCase();
15  const revenue = revenueMap[channel] || 0;
16  const convRate = row.sessions > 0
17    ? ((row.conversions / row.sessions) * 100).toFixed(2)
18    : '0.00';
19  return {
20    channel: row.sessionDefaultChannelGroup,
21    sessions: row.sessions,
22    conversions: row.conversions,
23    conversion_rate: convRate + '%',
24    revenue: revenue > 0 ? `$${revenue.toLocaleString()}` : '$0',
25    revenue_per_session: row.sessions > 0
26      ? `$${(revenue / row.sessions).toFixed(2)}`
27      : '$0'
28  };
29});

Finalize the executive dashboard by adding interactive controls and configuring access. Add a Select component at the top of the dashboard with options for the GA4 property ID — this allows the same dashboard to serve multiple websites by switching the property. Reference the Select's value in both GA4 queries: {{ propertySelector.value }}. Add Stat components in a row at the top of the dashboard showing period totals for sessions, users, bounce rate, and conversions — use a separate aggregate GA4 query with no dimensions for these totals. Add a Refresh button with an onClick event that triggers all queries simultaneously. Configure query auto-run behavior: set both GA4 queries to re-run when the date range picker or property selector changes by adding those as query dependencies. In Retool's app settings, configure who can access this dashboard — share it with specific groups using Retool's permission system, or generate a public share link for stakeholders who do not have Retool accounts. If you want to embed the dashboard in an internal portal or Notion page, use Retool's embed URL option from the app's Share settings. For teams that need Google Analytics data in scheduled reports or Slack digests, use Retool Workflows with a scheduled trigger to query GA4 daily and send formatted summaries.