1+ import React , { useContext } from "react"
2+ import Chip from "@mui/material/Chip"
3+ import Divider from "@mui/material/Divider"
4+ import { styled } from "@mui/material/styles"
5+ import Typography from "@mui/material/Typography"
6+ import TextField from "@mui/material/TextField"
7+ import Grid from "@mui/material/Grid"
8+
9+ import ExternalLink from "@/components/ExternalLink"
10+ import { Label } from "./types"
11+ import { UseFirebaseCtx } from "."
12+
13+ const Root = styled ( "div" ) ( ( { theme } ) => ( {
14+ marginTop : theme . spacing ( 1 ) ,
15+ } ) )
16+
17+ type DeviceInformationProps = {
18+ device_category : string | undefined
19+ setDeviceCategory : ( value : string ) => void
20+ device_language : string | undefined
21+ setDeviceLanguage : ( value : string ) => void
22+ device_screen_resolution : string | undefined
23+ setDeviceScreenResolution : ( value : string ) => void
24+ device_operating_system : string | undefined
25+ setDeviceOperatingSystem : ( value : string ) => void
26+ device_operating_system_version : string | undefined
27+ setDeviceOperatingSystemVersion : ( value : string ) => void
28+ device_model : string | undefined
29+ setDeviceModel : ( value : string ) => void
30+ device_brand : string | undefined
31+ setDeviceBrand : ( value : string ) => void
32+ device_browser : string | undefined
33+ setDeviceBrowser : ( value : string ) => void
34+ device_browser_version : string | undefined
35+ setDeviceBrowserVersion : ( value : string ) => void
36+ user_agent : string | undefined
37+ setUserAgent : ( value : string ) => void
38+ }
39+
40+ const DeviceInformation : React . FC < DeviceInformationProps > = ( {
41+ device_category,
42+ setDeviceCategory,
43+ device_language,
44+ setDeviceLanguage,
45+ device_screen_resolution,
46+ setDeviceScreenResolution,
47+ device_operating_system,
48+ setDeviceOperatingSystem,
49+ device_operating_system_version,
50+ setDeviceOperatingSystemVersion,
51+ device_model,
52+ setDeviceModel,
53+ device_brand,
54+ setDeviceBrand,
55+ device_browser,
56+ setDeviceBrowser,
57+ device_browser_version,
58+ setDeviceBrowserVersion,
59+ user_agent,
60+ setUserAgent,
61+ } ) => {
62+ const useFirebase = useContext ( UseFirebaseCtx )
63+ const docHref =
64+ "https://developers.google.com/analytics/devguides/collection/protocol/ga4/reference#device"
65+ return (
66+ < Root >
67+ < Divider >
68+ < Chip label = "DEVICE INFORMATION" size = "small" />
69+ </ Divider >
70+ < Typography variant = "h6" > Device Attributes</ Typography >
71+ < Typography >
72+ See the{ " " }
73+ < ExternalLink href = { docHref } > documentation</ ExternalLink > for more
74+ information about device attributes.
75+ </ Typography >
76+ < Grid container spacing = { 1 } >
77+ < Grid item xs = { 12 } sm = { 6 } >
78+ < TextField
79+ fullWidth
80+ id = "device-category"
81+ label = { Label . DeviceCategory }
82+ variant = "outlined"
83+ size = "small"
84+ value = { device_category || "" }
85+ onChange = { e => setDeviceCategory ( e . target . value ) }
86+ helperText = "The category of the device, e.g., mobile, desktop"
87+ />
88+ </ Grid >
89+ < Grid item xs = { 12 } sm = { 6 } >
90+ < TextField
91+ fullWidth
92+ id = "device-language"
93+ label = { Label . DeviceLanguage }
94+ variant = "outlined"
95+ size = "small"
96+ value = { device_language || "" }
97+ onChange = { e => setDeviceLanguage ( e . target . value ) }
98+ helperText = "The language of the device in ISO 639-1 format, e.g., en"
99+ />
100+ </ Grid >
101+ < Grid item xs = { 12 } sm = { 6 } >
102+ < TextField
103+ fullWidth
104+ id = "device-screen-resolution"
105+ label = { Label . DeviceScreenResolution }
106+ variant = "outlined"
107+ size = "small"
108+ value = { device_screen_resolution || "" }
109+ onChange = { e => setDeviceScreenResolution ( e . target . value ) }
110+ helperText = "The screen resolution of the device, e.g., 1920x1080"
111+ />
112+ </ Grid >
113+ < Grid item xs = { 12 } sm = { 6 } >
114+ < TextField
115+ fullWidth
116+ id = "device-operating-system"
117+ label = { Label . DeviceOperatingSystem }
118+ variant = "outlined"
119+ size = "small"
120+ value = { device_operating_system || "" }
121+ onChange = { e => setDeviceOperatingSystem ( e . target . value ) }
122+ helperText = "The device's operating system, e.g., MacOS, Windows"
123+ />
124+ </ Grid >
125+ < Grid item xs = { 12 } sm = { 6 } >
126+ < TextField
127+ fullWidth
128+ id = "device-operating-system-version"
129+ label = { Label . DeviceOperatingSystemVersion }
130+ variant = "outlined"
131+ size = "small"
132+ value = { device_operating_system_version || "" }
133+ onChange = { e => setDeviceOperatingSystemVersion ( e . target . value ) }
134+ helperText = "The version of the device's operating system, e.g., 13.5"
135+ />
136+ </ Grid >
137+ < Grid item xs = { 12 } sm = { 6 } >
138+ < TextField
139+ fullWidth
140+ id = "device-model"
141+ label = { Label . DeviceModel }
142+ variant = "outlined"
143+ size = "small"
144+ value = { device_model || "" }
145+ onChange = { e => setDeviceModel ( e . target . value ) }
146+ helperText = "The model of the device, e.g., Pixel 6"
147+ />
148+ </ Grid >
149+ < Grid item xs = { 12 } sm = { 6 } >
150+ < TextField
151+ fullWidth
152+ id = "device-brand"
153+ label = { Label . DeviceBrand }
154+ variant = "outlined"
155+ size = "small"
156+ value = { device_brand || "" }
157+ onChange = { e => setDeviceBrand ( e . target . value ) }
158+ helperText = "The brand of the device, e.g., Google"
159+ />
160+ </ Grid >
161+ < Grid item xs = { 12 } sm = { 6 } >
162+ < TextField
163+ fullWidth
164+ id = "device-browser"
165+ label = { Label . DeviceBrowser }
166+ variant = "outlined"
167+ size = "small"
168+ value = { device_browser || "" }
169+ onChange = { e => setDeviceBrowser ( e . target . value ) }
170+ helperText = "The brand or type of browser, e.g., Chrome"
171+ />
172+ </ Grid >
173+ < Grid item xs = { 12 } sm = { 6 } >
174+ < TextField
175+ fullWidth
176+ id = "device-browser-version"
177+ label = { Label . DeviceBrowserVersion }
178+ variant = "outlined"
179+ size = "small"
180+ value = { device_browser_version || "" }
181+ onChange = { e => setDeviceBrowserVersion ( e . target . value ) }
182+ helperText = "The browser version, e.g., 136.0.7103.60"
183+ />
184+ </ Grid >
185+ </ Grid >
186+ { ! useFirebase && (
187+ < >
188+ < Typography variant = "h6" > User Agent</ Typography >
189+ < Typography >
190+ Provide a custom user agent string. Google Analytics will use this to derive information
191+ about the user's device, operating system, and browser. This field is ignored if device
192+ attributes are provided.
193+ </ Typography >
194+ < Grid container spacing = { 1 } >
195+ < Grid item xs = { 12 } sm = { 6 } >
196+ < TextField
197+ fullWidth
198+ id = "user-agent"
199+ label = { Label . UserAgent }
200+ variant = "outlined"
201+ size = "small"
202+ value = { user_agent || "" }
203+ onChange = { e => setUserAgent ( e . target . value ) }
204+ helperText = "The user agent string identifying the client"
205+ />
206+ </ Grid >
207+ </ Grid >
208+ </ >
209+ ) }
210+ </ Root >
211+ )
212+ }
213+
214+ export default DeviceInformation
0 commit comments