feat: Add demo for setUserProperty

Author: Dayoung Kang

demo/with-cra/src/App.tsx

@@ -3,6 +3,7 @@ import MainPage from './pages/MainPage';
 import ProductsPage from './pages/ProductsPage';
 import LoginPage from './pages/LoginPage';
 import CurrencyPage from './pages/CurrencyPage';
+import UserPropertyPage from './pages/UserPropertyPage';
 import Route from './router/Route';
 
 function App() {
@@ -21,6 +22,9 @@ function App() {
       <Route path="/set-currency">
         <CurrencyPage />
       </Route>
+      <Route path="/set-user-property">
+        <UserPropertyPage />
+      </Route>
     </div>
   );
 }

demo/with-cra/src/components/NavBar.tsx

@@ -48,6 +48,7 @@ const NavBar = () => {
       >
         Currency
       </NavItem>
+      <NavItem href="/set-user-property">UserProperty</NavItem>
     </header>
   );
 };

demo/with-cra/src/index.tsx

@@ -39,6 +39,11 @@ ReactDOM.render(
         fruitLogger.set(...args);
         toaster.set(...args);
       }}
+      onSetUserProperty={params => {
+        googleAnalytics.setUserProperty(params);
+        fruitLogger.setUserProperty(params);
+        toaster.setUserProperty(params);
+      }}
     >
       <App />
     </AnalyticsProvider>

demo/with-cra/src/pages/UserPropertyPage/index.tsx

@@ -0,0 +1,33 @@
+import {useEffect, useState} from 'react';
+import {useAnalyticsContext} from '@every-analytics/react-analytics-provider';
+
+const SetUserPropertyPage = () => {
+  const analytics = useAnalyticsContext();
+  useEffect(() => {
+    analytics.onPageView();
+  }, [analytics]);
+
+  const [favoriteFood, setFavoriteFood] = useState('한식');
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    analytics.onSetUserProperty({favoriteFood});
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <br />
+      <label>
+        Pick your favorite flavor:
+        <select value={favoriteFood} onChange={e => setFavoriteFood(e.target.value)}>
+          <option value="한식">한식</option>
+          <option value="중식">중식</option>
+          <option value="일식">일식</option>
+          <option value="양식">양식</option>
+        </select>
+      </label>
+      <button type="submit">Submit</button>
+    </form>
+  );
+};
+
+export default SetUserPropertyPage;

demo/with-cra/src/utils/fruitLogger/index.ts

@@ -18,10 +18,14 @@ const set = (...args: [string, UnknownRecord] | [UnknownRecord]) => {
     console.info('🥝Fruit Logger - Set', name, params);
   }
 };
+const setUserProperty = (params: UnknownRecord) => {
+  set('user_properties', params);
+};
 
 export const fruitLogger = {
   pageView,
   event,
   click,
   set,
+  setUserProperty,
 };

demo/with-cra/src/utils/toaster/index.tsx

@@ -47,9 +47,14 @@ export const set = (...args: [string, unknown] | [unknown]) => {
   );
 };
 
+export const setUserProperty = (params: unknown) => {
+  set('user_properties', params);
+};
+
 export const toaster = {
   event,
   click,
   pageView,
   set,
+  setUserProperty,
 };