Google Analytics with Webhooks Plugin

Demo to preview the plugin:

Introduction

The Google Analytics with Webhooks plugin provides full control over your Google Analytics tracking by capturing detailed events and statistical data. This plugin compiles the complete GA object and sends it to your Bubble application via webhooks alongside your GA Tracking ID, enabling advanced analytics integration and data management.
The plugin automatically tracks user interactions including buttons, divs, and input fields, capturing event types, values, and states. It supports Google Analytics 4 (GA4) with measurement IDs, allows sending page view events, logging custom events with detailed metadata, creating and managing multiple trackers, and retrieving the complete GA Tracker Object for advanced tracking insights.
Note: This plugin (due to used library restrictions) works only with web applications, and due to that, can't be used to monitor native applications (for example a Bubble application converted through Air Native service).

Introduction

The Google Analytics with Webhooks plugin provides full control over your Google Analytics tracking by capturing detailed events and statistical data. This plugin compiles the complete GA object and sends it to your Bubble application via webhooks alongside your GA Tracking ID, enabling advanced analytics integration and data management.
The plugin automatically tracks user interactions including buttons, divs, and input fields, capturing event types, values, and states. It supports Google Analytics 4 (GA4) with measurement IDs, allows sending page view events, logging custom events with detailed metadata, creating and managing multiple trackers, and retrieving the complete GA Tracker Object for advanced tracking insights.

Prerequisites

To use this plugin effectively, you need:
  1. Google Analytics 4 (GA4) Account: Create a GA4 property and obtain your Measurement ID (format: G-XXXXXXXXXX) from https://analytics.google.com
  1. API Workflow Endpoint: You must set up an API workflow endpoint in your Bubble application named ‘analytics’ to receive the webhook data from the plugin
  1. Basic understanding of Google Analytics: Familiarity with GA events, tracking, and campaign parameters is helpful
Image without caption

How to setup

Setting up the Google Analytics with Webhooks plugin requires configuring both Google Analytics and your Bubble application:

Step 1: Get your Google Analytics 4 Measurement ID

  1. Go to https://analytics.google.com
  1. Navigate to Admin → Data Streams
  1. Select your web data stream
  1. Copy your Measurement ID (format: G-XXXXXXXXXX)

Step 2: Configure the Plugin Header

  1. In your Bubble editor, go to Plugins tab
  1. Find “Google Analytics with Webhooks” plugin
  1. In the HTML Headers section, replace G-XXXXXXXXXX with your actual Measurement ID

Step 3: Setup API Workflow Endpoint

  1. In your Bubble app, go to Settings → API tab
  1. Check “This app exposes a Workflow API”
  1. From the top menu, select API Workflows
  1. Create a new API Endpoint and name it exactly analytics (without quotes)
    1. Image without caption
  1. Place the Auto Analytics element or use the “Setup Endpoint” action on a page
  1. Preview your app in another window
  1. In the API Workflow editor, click “Detect Data”
  1. Trigger the Setup Endpoint action in the preview window
  1. Your endpoint will now be configured to receive the full GA data objects

Step 4: Configure Data Reception

In your API workflow, set up actions to handle the received data: - Create a new thing in your database to store analytics data - Parse the pbAnalytics object which contains tracking results and event information - Use the Event object to capture event_name, event_category, event_action, and event_label

Plugin Element Properties

The plugin contains two visual elements that can be placed on your pages.

Auto Analytics

The Auto Analytics element automatically tracks user interactions across your page, including button clicks, div clicks, and input field focus events. When enabled, it captures detailed information and sends it to both Google Analytics and your webhook endpoint.
Image without caption
Fields:
Title
Description
Type
Measurement ID
The unique identifier of your data stream in Google Analytics 4 (GA4). Format: G-XXXXXXXXXX
Text
Enable POST?
Determines whether tracking data should be sent to your webhook endpoint. When enabled, all tracked events are posted to your analytics API workflow
Boolean

Campaign Builder

The Campaign Builder element helps you create properly formatted URLs with UTM parameters for marketing campaigns. It generates tracking URLs that can be used to measure campaign effectiveness in Google Analytics.
Fields:
This element has no configurable properties. All functionality is accessed through element actions.

Element Actions

1. Setup Endpoint

This action configures the POST request by sending all current page’s GA data to your API endpoint. It initializes the data structure and validates that your endpoint is ready to receive analytics data.
Image without caption
Title
Description
Type
Initialize
Set to “true” for the first initialization of the data structure in your endpoint API. This sends setup configuration data including page location, title, referrer, screen resolution, viewport size, language, browser info, and a snapshot of the dataLayer
Boolean

2. Create Tracker

Creates a new Google Analytics tracker with the specified Measurement ID. This action initializes GA4 tracking and sends comprehensive tracking data to your webhook endpoint.
Image without caption
Title
Description
Type
Measurement ID
The unique identifier of your data stream in Google Analytics 4 (GA4). Must start with “G-” followed by your tracking ID
Text

3. Get Current Tracker

