ENG-9611: defer tracking/analytics scripts so they don't block render

packages/reflex-components-internal/src/reflex_components_internal/blocks/telemetry/clearbit.py

@@ -19,4 +19,5 @@ def get_clearbit_trackers(public_key: str) -> rx.Component:
     return rx.el.script(
         src=CLEARBIT_SCRIPT_URL_TEMPLATE.format(public_key=public_key),
         referrer_policy="strict-origin-when-cross-origin",
+        async_=True,
     )

packages/reflex-components-internal/src/reflex_components_internal/blocks/telemetry/common_room.py

@@ -43,7 +43,9 @@ def get_common_room_trackers(site_id: str) -> rx.Component:
     """
     cdn_url = COMMON_ROOM_CDN_URL_TEMPLATE.format(site_id=site_id)
 
-    return rx.script(COMMON_ROOM_SCRIPT_TEMPLATE.format(cdn_url=cdn_url))
+    return rx.el.script(
+        COMMON_ROOM_SCRIPT_TEMPLATE.format(cdn_url=cdn_url), type="module"
+    )
 
 
 def identify_common_room_user(

packages/reflex-components-internal/src/reflex_components_internal/blocks/telemetry/default.py

@@ -13,4 +13,4 @@ def get_default_telemetry_script() -> rx.Component:
     Returns:
         The component.
     """
-    return rx.el.script(DEFAULT_TELEMETRY_SCRIPT)
+    return rx.el.script(DEFAULT_TELEMETRY_SCRIPT, type="module")

packages/reflex-components-internal/src/reflex_components_internal/blocks/telemetry/google.py

@@ -5,11 +5,11 @@
 # Google Tag Manager script template
 GTAG_SCRIPT_TEMPLATE: str = """
 window.dataLayer = window.dataLayer || [];
-function gtag() {{
+window.gtag = window.gtag || function gtag() {{
     window.dataLayer.push(arguments);
-}}
-gtag('js', new Date());
-gtag('config', '{tracking_id}');
+}};
+window.gtag('js', new Date());
+window.gtag('config', '{tracking_id}');
 """
 
 # Google Tag Manager script URL template
@@ -31,8 +31,13 @@ def get_google_analytics_trackers(
     """
     # Load Google Tag Manager script
     return [
-        rx.script(src=GTAG_SCRIPT_URL_TEMPLATE.format(tracking_id=tracking_id)),
-        rx.script(GTAG_SCRIPT_TEMPLATE.format(tracking_id=tracking_id)),
+        rx.el.script(
+            src=GTAG_SCRIPT_URL_TEMPLATE.format(tracking_id=tracking_id),
+            async_=True,
+        ),
+        rx.el.script(
+            GTAG_SCRIPT_TEMPLATE.format(tracking_id=tracking_id), type="module"
+        ),
     ]
 
 
@@ -45,7 +50,7 @@ def gtag_report_conversion(conversion_id_and_label: str) -> rx.Component:
     Returns:
         rx.Component: Script component to report the conversion.
     """
-    return rx.script(
+    return rx.el.script(
         f"""function gtag_report_conversion() {{
             var callback = function () {{
                 console.log('Conversion recorded!');

packages/reflex-components-internal/src/reflex_components_internal/blocks/telemetry/koala.py

@@ -43,4 +43,6 @@ def get_koala_trackers(public_api_key: str) -> rx.Component:
     """
     script_url = KOALA_SCRIPT_URL_TEMPLATE.format(public_api_key=public_api_key)
 
-    return rx.script(KOALA_SCRIPT_TEMPLATE.format(script_url=script_url))
+    return rx.el.script(
+        KOALA_SCRIPT_TEMPLATE.format(script_url=script_url), type="module"
+    )

packages/reflex-components-internal/src/reflex_components_internal/blocks/telemetry/posthog.py

@@ -130,10 +130,11 @@ def get_posthog_trackers(
     Returns:
         rx.Component: Script component needed for PostHog tracking
     """
-    return rx.script(
+    return rx.el.script(
         POSTHOG_SCRIPT_TEMPLATE.format(
             project_id=project_id,
             api_host=api_host,
             ui_host=ui_host,
-        )
+        ),
+        type="module",
     )

packages/reflex-components-internal/src/reflex_components_internal/blocks/telemetry/rb2b.py

@@ -25,6 +25,6 @@ def get_rb2b_trackers() -> list[rx.Component]:
         list[rx.Component]: Both PIXEL_SCRIPT_RB2B and PIXEL2 script components
     """
     return [
-        rx.script(PIXEL_SCRIPT_RB2B),
-        rx.script(PIXEL2),
+        rx.el.script(PIXEL_SCRIPT_RB2B, type="module"),
+        rx.el.script(PIXEL2, type="module"),
     ]

packages/reflex-components-internal/src/reflex_components_internal/blocks/telemetry/unify.py

@@ -12,4 +12,4 @@ def get_unify_trackers() -> rx.Component:
     Returns:
         rx.Component: The PIXEL_SCRIPT_UNIFY script component
     """
-    return rx.script(PIXEL_SCRIPT_UNIFY)
+    return rx.el.script(PIXEL_SCRIPT_UNIFY, type="module")