Google Analytics with Webhooks Plugin

☝
Note: This plugin will work only when Bubble's "Google Analytics" plugin is also installed and the GA tracking code is entered
☝
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).

Google Analytics With Webhooks - Quick Setup Guide

Example POST GA Object:
javascript
{ "pbAnalytics": { "results": [ { ":name": "***", ":trackingId": "***", ":cookieDomain": "***", ":apiVersion": "***", ":clientVersion": "***", ":referrer": "***", ":location": "***", ":screenResolution": "***", ":screenColors": "***", ":viewportSize": "***", ":flashVersion": "***", ":encoding": "***", ":javaEnabled": "***", ":language": "***", ":_gclid": "***", ":_gclsrc": "***", ":_gt": "***", ":_gcn": "***", ":storedClientId": "***", ":clientId": "***", ":_gid": "***", ":adSenseId": "***" } ], "Event": { "Category": "***", "Action": "***", "Label": "***" } } }

First you need to setup your API Endpoint.

  1. In your app, go to the settings tab, then the API tab, Check the "This app exposes a Workflow API".
  1. Now drop down the menu in the top left of the editor (next to the bubble symbol) & click API Workflows.
  1. Create a new API Endpoint & name it 'analytics' without the quotes.
  1. Replicate the setup you see in the below image.​
Image without caption
5. Navigate back to a page, place a button down and setup the "Analytics Action" "Setup Endpoint".
  1. Preview your app so that you have another window open & in the editor go back to the API Workflow and click Detect Data.
  1. Now click the button in the other window and your endpoint will be setup to receive the full GA Data Objects from the plugin.
  1. Remember to setup an action to create a new thing if thats your intended us or use the other Analytics Actions to create events

To have many Input, Div & Button Clicks AutoTracked - Use place the Auto Analytics Element on your page.

Image without caption

There is also a Campaign Builder Element, this will format your custom URL's and parameters for your campaign.

Drop the element on your page then use the Element Action "Get Campaign URL".
Image without caption

Result: (link show formatting - not a real app)

Demo to preview the settings

Added 'Redirect URL for login' state and 'Redirect URL for login is ready' event for better authentication flow