add google conversions (#48)

* add google conversions

* working update

* small fixes

* small fix 2

* fix ruff format

---------

Co-authored-by: Tom Gotsman <[email protected]>

Author: tgberkeley

reflex_ui/blocks/demo_form.py

@@ -275,6 +275,8 @@ async def on_submit(self, form_data: dict[str, Any]):
         yield is_sending_demo_form.push(True)
         # Send to PostHog and Slack for all submissions
         yield DemoFormStateUI.send_demo_event(form_data)
+        # Send data to Google Ads conversion tracking
+        yield rx.call_script("gtag_report_conversion()")
 
         notes_content = f"""
 Name: {form_data.get("first_name", "")} {form_data.get("last_name", "")}

reflex_ui/blocks/telemetry/__init__.py

@@ -2,7 +2,7 @@
 
 from .clearbit import get_clearbit_trackers
 from .common_room import get_common_room_trackers, identify_common_room_user
-from .google import get_google_analytics_trackers
+from .google import get_google_analytics_trackers, gtag_report_conversion
 from .koala import get_koala_trackers
 from .posthog import get_posthog_trackers
 from .rb2b import get_rb2b_trackers
@@ -14,5 +14,6 @@
     "get_koala_trackers",
     "get_posthog_trackers",
     "get_rb2b_trackers",
+    "gtag_report_conversion",
     "identify_common_room_user",
 ]

reflex_ui/blocks/telemetry/google.py

@@ -34,3 +34,26 @@ def get_google_analytics_trackers(
         rx.script(src=GTAG_SCRIPT_URL_TEMPLATE.format(tracking_id=tracking_id)),
         rx.script(GTAG_SCRIPT_TEMPLATE.format(tracking_id=tracking_id)),
     ]
+
+
+def gtag_report_conversion(conversion_id_and_label: str) -> rx.Component:
+    """Generate a script component to report a conversion to Google Ads.
+
+    Args:
+        conversion_id_and_label: The conversion label for the Google Ads conversion.
+
+    Returns:
+        rx.Component: Script component to report the conversion.
+    """
+    return rx.script(
+        f"""function gtag_report_conversion() {{
+            var callback = function () {{
+                console.log('Conversion recorded!');
+            }};
+            gtag('event', 'conversion', {{
+                'send_to': '{conversion_id_and_label}',
+                'event_callback': callback
+            }});
+            return false;
+        }}"""
+    )