feat: Refactor set function and implement setUserProperty function with demo (#113)

* feat: Refactor set function to allow overloading

* Update src/utils/googleAnalytics/set.ts

Co-authored-by: Yurim Jalynne Jin <[email protected]>

* refactor: change set function to use rest parameter with tuple unions

* feat: Add demo with set function

* feat: Implement SetUserProperty function

* chore: Make jsx-a11y/no-onchange rule off in eslint config

* feat: Add demo for setUserProperty

Co-authored-by: Dayoung Kang <[email protected]>
Co-authored-by: Yurim Jalynne Jin <[email protected]>

Author: 3 people

.eslintrc.json

@@ -19,7 +19,8 @@
     "prettier/prettier": ["error", {"endOfLine":"auto"}],
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "react/react-in-jsx-scope": "off",
-    "import/no-unresolved": "off"
+    "import/no-unresolved": "off",
+    "jsx-a11y/no-onchange": "off"
   },
   "settings": {
     "react": {

demo/with-cra/src/App.tsx

@@ -2,6 +2,8 @@ import NavBar from './components/NavBar';
 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() {
@@ -17,6 +19,12 @@ function App() {
       <Route path="/login">
         <LoginPage />
       </Route>
+      <Route path="/set-currency">
+        <CurrencyPage />
+      </Route>
+      <Route path="/set-user-property">
+        <UserPropertyPage />
+      </Route>
     </div>
   );
 }

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

@@ -40,6 +40,15 @@ const NavBar = () => {
       >
         Login
       </NavItem>
+      <NavItem
+        href="/set-currency"
+        onClick={() => {
+          analytics.onSet({currency: 'KRW'});
+        }}
+      >
+        Currency
+      </NavItem>
+      <NavItem href="/set-user-property">UserProperty</NavItem>
     </header>
   );
 };

demo/with-cra/src/index.tsx

@@ -34,6 +34,16 @@ ReactDOM.render(
         fruitLogger.click(name, params);
         toaster.click(name, params);
       }}
+      onSet={(...args: Parameters<typeof googleAnalytics.set>) => {
+        googleAnalytics.set(...args);
+        fruitLogger.set(...args);
+        toaster.set(...args);
+      }}
+      onSetUserProperty={params => {
+        googleAnalytics.setUserProperty(params);
+        fruitLogger.setUserProperty(params);
+        toaster.setUserProperty(params);
+      }}
     >
       <App />
     </AnalyticsProvider>

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

@@ -0,0 +1,13 @@
+import {useEffect} from 'react';
+import {useAnalyticsContext} from '@every-analytics/react-analytics-provider';
+
+const CurrencyPage = () => {
+  const analytics = useAnalyticsContext();
+  useEffect(() => {
+    analytics.onPageView();
+  }, [analytics]);
+
+  return <h1>Set Currency KRW</h1>;
+};
+
+export default CurrencyPage;

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

