Google Analytics

The Measurement Protocol uses a dedicated api_secret credential that is separate from any OAuth token. It is a low-privilege key tied to a specific GA4 data stream — it can only send events to that stream, it cannot read any data. To create one, go to your GA4 property → Admin (gear icon at the bottom-left) → Data Streams → click your web stream → scroll down to 'Measurement Protocol API secrets' → click Create. Name the secret (for example, 'Bubble App') and copy the generated Secret Value. While you are here, also copy two other values you will need: - The Measurement ID: shown at the top of the stream detail page, format G-XXXXXXXXXX. This goes in the API Connector as a query parameter, NOT as an auth credential. - The Property ID: a numeric ID shown in GA4 Admin → Property Settings. You will need this for the Data API in the read path (it is different from the Measurement ID). Important distinction to bookmark: the Measurement ID (G-XXXX) goes into the browser gtag.js snippet for client-side tracking. It does NOT authenticate Measurement Protocol requests. The api_secret is what authenticates Measurement Protocol calls. Confusing these two is the most common setup mistake.

1{
2  "ga4_values_needed": {
3    "measurement_id": "G-XXXXXXXXXX (from Data Streams → stream detail page)",
4    "api_secret": "[from Measurement Protocol API secrets — copy the Secret Value]",
5    "property_id": "123456789 (numeric, from Admin → Property Settings → Property ID)"
6  },
7  "note": "Measurement ID is NOT used to authenticate API calls — it only identifies which stream events are sent to. The api_secret authenticates the Measurement Protocol POST."
8}

