add stream identifier to event

Author: lindsey-volta

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

@@ -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,7 +208,7 @@ 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"/)
         })
       })
     })

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) {
@@ -273,12 +278,23 @@ const EventBuilder: React.FC = () => {
             <Switch
               data-testid="use firebase"
               checked={useFirebase}
-              onChange={e => {
-                setUseFirebase(e.target.checked)
+                            onChange={e => {
+                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) => {