@@ -1,15 +1,31 @@
-const pageView = (path: string, params?: {[key: string]: any}) => {
+type UnknownRecord = Record<string, unknown>;
+
+const pageView = (path: string, params?: UnknownRecord) => {
   console.info('🥝Fruit Logger - PageView', params);
 };
-const event = (name: string, params?: {[key: string]: any}) => {
+const event = (name: string, params?: UnknownRecord) => {
   console.info('🥝Fruit Logger - Event', name, params);
 };
-const click = (name: string, params?: {[key: string]: any}) => {
+const click = (name: string, params?: UnknownRecord) => {
   console.info('🥝Fruit Logger - Click', name, params);
 };
+const set = (...args: [string, UnknownRecord] | [UnknownRecord]) => {
+  const params = args.pop();
+  const name = args.pop();
+  if (name === undefined) {
+    console.info('🥝Fruit Logger - Set', params);
+  } else {
+    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

@@ -35,8 +35,26 @@ export const pageView = (path: string, params?: unknown) => {
   );
 };
 
+export const set = (...args: [string, unknown] | [unknown]) => {
+  const params = args.pop();
+  const name = args.pop();
+  showToast(
+    <>
+      <div>GA: Set</div>
+      {name && <div>name: {name}</div>}
+      <div>params: {JSON.stringify(params)}</div>
+    </>,
+  );
+};
+
+export const setUserProperty = (params: unknown) => {
+  set('user_properties', params);
+};
+
 export const toaster = {
   event,
   click,
   pageView,
+  set,
+  setUserProperty,
 };

src/components/AnalyticsProvider/index.tsx

@@ -8,6 +8,8 @@ interface Props {
   onPageView?(params?: UnknownRecord): void;
   onEvent?(name: string, params?: UnknownRecord): void;
   onClick?(name: string, params?: UnknownRecord): void;
+  onSet?(...args: [string, UnknownRecord] | [UnknownRecord]): void;
+  onSetUserProperty?(params: UnknownRecord): void;
   children: React.ReactNode;
 }
 
@@ -16,6 +18,8 @@ export function AnalyticsProvider({
   onPageView = () => null,
   onEvent = () => null,
   onClick = () => null,
+  onSet = () => null,
+  onSetUserProperty = () => null,
   children,
 }: Props) {
   React.useEffect(() => {
@@ -29,11 +33,13 @@ export function AnalyticsProvider({
           onPageView,
           onEvent,
           onClick,
+          onSet,
+          onSetUserProperty,
         }}
       >
         {children}
       </AnalyticsProviderContext.Provider>
     ),
-    [children, onClick, onEvent, onPageView],
+    [children, onClick, onEvent, onPageView, onSet, onSetUserProperty],
   );
 }

src/contexts/AnalyticsProviderContext.ts

@@ -5,12 +5,16 @@ export interface AnalyticsProviderContext {
   onPageView(params?: UnknownRecord): void;
   onEvent(name: string, params?: UnknownRecord): void;
   onClick(name: string, params?: UnknownRecord): void;
+  onSet(...args: [string, UnknownRecord] | [UnknownRecord]): void;
+  onSetUserProperty(params: UnknownRecord): void;
 }
 
 export const initialState: AnalyticsProviderContext = {
   onPageView: () => null,
   onEvent: () => null,
   onClick: () => null,
+  onSet: () => null,
+  onSetUserProperty: () => null,
 };
 
 const AnalyticsProviderContext = createContext<AnalyticsProviderContext>(initialState);

src/utils/googleAnalytics/index.ts

@@ -2,10 +2,12 @@ import {event} from './event';
 import {click} from './click';
 import {initialize} from './initialize';
 import {set} from './set';
+import {setUserProperty} from './setUserProperty';
 
 export const googleAnalytics = {
   initialize,
   event,
   click,
   set,
+  setUserProperty,
 };

src/utils/googleAnalytics/set.ts

@@ -5,7 +5,14 @@ import {gtag} from './initialize';
 /** Allows you to set values that persist across all the subsequent gtag() calls on the page.
  * {@link https://developers.google.com/gtagjs/reference/api#set API Reference}
  * @param params key-value pairs that are to persist across gtag() calls. */
-export function set(params: UnknownRecord) {
-  console.info(`✅GA: set`, params);
-  gtag('set', params);
+export function set(...args: [string, UnknownRecord] | [UnknownRecord]) {
+  const params = args.pop();
+  const name = args.pop();
+  if (name === undefined) {
+    console.info(`✅GA: set`, params);
+    gtag('set', params);
+  } else {
+    console.info(`✅GA: set ${name}`, params);
+    gtag('set', name, params);
+  }
 }

src/utils/googleAnalytics/setUserProperty.ts

@@ -0,0 +1,6 @@
+import {UnknownRecord} from '../../types/common';
+import {set} from './set';
+
+export function setUserProperty(params: UnknownRecord) {
+  return set('user_properties', params);
+}