feat(EventBuilder): enable sending geographic info (#2230)

* allow screen_view and ad_impression events

* allow geo information fields

* add support for geo fields

* update ip_override description

* revert formatting changes

* revert ad_impression and screen_view changes

* reorder form fields

* simplify implementation

* continue simplify implementation, cleanup files

* add back labels for geo info

* additional file cleanup

* revert changes for useTextBox persistence fix, moreved to separate PR

* add ip_override and user_location to test

* update form field descriptions

* remove commented out code

Author: lindsey-volta

src/components/ga4/EventBuilder/GeographicInformation.tsx

@@ -0,0 +1,138 @@
+import React from "react"
+import Chip from "@mui/material/Chip";
+import Divider from '@mui/material/Divider';
+import { styled } from "@mui/material/styles"
+import Typography from "@mui/material/Typography"
+import TextField from "@mui/material/TextField"
+import Grid from "@mui/material/Grid"
+
+import LinkedTextField from "@/components/LinkedTextField"
+import ExternalLink from "@/components/ExternalLink"
+import { Label } from "./types"
+
+const Root = styled("div")(({ theme }) => ({
+  marginTop: theme.spacing(3),
+}))
+
+interface GeographicInformationProps {
+  user_location_city: string | undefined
+  setUserLocationCity: (value: string) => void
+  user_location_region_id: string | undefined
+  setUserLocationRegionId: (value: string) => void
+  user_location_country_id: string | undefined
+  setUserLocationCountryId: (value: string) => void
+  user_location_subcontinent_id: string | undefined
+  setUserLocationSubcontinentId: (value: string) => void
+  user_location_continent_id: string | undefined
+  setUserLocationContinentId: (value: string) => void
+  ip_override: string | undefined
+  setIpOverride: (value: string) => void
+}
+
+const GeographicInformation: React.FC<GeographicInformationProps> = ({
+  user_location_city,
+  setUserLocationCity,
+  user_location_region_id,
+  setUserLocationRegionId,
+  user_location_country_id,
+  setUserLocationCountryId,
+  user_location_subcontinent_id,
+  setUserLocationSubcontinentId,
+  user_location_continent_id,
+  setUserLocationContinentId,
+  ip_override,
+  setIpOverride,
+}) => {
+  return (
+    <Root>
+      <Divider><Chip label="GEOGRAPHIC INFORMATION" size="small" /></Divider>
+      <Typography variant="h6">User Location</Typography>
+      <Typography>
+        See the{" "}
+        <ExternalLink href="https://developers.google.com/analytics/devguides/collection/protocol/ga4/reference#user_location">
+          documentation
+        </ExternalLink>{" "}
+        for more information about user location attributes.
+      </Typography>
+      <Grid container spacing={1}>
+        <Grid item xs={12} sm={6}>
+          <TextField
+            fullWidth
+            label={Label.City}
+            id={Label.City}
+            variant="outlined"
+            size="small"
+            value={user_location_city || ""}
+            onChange={e => setUserLocationCity(e.target.value)}
+            helperText="The city name, e.g., Mountain View"
+          />
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <TextField
+            fullWidth
+            label={Label.RegionId}
+            id={Label.RegionId}
+            variant="outlined"
+            size="small"
+            value={user_location_region_id || ""}
+            onChange={e => setUserLocationRegionId(e.target.value)}
+            helperText="The country and subdivision, e.g., US-CA"
+          />
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <TextField
+            fullWidth
+            label={Label.CountryId}
+            id={Label.CountryId}
+            variant="outlined"
+            size="small"
+            value={user_location_country_id || ""}
+            onChange={e => setUserLocationCountryId(e.target.value)}
+            helperText="The country code, e.g., US"
+          />
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <TextField
+            fullWidth
+            label={Label.ContinentId}
+            id={Label.ContinentId}
+            variant="outlined"
+            size="small"
+            value={user_location_continent_id || ""}
+            onChange={e => setUserLocationContinentId(e.target.value)}
+            helperText="The continent code, e.g., 019"
+          />
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <TextField
+            fullWidth
+            label={Label.SubcontinentId}
+            id={Label.SubcontinentId}
+            variant="outlined"
+            size="small"
+            value={user_location_subcontinent_id || ""}
+            onChange={e => setUserLocationSubcontinentId(e.target.value)}
+            helperText="The subcontinent code, e.g., 021"
+          />
+        </Grid>
+      </Grid>
+      <Typography variant="h6">IP Override</Typography>
+      <Typography>
+        Provide an IP address to derive the user's geographic location. If
+        both an IP override and user location are provided, user location will
+        be used.
+      </Typography>
+      <LinkedTextField
+        label={Label.IpOverride}
+        id={Label.IpOverride}
+        linkTitle="See ip_override on devsite."
+        href="https://developers.google.com/analytics/devguides/collection/protocol/ga4/reference#ip_override"
+        value={ip_override || ""}
+        onChange={setIpOverride}
+        helperText="The IP address of the user."
+      />
+    </Root>
+  )
+}
+
+export default GeographicInformation

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

@@ -53,6 +53,14 @@ const renderComponent = (props: Partial<ValidateEventProps> = {}) => {
     payloadObj: [],
     api_secret: "secret123",
     clientIds: {},
+    ip_override: "",
+    user_location: {
+      city: "Mountain View",
+      region_id: "CA",
+      country_id: "US",
+      subcontinent_id: "021",
+      continent_id: "019"
+    }
   }
 
   return render(

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

@@ -29,7 +29,8 @@ import PrettyJson from "@/components/PrettyJson"
 import usePayload from "./usePayload"
 import { ValidationMessage } from "../types"
 import Spinner from "@/components/Spinner"
-import { EventCtx, Label } from ".."
+import { EventCtx } from ".."
+import { Label } from "../types"
 import { Box, Card } from "@mui/material"
 import { green, red } from "@mui/material/colors"
 import WithHelpText from "@/components/WithHelpText"

src/components/ga4/EventBuilder/ValidateEvent/schemas/baseContent.spec.ts

@@ -142,4 +142,16 @@ describe("baseContentSchema", () => {
 
         expect(validator.isValid(validInput)).toEqual(false)
     })
+
+    describe("with ip_override", () => {
+      test("is valid with a valid IPv4 address", () => {
+        const validInput = {
+          events: [{ name: "something", params: {} }],
+          ip_override: "127.0.0.1",
+        }
+        const validator = new Validator(baseContentSchema)
+        expect(validator.isValid(validInput)).toEqual(true)
+      })
+    })
+  
 })