Retrieves and sends the complete tracker data from the current page, including measurement ID, client ID, GA4 cookies, page information, screen details, and the last 10 dataLayer entries.
Fields:
Title
Description
Type
Info
Informational label indicating that the GA Object will be POSTed to your endpoint
Label

4. Create Page View

Sends a page view event to Google Analytics and your webhook endpoint. This tracks when users view pages in your application.
Image without caption
Title
Description
Type
Measurement ID
The unique identifier of your data stream in Google Analytics 4 (GA4). Must start with “G-”
Text

5. Send an Event

Sends a custom event to Google Analytics with detailed parameters including category, name, label, and action. This allows tracking of specific user interactions and behaviors.
Image without caption
Title
Description
Type
Measurement ID
The unique identifier of your data stream in Google Analytics 4 (GA4)
Text
Event Category
Custom event category (e.g., “Video”, “Button”, “Form”)
Text
Event Name
Custom event name (e.g., “Custom event”, “User Registration”)
Text
Event Label
Custom event label providing additional context (e.g., “cats.mp4”, “Submit Button”)
Text
Event Action
Custom event action describing what happened (e.g., “play”, “click”, “submit”)
Text

6. Get Campaign URL (Campaign Builder Element)

Generates a formatted URL with UTM campaign parameters for tracking marketing campaigns in Google Analytics.
Image without caption
Title
Description
Type
URL
The base URL for your campaign (e.g., “https://myapp.bubbleapps.io”)
Text
Campaign Source
Identifies which site sent the traffic (e.g., “myCampaign”, “google”, “newsletter”)
Text
Campaign Medium
The marketing medium (e.g., “cpc”, “banner”, “email”)
Text
Campaign Name
The name of your campaign (e.g., “spring_sale”, “product_launch”)
Text
Campaign Keywords
Keywords for paid search campaigns (e.g., “bubble plugins discounts”)
Text
Campaign Unique ID
A unique identifier for differentiating similar content or links (e.g., “my_spring_sale”)
Text

7. Clear Output (Campaign Builder Element)

Clears the generated campaign URL from the Campaign Builder element’s output state.
This action has no parameters.

Exposed states

Auto Analytics States

This element does not expose any states.

Campaign Builder States

Name
Description
Type
Output URL
The generated URL with all UTM parameters encoded and appended. This URL can be used directly for campaign tracking
Text

Element Events

Auto Analytics Events

This element does not trigger any custom events. All tracking happens automatically in the background.

Campaign Builder Events

This element does not trigger any custom events.

Plugin Data/Action Calls (API Calls only)

This plugin does not contain server-side API calls. All functionality is client-side JavaScript that communicates with Google Analytics and your Bubble API workflow endpoint.
The plugin sends data to your custom API workflow endpoint (named ‘analytics’) with the following structure:
POST Data Structure:
json
{ "pbAnalytics": { "results": [{ "measurement_id": "G-XXXXXXXXXX", "page_location": "https://...", "page_title": "...", "event_category": "...", "event_action": "...", "event_label": "...", "screen_resolution": "1920x1080", "viewport_size": "1366x768", "language": "en-US", "user_agent": "...", "timestamp": "2025-01-15T10:30:00.000Z" }], "Event": { "event_name": "...", "event_category": "...", "event_action": "...", "event_label": "..." } } }

Workflow example

Here are some practical workflow examples to help you get started with the Google Analytics with Webhooks plugin:

Workflow 1: Initial Setup and Configuration

  1. Add the Auto Analytics element to your page
  1. Set the Measurement ID field to your GA4 ID (e.g., “G-ABC123DEF456”)
  1. Enable “Enable POST?” checkbox to send data to your webhook
  1. Create a button and add the “Setup Endpoint” action
  1. Set Initialize to “yes” on first run
  1. Preview your app and click the button to initialize the endpoint
  1. Check your API workflow’s detect data to verify the structure

Workflow 2: Automatic User Interaction Tracking

  1. Place the Auto Analytics element on your index page
  1. Configure with your Measurement ID
  1. The element will automatically track:
      • All button clicks (captures button text)
      • All div clicks (captures class and ID)
      • All input focus events (captures input type and name)
  1. View tracked events in your database or Google Analytics dashboard

Workflow 3: Custom Event Tracking

  1. Create a workflow for a specific user action (e.g., form submission)
  1. Add the “Send an Event” action
  1. Configure the parameters:
      • Measurement ID: Your GA4 ID
      • Event Category: “Form”
      • Event Name: “Submission”
      • Event Label: “Contact Form”
      • Event Action: “submit”
  1. The event will be sent to both GA4 and your webhook endpoint

Workflow 4: Campaign URL Generation

  1. Add the Campaign Builder element to your page
  1. Create a workflow triggered by a button click
  1. Add the “Get Campaign URL” action with parameters:
      • URL: Your landing page URL
      • Campaign Source: “facebook”
      • Campaign Medium: “social”
      • Campaign Name: “summer_sale”
      • Campaign Keywords: “discount promo”
      • Campaign Unique ID: “fb_ad_001”
  1. Display the Campaign Builder’s “Output URL” state in a text element
  1. Use this URL in your marketing materials
Image without caption

Changelogs