Google Analytics with Webhooks Plugin

1. Google Analytics 4 (GA4) Account: Create a GA4 property and obtain your Measurement ID (format: G-XXXXXXXXXX) from https://analytics.google.com

2. 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

3. Basic understanding of Google Analytics: Familiarity with GA events, tracking, and campaign parameters is helpful

1. Go to https://analytics.google.com

2. Navigate to Admin → Data Streams

3. Select your web data stream

4. Copy your Measurement ID (format: G-XXXXXXXXXX)

1. In your Bubble editor, go to Plugins tab

2. Find “Google Analytics with Webhooks” plugin

3. In the HTML Headers section, replace G-XXXXXXXXXX with your actual Measurement ID

1. In your Bubble app, go to Settings → API tab

2. Check “This app exposes a Workflow API”

3. From the top menu, select API Workflows

4. Create a new API Endpoint and name it exactly analytics (without quotes)

5. Place the Auto Analytics element or use the “Setup Endpoint” action on a page

6. Preview your app in another window

7. In the API Workflow editor, click “Detect Data”

8. Trigger the Setup Endpoint action in the preview window

9. Your endpoint will now be configured to receive the full GA data objects

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": "..."
    }
  }
}

1. Add the Auto Analytics element to your page

2. Set the Measurement ID field to your GA4 ID (e.g., “G-ABC123DEF456”)

3. Enable “Enable POST?” checkbox to send data to your webhook

4. Create a button and add the “Setup Endpoint” action

5. Set Initialize to “yes” on first run

6. Preview your app and click the button to initialize the endpoint

7. Check your API workflow’s detect data to verify the structure

1. Place the Auto Analytics element on your index page

2. Configure with your Measurement ID

3. 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)

4. View tracked events in your database or Google Analytics dashboard

1. Create a workflow for a specific user action (e.g., form submission)

2. Add the “Send an Event” action

3. Configure the parameters:
• Measurement ID: Your GA4 ID
• Event Category: “Form”
• Event Name: “Submission”
• Event Label: “Contact Form”
• Event Action: “submit”

4. The event will be sent to both GA4 and your webhook endpoint

1. Add the Campaign Builder element to your page

2. Create a workflow triggered by a button click

3. 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”

4. Display the Campaign Builder’s “Output URL” state in a text element

5. Use this URL in your marketing materials