src/components/ga4/EventBuilder/ValidateEvent/schemas/baseContent.ts

@@ -2,29 +2,34 @@
 
 import { userPropertiesSchema } from './userProperties'
 import { eventsSchema } from './events'
+import { userLocationSchema } from "./userLocation"
 
 export const baseContentSchema = {
-    "type": "object",
-    "required": ["events"],
-    "additionalProperties": false,
-    "properties": {
-        "app_instance_id": {
-            "type": "string",
-            "format": "app_instance_id"
-        },
-        "client_id": {
-            "type": "string",
-        },
-        "user_id": {
-            "type": "string"
-        },
-        "timestamp_micros": {
-            // "type": "number"
-        },
-        "user_properties": userPropertiesSchema,
-        "non_personalized_ads": {
-            "type": "boolean"
-        },
-        "events": eventsSchema,
-    }
+  type: "object",
+  required: ["events"],
+  additionalProperties: false,
+  properties: {
+    app_instance_id: {
+      type: "string",
+      format: "app_instance_id",
+    },
+    client_id: {
+      type: "string",
+    },
+    user_id: {
+      type: "string",
+    },
+    timestamp_micros: {
+      // "type": "number"
+    },
+    user_properties: userPropertiesSchema,
+    non_personalized_ads: {
+      type: "boolean",
+    },
+    events: eventsSchema,
+    user_location: userLocationSchema,
+    ip_override: {
+      type: "string",
+    },
+  },
 }

src/components/ga4/EventBuilder/ValidateEvent/schemas/userLocation.ts

@@ -0,0 +1,23 @@
+// User location schema
+
+export const userLocationSchema = {
+  type: "object",
+  additionalProperties: false,
+  properties: {
+    city: {
+      type: "string",
+    },
+    region_id: {
+      type: "string",
+    },
+    country_id: {
+      type: "string",
+    },
+    subcontinent_id: {
+      type: "string",
+    },
+    continent_id: {
+      type: "string",
+    },
+  },
+}

src/components/ga4/EventBuilder/ValidateEvent/usePayload.ts

@@ -71,7 +71,9 @@ const usePayload = (): {} => {
     clientIds,
     type,
     useTextBox,
-    payloadObj
+    payloadObj,
+    ip_override,
+    user_location,
   } = useContext(EventCtx)!
 
   const eventName = useMemo(() => {
@@ -93,22 +95,34 @@ const usePayload = (): {} => {
     [items]
   )
 
-  const params = useMemo(() => parameters.reduce(objectify, itemsParameter), [
-    parameters,
-    itemsParameter,
-  ])
+  const params = useMemo(
+    () => parameters.reduce(objectify, itemsParameter),
+    [parameters, itemsParameter]
+  )
 
   const user_properties = useMemo(
     () => userProperties.reduce(objectifyUserProperties, {}),
     [userProperties]
   )
 
+  const user_location_info = useMemo(() => {
+    if (user_location === undefined) {
+      return undefined
+    }
+    const cleaned_location = removeUndefined(user_location)
+    if (Object.keys(cleaned_location).length === 0) {
+      return undefined
+    }
+    return cleaned_location
+  }, [user_location])
+
   let payload = useMemo(() => {
     return {
       ...removeUndefined(clientIds),
       ...removeUndefined({ timestamp_micros }),
       ...removeUndefined({ non_personalized_ads }),
       ...removeUndefined(removeEmptyObject({ user_properties })),
+      ...removeUndefined({ ip_override, user_location: user_location_info }),
       events: [
         { name: eventName, ...(parameters.length > 0 ? { params } : {}) },
       ],
@@ -121,6 +135,8 @@ const usePayload = (): {} => {
     params,
     timestamp_micros,
     user_properties,
+    ip_override,
+    user_location_info,
   ])
 
   if (useTextBox) {

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

@@ -18,7 +18,8 @@ import * as renderer from "@testing-library/react"
 import "@testing-library/jest-dom"
 
 import { withProviders } from "@/test-utils"
-import Sut, { Label } from "./index"
+import Sut from "./index"
+import { Label } from "./types"
 import userEvent from "@testing-library/user-event"
 import { within } from "@testing-library/react"