Open your Bubble app's Plugins tab → click on API Connector → click 'Add another API'. Name this group 'Google Analytics Events'. Add a shared header: you can leave this group without shared headers since the credentials go in the URL query string. Click 'Add another call'. Name it 'Send GA4 Event'. Set the method to POST. Set the endpoint to: https://www.google-analytics.com/mp/collect?measurement_id=G-XXXXXXXXXX&api_secret=YOUR_SECRET In the API Connector URL field, you can either hardcode the measurement_id and api_secret directly into the URL, or add them as individual URL parameters. If you add api_secret as a URL parameter in the API Connector's parameter section, check the 'Private' checkbox — this prevents Bubble from logging the value in the API Connector response panel and in the Logs tab. Set the Content-Type to application/json. In the Body section, set the body type to JSON and enter the event body. At minimum, every Measurement Protocol event requires a client_id (a user identifier — in a Bubble app, use the Current User's unique ID or email as a pseudo client_id, formatted as a string) and an events array with at least one event object. Click 'Initialize call' with a real client_id value. Bubble will POST to GA4. GA4 always returns HTTP 200 even for malformed events — do NOT judge success by the API response code. Instead, open GA4 → Admin → DebugView → select your device/app and confirm the test event appears within 1-2 seconds. Set 'Use as' to 'Action'. The call is now available in your Bubble Workflows.

1{
2  "method": "POST",
3  "url": "https://www.google-analytics.com/mp/collect",
4  "query_params": [
5    { "key": "measurement_id", "value": "G-XXXXXXXXXX", "private": false },
6    { "key": "api_secret", "value": "<your_api_secret>", "private": true }
7  ],
8  "headers": [
9    { "key": "Content-Type", "value": "application/json" }
10  ],
11  "body": {
12    "client_id": "{{client_id}}",
13    "events": [
14      {
15        "name": "{{event_name}}",
16        "params": {
17          "currency": "{{currency}}",
18          "value": "{{order_value}}",
19          "transaction_id": "{{transaction_id}}"
20        }
21      }
22    ]
23  },
24  "use_as": "Action"
25}

Now that the API Connector call is configured, you can trigger it from any Bubble Workflow. The most common trigger points are: - User signup: Workflow event → 'When user signs up' → action: 'Plugins → Google Analytics Events - Send GA4 Event' with event_name = 'sign_up' and client_id = 'Current User's unique ID'. - Button click: Workflow event → 'When Button [Submit Order] is clicked' → action: Send GA4 Event with event_name = 'purchase' and value parameters from the order form. - Page load: Workflow event → 'When page is loaded' → action: Send GA4 Event with event_name = 'page_view' and a page_location parameter. For client_id, use the Current User's unique ID (a UUID assigned by Bubble). This gives you user-level attribution in GA4. For anonymous users (not logged in), generate a random UUID and store it in a Bubble local storage cookie or custom state — or use the Current User's anonymous ID if your Bubble app allows anonymous users. To track all page loads across your app, create a reusable element that fires the page_view event and include it on every page. This is Bubble's equivalent of placing the gtag.js snippet in the HTML head. After setting up your first event Workflow, go to GA4 → Admin → DebugView and trigger the action in your Bubble preview. You should see the event appear in DebugView within seconds. Remember: standard GA4 reports have a 24–48 hour lag, but DebugView is near real-time and is the right place to verify your setup.

1// Example Workflow: When user signs up
2// Event: User is signed up
3// Action 1: Create a new User record (standard Bubble signup)
4// Action 2: Plugins → Google Analytics Events - Send GA4 Event
5//   client_id = Current User's unique ID
6//   event_name = sign_up
7//   (no other params needed for sign_up event)
8
9// Example Workflow: Purchase completed
10// Event: Button 'Complete Order' is clicked
11// Action 2: Plugins → Google Analytics Events - Send GA4 Event
12//   client_id = Current User's unique ID
13//   event_name = purchase
14//   currency = USD
15//   value = Input 'Order Total's value
16//   transaction_id = Current Order's unique ID

Reading GA4 report data requires server-to-server authentication with a Google service account. This is a more involved setup than the Measurement Protocol send path. Step 1: Create a Google Cloud project (or use an existing one). Go to console.cloud.google.com → APIs & Services → Library → search 'Google Analytics Data API' → Enable it. Step 2: Go to APIs & Services → Credentials → Create Credentials → Service Account. Name it 'Bubble GA4 Reader', skip the optional role assignment, and click Done. Click on the new service account → Keys tab → Add Key → JSON → Create. A JSON key file downloads automatically. This file contains the private key you would need for JWT signing — but you will NOT use this file directly in Bubble (because Bubble cannot sign RSA JWTs). Instead, extract only the client_email from the JSON file — you will need it in the next step. Step 3: Grant the service account access to your GA4 property. Go to GA4 → Admin → Account Access Management (or Property Access Management for property-level access) → click the + button → add the service account's client_email → set role to Viewer → click Add. Step 4: Generate a refresh_token via the OAuth Playground. Go to https://developers.google.com/oauthplayground. In Settings (gear icon), check 'Use your own OAuth credentials' and enter a Google Cloud OAuth 2.0 client ID and secret (create these in your Google Cloud project under APIs & Services → Credentials → OAuth 2.0 Client IDs → Web application, add the OAuth Playground URL as an authorized redirect URI). In the scope selection, find 'Google Analytics Data API v1' and select 'https://www.googleapis.com/auth/analytics.readonly'. Click Authorize → sign in with a Google account that has Viewer access to the GA4 property → Exchange authorization code for tokens. Copy the refresh_token from the response — this is a long-lived credential you will store in Bubble.

1{
2  "google_cloud_setup": {
3    "step1": "Enable 'Google Analytics Data API' in Google Cloud Console → APIs & Services → Library",
4    "step2": "Create a Service Account → download JSON key file → copy client_email",
5    "step3": "GA4 → Admin → Property Access Management → add service_account_email → Viewer role",
6    "step4": "OAuth Playground: scope = analytics.readonly → get refresh_token"
7  },
8  "credentials_to_store_in_bubble": {
9    "client_id": "from your OAuth 2.0 Client ID",
10    "client_secret": "from your OAuth 2.0 Client Secret [Private]",
11    "refresh_token": "from OAuth Playground [Private]",
12    "property_id": "numeric GA4 Property ID (not the G-XXXX Measurement ID)"
13  }
14}

In the API Connector, create a new API group called 'Google OAuth Token'. Add one call: Call name: 'Refresh Access Token'. Method: POST. URL: https://oauth2.googleapis.com/token. Body type: Form data. Body parameters: - client_id: your Google Cloud client ID (Private: unchecked — it is a public identifier) - client_secret: your client secret (Private: CHECKED) - refresh_token: your refresh_token from the OAuth Playground (Private: CHECKED) - grant_type: refresh_token (Private: unchecked — this is a fixed value) Set 'Use as' to Action. Click 'Initialize call' — you need a real successful response (access_token in the JSON) for Bubble to detect the response shape. If you get an error, double-check that the client_id, client_secret, and refresh_token are correct and that the Google Analytics Data API is enabled in your Google Cloud project. Next, create a second API group called 'GA4 Data API'. Base URL: https://analyticsdata.googleapis.com/v1beta. Add a shared header: Authorization: Bearer [leave empty — will be populated dynamically], Private: CHECKED. Add one call named 'Run Report'. Method: POST. Endpoint: /properties/{{property_id}}:runReport. Body type: JSON. Body: { "dateRanges": [{"startDate": "{{start_date}}", "endDate": "{{end_date}}"}], "dimensions": [{"name": "{{dimension}}"}], "metrics": [{"name": "sessions"}, {"name": "screenPageViews"}], "limit": 100 } Set 'Use as' to Action. Initialize with a real access_token in the Authorization header and real property_id, dates, and dimension values. If you see 'There was an issue setting up your call', verify that the service account has been granted Viewer access to the GA4 property and that you are using the numeric property_id (not the Measurement ID). Note: GA4 Data API data has a 24–48 hour processing lag. Queries for 'today' or 'yesterday' will often return incomplete or zero rows — use date ranges starting at least 3 days ago for accurate results.

1{
2  "token_call": {
3    "method": "POST",
4    "url": "https://oauth2.googleapis.com/token",
5    "body_type": "form_data",
6    "params": {
7      "client_id": "{{client_id}}",
8      "client_secret": "<private>",
9      "refresh_token": "<private>",
10      "grant_type": "refresh_token"
11    },
12    "use_as": "Action"
13  },
14  "data_api_call": {
15    "method": "POST",
16    "url": "https://analyticsdata.googleapis.com/v1beta/properties/{{property_id}}:runReport",
17    "headers": {
18      "Authorization": "Bearer <dynamic_from_workflow>"
19    },
20    "body": {
21      "dateRanges": [{"startDate": "30daysAgo", "endDate": "3daysAgo"}],
22      "dimensions": [{"name": "pagePath"}],
23      "metrics": [{"name": "sessions"}, {"name": "screenPageViews"}],
24      "limit": 100
25    },
26    "use_as": "Action"
27  }
28}

Create a page in Bubble with a Repeating Group to display the GA4 data. Set the Repeating Group's Type of content to 'GA4 Row' (a new data type you will create with fields: dimension_value text, sessions number, page_views number). Alternatively, use a Custom State to hold the list of results without writing to the database. Create a Workflow event: 'When page is loaded' → add actions: Action 1: 'Plugins → Google OAuth Token - Refresh Access Token'. This runs the token exchange call and returns an access_token. Action 2: 'Plugins → GA4 Data API - Run Report'. In the Authorization dynamic field, enter 'Bearer ' + 'Result of Step 1's access_token'. Set property_id to your numeric GA4 Property ID. Set start_date to '30daysAgo' and end_date to '3daysAgo'. Set dimension to 'pagePath'. Action 3: 'Make changes to a list of Things' (or set a Custom State). Parse the rows from 'Result of Step 2's rows'. Each row has a dimensionValues array and a metricValues array — in Bubble, reference them as 'Result of Step 2's rows each item's dimensionValues first item's value' for the page path, and similarly for metric values. Bind the Repeating Group's data source to the Custom State list or the database search. Caching recommendation: data in GA4 changes slowly (24–48 hour lag). Cache the query result in the Bubble database with a fetched_at timestamp. On page load, check if fetched_at is older than 12 hours before making a new API call — this reduces WU costs and avoids hitting the GA4 Data API rate limits on busy Bubble apps. Add privacy rules to the GA4 data type so only users with the correct role can access cached report data.

1// Workflow: When page is loaded
2//
3// Step 1: Plugins → Google OAuth Token - Refresh Access Token
4//   Result → access_token (short-lived, ~1 hour)
5//
6// Step 2: Plugins → GA4 Data API - Run Report
7//   Authorization = "Bearer " + Step 1's access_token
8//   property_id = 123456789 (your numeric property ID)
9//   start_date = 30daysAgo
10//   end_date = 3daysAgo
11//   dimension = pagePath
12//
13// Step 3: Set Custom State 'ga4_rows' = Step 2's rows
14//
15// Repeating Group data source: Custom State ga4_rows
16// Cell bindings:
17//   Text 'Page': Current cell's dimensionValues first item's value
18//   Text 'Sessions': Current cell's metricValues first item's value
19//   Text 'Page Views': Current cell's metricValues second item's value
20
21// Add privacy rule to GA4 Row data type:
22// Data tab → Privacy → GA4 Row → 'When Current User's role is Admin'