Add posthog recordings and events (#6310)

Author: carlosabadia

packages/reflex-ui-shared/src/reflex_ui_shared/telemetry/pixels.py

@@ -3,6 +3,7 @@
 from reflex_ui.blocks.telemetry import (
     get_default_telemetry_script,
     get_google_analytics_trackers,
+    get_posthog_trackers,
     get_unify_trackers,
     gtag_report_conversion,
 )
@@ -23,4 +24,7 @@ def get_pixel_website_trackers() -> list[rx.Component]:
         ),
         get_unify_trackers(),
         get_default_telemetry_script(),
+        get_posthog_trackers(
+            project_id="phc_JoMo0fOyi0GQAooY3UyO9k0hebGkMyFJrrCw1Gt5SGb"
+        ),
     ]

packages/reflex-ui/src/reflex_ui/blocks/demo_form.py

@@ -5,10 +5,13 @@
 based on company size.
 """
 
+from typing import Any
+
 import reflex as rx
 from reflex.event import EventType
 from reflex.experimental.client_state import ClientStateVar
 from reflex.vars.base import get_unique_variable_name
+from reflex_ui.blocks.telemetry.posthog import track_demo_form_posthog_submission
 from reflex_ui.components.base.button import button
 from reflex_ui.components.base.dialog import dialog
 from reflex_ui.components.base.input import input
@@ -102,6 +105,15 @@ def validate_email(self, email: str):
         else:
             yield demo_form_error_message.push("")
 
+    @rx.event
+    def track_demo_form_posthog(self, form_data: dict[str, Any]):
+        """Send demo form fields to PostHog (identify + capture) in the browser.
+
+        Returns:
+            Event that runs PostHog identify and capture in the browser.
+        """
+        return track_demo_form_posthog_submission(form_data)
+
 
 def input_field(
     label: str,
@@ -344,8 +356,10 @@ def demo_form(id_prefix: str = "", **props) -> rx.Component:
             "@container flex flex-col lg:gap-6 gap-2 p-6",
             props.pop("class_name", ""),
         ),
-        # Close the dialog when the form is submitted
-        on_submit=demo_form_open_cs.set_value(False),
+        on_submit=[
+            DemoFormStateUI.track_demo_form_posthog,
+            rx.call_function(demo_form_open_cs.set_value(False)),
+        ],
         data_default_form_id="965991",
         **props,
     )

packages/reflex-ui/src/reflex_ui/blocks/intro_form.py

@@ -6,9 +6,10 @@
 from typing import Any
 
 import reflex as rx
-from reflex.event import EventType
+from reflex.event import EventType, IndividualEventType
 from reflex.experimental.client_state import ClientStateVar
 from reflex.vars.base import get_unique_variable_name
+from reflex_ui.blocks.telemetry.posthog import track_intro_form_posthog_submission
 from reflex_ui.components.base.button import button
 from reflex_ui.components.base.dialog import dialog
 from reflex_ui.components.base.input import input
@@ -103,6 +104,15 @@ def validate_email(self, email: str):
         else:
             yield intro_form_error_message.push("")
 
+    @rx.event
+    def track_intro_form_posthog(self, form_data: dict[str, Any]):
+        """Send intro form fields to PostHog (identify + capture) in the browser.
+
+        Returns:
+            Event that runs PostHog identify and capture in the browser.
+        """
+        return track_intro_form_posthog_submission(form_data)
+
 
 def input_field(
     label: str,
@@ -258,7 +268,7 @@ def select_field(
 
 def intro_form(
     id_prefix: str = "",
-    on_submit: EventType[dict[str, Any]] | EventType[()] | None = None,
+    on_submit: EventType[dict[str, Any]] | None = None,
     **props,
 ) -> rx.Component:
     """Create and return the intro form component.
@@ -278,6 +288,11 @@ def intro_form(
     """
     prefix = id_prefix or get_unique_variable_name()
     email_id = f"{prefix}_user_email"
+
+    extra: list[IndividualEventType[dict[str, Any]]] = (
+        on_submit if isinstance(on_submit, list) else [on_submit] if on_submit else []
+    )
+
     form = rx.el.form(
         rx.el.div(
             input_field("First name", "John", "first_name", "text", True),
@@ -357,7 +372,7 @@ def intro_form(
             "@container flex flex-col lg:gap-6 gap-2 p-6",
             props.pop("class_name", ""),
         ),
-        on_submit=on_submit,
+        on_submit=[IntroFormStateUI.track_intro_form_posthog, *extra],
         **props,
     )
     return rx.fragment(
@@ -368,7 +383,7 @@ def intro_form(
 def intro_form_dialog(
     trigger: rx.Component | None = None,
     id_prefix: str = "",
-    on_submit: EventType[dict[str, Any]] | EventType[()] | None = None,
+    on_submit: EventType[dict[str, Any]] | None = None,
     **props,
 ) -> rx.Component:
     """Return a intro form dialog container element.

packages/reflex-ui/src/reflex_ui/blocks/telemetry/posthog.py

@@ -1,6 +1,7 @@
 """PostHog analytics tracking integration for Reflex applications."""
 
 import json
+from typing import Any
 
 import reflex as rx
 
@@ -60,6 +61,77 @@ def identify_posthog_user(user_id: str) -> rx.event.EventSpec:
     )
 
 
+def _track_form_posthog(
+    event_name: str,
+    form_data: dict[str, Any],
+    allowed_keys: set[str],
+) -> rx.event.EventSpec:
+    """Identify the submitter and capture a form event in PostHog.
+
+    Args:
+        event_name: PostHog event name to capture.
+        form_data: Submitted form fields as a string-keyed dict.
+        allowed_keys: Set of keys to include from form_data.
+
+    Returns:
+        Event that runs PostHog identify and capture in the browser.
+    """
+    filtered = {k: v for k, v in form_data.items() if k in allowed_keys}
+    props_json = json.dumps(filtered)
+
+    return rx.call_script(
+        f"""
+        if (typeof posthog !== 'undefined') {{
+            const props = {props_json};
+            const distinctId = props.email || ('anon_' + String(Date.now()));
+            posthog.identify(distinctId, {{
+                email: props.email,
+                first_name: props.first_name,
+                last_name: props.last_name,
+                job_title: props.job_title,
+                company_name: props.company_name,
+            }});
+            posthog.capture('{event_name}', props);
+        }}
+        """
+    )
+
+
+_COMMON_KEYS = {
+    "email",
+    "first_name",
+    "last_name",
+    "job_title",
+    "company_name",
+    "number_of_employees",
+    "how_did_you_hear_about_us",
+    "internal_tools",
+    "technical_level",
+}
+
+
+def track_demo_form_posthog_submission(form_data: dict[str, Any]) -> rx.event.EventSpec:
+    """Capture a demo_request event in PostHog.
+
+    Returns:
+        Event that runs PostHog identify and capture in the browser.
+    """
+    return _track_form_posthog("demo_request", form_data, _COMMON_KEYS)
+
+
+def track_intro_form_posthog_submission(
+    form_data: dict[str, Any],
+) -> rx.event.EventSpec:
+    """Capture an intro_submit event in PostHog.
+
+    Returns:
+        Event that runs PostHog identify and capture in the browser.
+    """
+    return _track_form_posthog(
+        "intro_submit", form_data, _COMMON_KEYS | {"phone_number"}
+    )
+
+
 def get_posthog_trackers(
     project_id: str,
     api_host: str = POSTHOG_API_HOST,