feat(EventBuilder): allow screen_view and ad_impression events (#2241)

* remove events from reserved events list

* add stream identifier to event

* add test, cleanup deprecated method use in test file

* fix code formatting

Author: lindsey-volta

src/components/ga4/EventBuilder/ValidateEvent/handlers/formatCheckLib.ts

@@ -5,12 +5,11 @@ import {eventDefinitions} from "../schemas/eventTypes/eventDefinitions"
 import {InstanceId} from "../../types"
 
 const RESERVED_EVENT_NAMES = [
-    "ad_activeview", "ad_click", "ad_exposure", "ad_impression", "ad_query",
+    "ad_activeview", "ad_click", "ad_exposure", "ad_query",
     "adunit_exposure", "app_clear_data", "app_install", "app_update",
     "app_remove", "error", "first_open", "first_visit", "in_app_purchase",
     "notification_dismiss", "notification_foreground", "notification_open",
-    "notification_receive", "os_update", "screen_view", "session_start",
-    "user_engagement"
+    "notification_receive", "os_update", "session_start", "user_engagement"
 ]
 const RESERVED_USER_PROPERTY_NAMES = [
     "first_open_time", "first_visit_time", "last_deep_link_referrer", "user_id",

src/components/ga4/EventBuilder/event.ts

@@ -40,12 +40,14 @@ const eventFor = (
   type: EventType,
   categories: Category[],
   parameters: Parameter[],
-  firstItem?: Parameter[]
+  firstItem?: Parameter[],
+  clients: ("web" | "app")[] = ["web", "app"]
 ) => ({
   type,
   categories,
   parameters,
   items: firstItem === undefined ? undefined : [firstItem],
+  clients,
 })
 
 const custom_event = eventFor(EventType.CustomEvent, [Category.Custom], [], [])
@@ -60,7 +62,9 @@ const ad_impression = eventFor(
       stringParam("ad_unit_name", "Banner_03"),
       stringParam("currency", "USD"),
       numberParam("value", 	3.99),
-    ]
+    ],
+    undefined,
+    ["app"]
 )
 
 const add_payment_info = eventFor(
@@ -306,7 +310,9 @@ const screen_view = eventFor(
     [
       stringParam("screen_class", "MainActivity"),
       stringParam("screen_name", "About"),
-    ]
+    ],
+    undefined,
+    ["app"]
 )
 
 const search = eventFor(
@@ -598,5 +604,11 @@ const events = Object.values(EventType).map(eventType =>
   suggestedEventFor(eventType)
 )
 
-export const eventsForCategory = (category: Category) =>
-  events.filter(event => event.categories.find(c => c === category))
+export const eventsForCategory = (category: Category, useFirebase?: boolean) => {
+  const client = useFirebase ? "app" : "web"
+  return events.filter(
+    (event: any) =>
+      event.categories.find((c: any) => c === category) &&
+      event.clients.includes(client)
+  )
+}

src/components/ga4/EventBuilder/index.spec.tsx

@@ -49,7 +49,7 @@ describe("Event Builder", () => {
         const { wrapped } = withProviders(<Sut />, { isLoggedIn: false })
         const { findByLabelText, findByTestId } = renderer.render(wrapped)
 
-        await renderer.act(async () => {
+        await React.act(async () => {
           // Choose the second view in the list
           const clientToggle = await findByTestId("use firebase")
           clientToggle.click()
@@ -94,7 +94,7 @@ describe("Event Builder", () => {
             exact: false,
           })
 
-          await renderer.act(async () => {
+          await React.act(async () => {
             await userEvent.type(apiSecret, "my_secret", { delay: 1 })
             await userEvent.type(firebaseAppId, "my_firebase_app_id", {
               delay: 1,
@@ -145,7 +145,7 @@ describe("Event Builder", () => {
             wrapped
           )
 
-          await renderer.act(async () => {
+          await React.act(async () => {
             // Choose the second view in the list
             const clientToggle = await findByTestId("use firebase")
             clientToggle.click()
@@ -166,7 +166,7 @@ describe("Event Builder", () => {
             exact: false,
           })
 
-          await renderer.act(async () => {
+          await React.act(async () => {
             await userEvent.type(apiSecret, "my_secret", { delay: 1 })
             await userEvent.type(measurementId, "my_measurement_id", {
               delay: 1,
@@ -187,7 +187,7 @@ describe("Event Builder", () => {
 
             const enInput = within(eventName).getByRole("combobox")
             //eventCategory.focus()
-            renderer.fireEvent.change(enInput, { target: { value: "select_content" } })
+            renderer.fireEvent.change(enInput, { target: { value: "campaign_details" } })
 
             await userEvent.type(
               timestampMicros,
@@ -208,9 +208,28 @@ describe("Event Builder", () => {
           expect(payload).toHaveTextContent(/"user_id":"my_user_id"/)
           expect(payload).toHaveTextContent(/"timestamp_micros":"1234"/)
           expect(payload).toHaveTextContent(/"non_personalized_ads":true/)
-          expect(payload).toHaveTextContent(/"name":"select_content"/)
+          expect(payload).toHaveTextContent(/"name":"campaign_details"/)
         })
       })
     })
   })
+  describe("for firebase switch", () => {
+    test("app only event ad_impression is not available", async () => {
+      const { wrapped } = withProviders(<Sut />, { isLoggedIn: false })
+      const { findByTestId } = renderer.render(wrapped)
+
+      await React.act(async () => {
+        const clientToggle = await findByTestId("use firebase")
+        clientToggle.click()
+      })
+
+      const eventName = await findByTestId(Label.EventName)
+      const enInput = within(eventName).getByRole("combobox")
+      eventName.focus()
+      renderer.fireEvent.change(enInput, { target: { value: "ad" } })
+
+      const adImpression = renderer.screen.queryByText("ad_impression")
+      expect(adImpression).toBeNull()
+    })
+  })
 })

src/components/ga4/EventBuilder/index.tsx

@@ -226,6 +226,11 @@ const EventBuilder: React.FC = () => {
     setNonPersonalizedAds,
   } = useInputs(categories)
 
+  const eventOptions = React.useMemo(
+    () => eventsForCategory(category, useFirebase),
+    [category, useFirebase]
+  )
+
   const formatPayload = React.useCallback( () => {
     try {
       if (inputPayload) {
@@ -274,11 +279,22 @@ const EventBuilder: React.FC = () => {
               data-testid="use firebase"
               checked={useFirebase}
               onChange={e => {
-                setUseFirebase(e.target.checked)
+                const newUseFirebase = e.target.checked
+                setUseFirebase(newUseFirebase)
 
                 if (!e.target.checked) {
                   setUseTextBox(false)
                 }
+
+                // Always reset the event type when the client changes.
+                const newOptions = eventsForCategory(category, newUseFirebase)
+                if (newOptions.length > 0) {
+                  setType(newOptions[0].type)
+                } else {
+                  // If the new client has no events for this category, switch to Custom.
+                  setCategory(Category.Custom)
+                  setType(EventType.CustomEvent)
+                }
               }}
               name="use firebase"
               color="primary"
@@ -446,9 +462,15 @@ const EventBuilder: React.FC = () => {
             value={category}
             onChange={(_event, value) => {
               setCategory(value as Category)
-              const events = eventsForCategory(value as Category)
-              if (events.length > 0) {
-                setType(events[0].type)
+              const newOptions = eventsForCategory(
+                value as Category,
+                useFirebase
+              )
+              if (newOptions.length > 0) {
+                setType(newOptions[0].type)
+              } else {
+                setCategory(Category.Custom)
+                setType(EventType.CustomEvent)
               }
             }}
             renderInput={params => (
@@ -483,7 +505,7 @@ const EventBuilder: React.FC = () => {
               autoComplete
               autoHighlight
               autoSelect
-              options={eventsForCategory(category).map(e => e.type)}
+              options={eventOptions.map(e => e.type)}
               getOptionLabel={eventType => eventType}
               value={type}
               onChange={(_event, value) => {