From 8702d4362a45f007d6295b58f77e0e7d8767d023 Mon Sep 17 00:00:00 2001 From: wplong11 Date: Mon, 13 Sep 2021 21:48:43 +0900 Subject: [PATCH 1/6] refactor: rename the AnalyticsProviderContext to Analytics --- src/contexts/AnalyticsProviderContext.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/contexts/AnalyticsProviderContext.ts b/src/contexts/AnalyticsProviderContext.ts index 624f99c3..965db087 100644 --- a/src/contexts/AnalyticsProviderContext.ts +++ b/src/contexts/AnalyticsProviderContext.ts @@ -1,7 +1,7 @@ import {createContext} from 'react'; import {UnknownRecord} from '../types/common'; -export interface AnalyticsProviderContext { +export interface Analytics { onPageView(params?: UnknownRecord): void; onEvent(name: string, params?: UnknownRecord): void; onClick(name: string, params?: UnknownRecord): void; @@ -10,7 +10,7 @@ export interface AnalyticsProviderContext { onSetUserProperty(params: UnknownRecord): void; } -export const initialState: AnalyticsProviderContext = { +export const initialState: Analytics = { onPageView: () => null, onEvent: () => null, onClick: () => null, @@ -19,6 +19,6 @@ export const initialState: AnalyticsProviderContext = { onSetUserProperty: () => null, }; -const AnalyticsProviderContext = createContext(initialState); +const AnalyticsProviderContext = createContext(initialState); export default AnalyticsProviderContext; From edb6bc7b04e5b66e56fd3c6e6519d35ff421401d Mon Sep 17 00:00:00 2001 From: wplong11 Date: Mon, 13 Sep 2021 21:56:33 +0900 Subject: [PATCH 2/6] refactor: rename useAnalyticsContext to useAnalytics --- demo/with-cra/src/components/NavBar.tsx | 4 ++-- demo/with-cra/src/pages/CurrencyPage/index.tsx | 4 ++-- demo/with-cra/src/pages/ProductsPage/index.tsx | 4 ++-- demo/with-cra/src/pages/UserPropertyPage/index.tsx | 4 ++-- src/components/AnalyticsClick/index.tsx | 4 ++-- src/components/AnalyticsPageView/index.tsx | 4 ++-- src/contexts/index.ts | 2 +- src/contexts/{useAnalyticsContext.ts => useAnalytics.ts} | 2 +- src/hooks/useAnalyticsPageView.ts | 4 ++-- tests/hooks/useAnalyticsPageView.test.ts | 4 ++-- 10 files changed, 18 insertions(+), 18 deletions(-) rename src/contexts/{useAnalyticsContext.ts => useAnalytics.ts} (79%) diff --git a/demo/with-cra/src/components/NavBar.tsx b/demo/with-cra/src/components/NavBar.tsx index f3f3437a..c7b84339 100644 --- a/demo/with-cra/src/components/NavBar.tsx +++ b/demo/with-cra/src/components/NavBar.tsx @@ -1,10 +1,10 @@ // import { logEvent } from "@every-analytics/react-analytics-provider"; import React from 'react'; import navigate from 'router/navigate'; -import {useAnalyticsContext} from '@every-analytics/react-analytics-provider'; +import {useAnalytics} from '@every-analytics/react-analytics-provider'; const NavBar = () => { - const analytics = useAnalyticsContext(); + const analytics = useAnalytics(); return (
diff --git a/demo/with-cra/src/pages/CurrencyPage/index.tsx b/demo/with-cra/src/pages/CurrencyPage/index.tsx index d18e17f5..847256f0 100644 --- a/demo/with-cra/src/pages/CurrencyPage/index.tsx +++ b/demo/with-cra/src/pages/CurrencyPage/index.tsx @@ -1,8 +1,8 @@ import {useEffect} from 'react'; -import {useAnalyticsContext} from '@every-analytics/react-analytics-provider'; +import {useAnalytics} from '@every-analytics/react-analytics-provider'; const CurrencyPage = () => { - const analytics = useAnalyticsContext(); + const analytics = useAnalytics(); useEffect(() => { analytics.onPageView(); }, [analytics]); diff --git a/demo/with-cra/src/pages/ProductsPage/index.tsx b/demo/with-cra/src/pages/ProductsPage/index.tsx index b2c4a426..c2397452 100644 --- a/demo/with-cra/src/pages/ProductsPage/index.tsx +++ b/demo/with-cra/src/pages/ProductsPage/index.tsx @@ -1,11 +1,11 @@ import {useEffect} from 'react'; import {getQueryParams} from 'utils/location'; -import {useAnalyticsContext} from '@every-analytics/react-analytics-provider'; +import {useAnalytics} from '@every-analytics/react-analytics-provider'; const ProductsPage = () => { const {color} = getQueryParams<{color: string}>(); const products = getProductsByColor(color); - const analytics = useAnalyticsContext(); + const analytics = useAnalytics(); useEffect(() => { analytics.onPageView(); diff --git a/demo/with-cra/src/pages/UserPropertyPage/index.tsx b/demo/with-cra/src/pages/UserPropertyPage/index.tsx index b391071e..130f75d3 100644 --- a/demo/with-cra/src/pages/UserPropertyPage/index.tsx +++ b/demo/with-cra/src/pages/UserPropertyPage/index.tsx @@ -1,8 +1,8 @@ import {useEffect, useState} from 'react'; -import {useAnalyticsContext} from '@every-analytics/react-analytics-provider'; +import {useAnalytics} from '@every-analytics/react-analytics-provider'; const SetUserPropertyPage = () => { - const analytics = useAnalyticsContext(); + const analytics = useAnalytics(); useEffect(() => { analytics.onPageView(); }, [analytics]); diff --git a/src/components/AnalyticsClick/index.tsx b/src/components/AnalyticsClick/index.tsx index bf1dc019..b7e857e3 100644 --- a/src/components/AnalyticsClick/index.tsx +++ b/src/components/AnalyticsClick/index.tsx @@ -1,5 +1,5 @@ import React, {useCallback} from 'react'; -import {useAnalyticsContext} from '../../contexts'; +import {useAnalytics} from '../../contexts'; import {UnknownRecord} from '../../types/common'; export interface AnalyticsClickProps { @@ -9,7 +9,7 @@ export interface AnalyticsClickProps { } export const AnalyticsClick = ({children, name, params}: AnalyticsClickProps) => { - const {onClick} = useAnalyticsContext(); + const {onClick} = useAnalytics(); const child = React.Children.only(children) as React.ReactElement; diff --git a/src/components/AnalyticsPageView/index.tsx b/src/components/AnalyticsPageView/index.tsx index ea4964b6..35b7f6e5 100644 --- a/src/components/AnalyticsPageView/index.tsx +++ b/src/components/AnalyticsPageView/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {useAnalyticsContext} from '../../contexts/useAnalyticsContext'; +import {useAnalytics} from '../../contexts/useAnalytics'; import {UnknownRecord} from '../../types/common'; export interface AnalyticsPageViewProps { @@ -8,7 +8,7 @@ export interface AnalyticsPageViewProps { } export const AnalyticsPageView = ({children, params}: AnalyticsPageViewProps) => { - const analytics = useAnalyticsContext(); + const analytics = useAnalytics(); React.useEffect(() => { analytics.onPageView(params); diff --git a/src/contexts/index.ts b/src/contexts/index.ts index 1377eedf..955ac594 100644 --- a/src/contexts/index.ts +++ b/src/contexts/index.ts @@ -1 +1 @@ -export * from './useAnalyticsContext'; +export * from './useAnalytics'; diff --git a/src/contexts/useAnalyticsContext.ts b/src/contexts/useAnalytics.ts similarity index 79% rename from src/contexts/useAnalyticsContext.ts rename to src/contexts/useAnalytics.ts index 1c4f6eb0..8b298c99 100644 --- a/src/contexts/useAnalyticsContext.ts +++ b/src/contexts/useAnalytics.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import AnalyticsProviderContext from './AnalyticsProviderContext'; -export function useAnalyticsContext() { +export function useAnalytics() { return React.useContext(AnalyticsProviderContext); } diff --git a/src/hooks/useAnalyticsPageView.ts b/src/hooks/useAnalyticsPageView.ts index ca37e3b3..f720d7c4 100644 --- a/src/hooks/useAnalyticsPageView.ts +++ b/src/hooks/useAnalyticsPageView.ts @@ -1,12 +1,12 @@ import React from 'react'; -import {useAnalyticsContext} from '../contexts/useAnalyticsContext'; +import {useAnalytics} from '../contexts/useAnalytics'; import {UnknownRecord} from '../types/common'; export function useAnalyticsPageView(params: UnknownRecord): void; export function useAnalyticsPageView(callback: () => UnknownRecord): void; export function useAnalyticsPageView(callback: () => Promise): void; export function useAnalyticsPageView(paramsOrCallback: UnknownRecord | (() => Promise | UnknownRecord)) { - const analytics = useAnalyticsContext(); + const analytics = useAnalytics(); const pageView = async () => { const params = typeof paramsOrCallback === 'function' ? await paramsOrCallback() : paramsOrCallback; diff --git a/tests/hooks/useAnalyticsPageView.test.ts b/tests/hooks/useAnalyticsPageView.test.ts index 057a63c2..386b6f47 100644 --- a/tests/hooks/useAnalyticsPageView.test.ts +++ b/tests/hooks/useAnalyticsPageView.test.ts @@ -1,7 +1,7 @@ import React from 'react'; import * as faker from 'faker'; -import * as contextModule from '../../src/contexts/useAnalyticsContext'; +import * as contextModule from '../../src/contexts/useAnalytics'; import {useAnalyticsPageView} from '../../src/hooks/useAnalyticsPageView'; describe('useAnalyticsPageView', () => { @@ -13,7 +13,7 @@ describe('useAnalyticsPageView', () => { const onPageView = jest.fn(); const useEffectSpy = jest.spyOn(React, 'useEffect').mockImplementationOnce(cb => cb()); - const useContextSpy = jest.spyOn(contextModule, 'useAnalyticsContext').mockImplementationOnce( + const useContextSpy = jest.spyOn(contextModule, 'useAnalytics').mockImplementationOnce( () => ({ onPageView, From cec9c56435cf8f052834a38ec7abc42c50ed457a Mon Sep 17 00:00:00 2001 From: wplong11 Date: Mon, 13 Sep 2021 21:57:12 +0900 Subject: [PATCH 3/6] refactor: extract Analytics to a separate file --- src/contexts/AnalyticsProviderContext.ts | 13 ++----------- src/core/Analytics.ts | 10 ++++++++++ src/core/index.ts | 1 + src/index.tsx | 1 + 4 files changed, 14 insertions(+), 11 deletions(-) create mode 100644 src/core/Analytics.ts create mode 100644 src/core/index.ts diff --git a/src/contexts/AnalyticsProviderContext.ts b/src/contexts/AnalyticsProviderContext.ts index 965db087..829f92a0 100644 --- a/src/contexts/AnalyticsProviderContext.ts +++ b/src/contexts/AnalyticsProviderContext.ts @@ -1,16 +1,7 @@ import {createContext} from 'react'; -import {UnknownRecord} from '../types/common'; +import {Analytics} from '../core'; -export interface Analytics { - onPageView(params?: UnknownRecord): void; - onEvent(name: string, params?: UnknownRecord): void; - onClick(name: string, params?: UnknownRecord): void; - onSet(...args: [string, UnknownRecord] | [UnknownRecord]): void; - onSetUserId(userId: string | null): void; - onSetUserProperty(params: UnknownRecord): void; -} - -export const initialState: Analytics = { +const initialState: Analytics = { onPageView: () => null, onEvent: () => null, onClick: () => null, diff --git a/src/core/Analytics.ts b/src/core/Analytics.ts new file mode 100644 index 00000000..fb46cef2 --- /dev/null +++ b/src/core/Analytics.ts @@ -0,0 +1,10 @@ +import {UnknownRecord} from '../types/common'; + +export interface Analytics { + onPageView(params?: UnknownRecord): void; + onEvent(name: string, params?: UnknownRecord): void; + onClick(name: string, params?: UnknownRecord): void; + onSet(...args: [string, UnknownRecord] | [UnknownRecord]): void; + onSetUserId(userId: string | null): void; + onSetUserProperty(params: UnknownRecord): void; +} diff --git a/src/core/index.ts b/src/core/index.ts new file mode 100644 index 00000000..dca4ebe3 --- /dev/null +++ b/src/core/index.ts @@ -0,0 +1 @@ +export * from './Analytics'; diff --git a/src/index.tsx b/src/index.tsx index bdd15d0d..61216f16 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -2,3 +2,4 @@ export * from './components'; export * from './utils'; export * from './contexts'; export * from './hooks'; +export * from './core'; From 36dc600812c6d2224c462466f4726223cc85baa2 Mon Sep 17 00:00:00 2001 From: wplong11 Date: Mon, 13 Sep 2021 21:59:08 +0900 Subject: [PATCH 4/6] refactor: rename method name of Analytics --- demo/with-cra/src/components/NavBar.tsx | 10 ++++---- .../with-cra/src/pages/CurrencyPage/index.tsx | 2 +- .../with-cra/src/pages/ProductsPage/index.tsx | 2 +- .../src/pages/UserPropertyPage/index.tsx | 4 ++-- src/components/AnalyticsClick/index.tsx | 6 ++--- src/components/AnalyticsPageView/index.tsx | 2 +- src/components/AnalyticsProvider/index.tsx | 12 +++++----- src/contexts/AnalyticsProviderContext.ts | 12 +++++----- src/core/Analytics.ts | 12 +++++----- src/hooks/useAnalyticsPageView.ts | 2 +- tests/hooks/useAnalyticsPageView.test.ts | 24 +++++++++---------- 11 files changed, 44 insertions(+), 44 deletions(-) diff --git a/demo/with-cra/src/components/NavBar.tsx b/demo/with-cra/src/components/NavBar.tsx index c7b84339..d9bf14c3 100644 --- a/demo/with-cra/src/components/NavBar.tsx +++ b/demo/with-cra/src/components/NavBar.tsx @@ -11,7 +11,7 @@ const NavBar = () => { { - analytics.onEvent('Click logo'); + analytics.trackEvent('Click logo'); }} > Fruit Store @@ -19,7 +19,7 @@ const NavBar = () => { { - analytics.onEvent('Click products', {color: 'red'}); + analytics.trackEvent('Click products', {color: 'red'}); }} > Red @@ -27,7 +27,7 @@ const NavBar = () => { { - analytics.onEvent('Click products', {color: 'yellow'}); + analytics.trackEvent('Click products', {color: 'yellow'}); }} > Yellow @@ -35,7 +35,7 @@ const NavBar = () => { { - analytics.onClick('Click login', {color: 'yellow'}); + analytics.trackClick('Click login', {color: 'yellow'}); }} > Login @@ -43,7 +43,7 @@ const NavBar = () => { { - analytics.onSet({currency: 'KRW'}); + analytics.set({currency: 'KRW'}); }} > Currency diff --git a/demo/with-cra/src/pages/CurrencyPage/index.tsx b/demo/with-cra/src/pages/CurrencyPage/index.tsx index 847256f0..c619fe5c 100644 --- a/demo/with-cra/src/pages/CurrencyPage/index.tsx +++ b/demo/with-cra/src/pages/CurrencyPage/index.tsx @@ -4,7 +4,7 @@ import {useAnalytics} from '@every-analytics/react-analytics-provider'; const CurrencyPage = () => { const analytics = useAnalytics(); useEffect(() => { - analytics.onPageView(); + analytics.trackPageView(); }, [analytics]); return

Set Currency KRW

; diff --git a/demo/with-cra/src/pages/ProductsPage/index.tsx b/demo/with-cra/src/pages/ProductsPage/index.tsx index c2397452..fb7b6b36 100644 --- a/demo/with-cra/src/pages/ProductsPage/index.tsx +++ b/demo/with-cra/src/pages/ProductsPage/index.tsx @@ -8,7 +8,7 @@ const ProductsPage = () => { const analytics = useAnalytics(); useEffect(() => { - analytics.onPageView(); + analytics.trackPageView(); }, [analytics]); return ( diff --git a/demo/with-cra/src/pages/UserPropertyPage/index.tsx b/demo/with-cra/src/pages/UserPropertyPage/index.tsx index 130f75d3..e7294ab8 100644 --- a/demo/with-cra/src/pages/UserPropertyPage/index.tsx +++ b/demo/with-cra/src/pages/UserPropertyPage/index.tsx @@ -4,13 +4,13 @@ import {useAnalytics} from '@every-analytics/react-analytics-provider'; const SetUserPropertyPage = () => { const analytics = useAnalytics(); useEffect(() => { - analytics.onPageView(); + analytics.trackPageView(); }, [analytics]); const [favoriteFood, setFavoriteFood] = useState('한식'); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); - analytics.onSetUserProperty({favoriteFood}); + analytics.setUserProperty({favoriteFood}); }; return ( diff --git a/src/components/AnalyticsClick/index.tsx b/src/components/AnalyticsClick/index.tsx index b7e857e3..04bbe5ea 100644 --- a/src/components/AnalyticsClick/index.tsx +++ b/src/components/AnalyticsClick/index.tsx @@ -9,13 +9,13 @@ export interface AnalyticsClickProps { } export const AnalyticsClick = ({children, name, params}: AnalyticsClickProps) => { - const {onClick} = useAnalytics(); + const {trackClick} = useAnalytics(); const child = React.Children.only(children) as React.ReactElement; const handleChildClick = useCallback(() => { - onClick(name, {action_type: 'click', ...params}); - }, [name, params, onClick]); + trackClick(name, {action_type: 'click', ...params}); + }, [name, params, trackClick]); return React.cloneElement(child, { onClick: handleChildClick, diff --git a/src/components/AnalyticsPageView/index.tsx b/src/components/AnalyticsPageView/index.tsx index 35b7f6e5..fa8e3e51 100644 --- a/src/components/AnalyticsPageView/index.tsx +++ b/src/components/AnalyticsPageView/index.tsx @@ -11,7 +11,7 @@ export const AnalyticsPageView = ({children, params}: AnalyticsPageViewProps) => const analytics = useAnalytics(); React.useEffect(() => { - analytics.onPageView(params); + analytics.trackPageView(params); }, [analytics, params]); return <>{children}; diff --git a/src/components/AnalyticsProvider/index.tsx b/src/components/AnalyticsProvider/index.tsx index 7f35f78d..f7b1e046 100644 --- a/src/components/AnalyticsProvider/index.tsx +++ b/src/components/AnalyticsProvider/index.tsx @@ -32,12 +32,12 @@ export function AnalyticsProvider({ () => ( {children} diff --git a/src/contexts/AnalyticsProviderContext.ts b/src/contexts/AnalyticsProviderContext.ts index 829f92a0..661e3fe2 100644 --- a/src/contexts/AnalyticsProviderContext.ts +++ b/src/contexts/AnalyticsProviderContext.ts @@ -2,12 +2,12 @@ import {createContext} from 'react'; import {Analytics} from '../core'; const initialState: Analytics = { - onPageView: () => null, - onEvent: () => null, - onClick: () => null, - onSet: () => null, - onSetUserId: () => null, - onSetUserProperty: () => null, + trackPageView: () => null, + trackEvent: () => null, + trackClick: () => null, + set: () => null, + setUserId: () => null, + setUserProperty: () => null, }; const AnalyticsProviderContext = createContext(initialState); diff --git a/src/core/Analytics.ts b/src/core/Analytics.ts index fb46cef2..8ed6f093 100644 --- a/src/core/Analytics.ts +++ b/src/core/Analytics.ts @@ -1,10 +1,10 @@ import {UnknownRecord} from '../types/common'; export interface Analytics { - onPageView(params?: UnknownRecord): void; - onEvent(name: string, params?: UnknownRecord): void; - onClick(name: string, params?: UnknownRecord): void; - onSet(...args: [string, UnknownRecord] | [UnknownRecord]): void; - onSetUserId(userId: string | null): void; - onSetUserProperty(params: UnknownRecord): void; + trackPageView(params?: UnknownRecord): void; + trackEvent(name: string, params?: UnknownRecord): void; + trackClick(name: string, params?: UnknownRecord): void; + set(...args: [string, UnknownRecord] | [UnknownRecord]): void; + setUserId(userId: string | null): void; + setUserProperty(params: UnknownRecord): void; } diff --git a/src/hooks/useAnalyticsPageView.ts b/src/hooks/useAnalyticsPageView.ts index f720d7c4..6f7ad65a 100644 --- a/src/hooks/useAnalyticsPageView.ts +++ b/src/hooks/useAnalyticsPageView.ts @@ -10,7 +10,7 @@ export function useAnalyticsPageView(paramsOrCallback: UnknownRecord | (() => Pr const pageView = async () => { const params = typeof paramsOrCallback === 'function' ? await paramsOrCallback() : paramsOrCallback; - analytics.onPageView(params); + analytics.trackPageView(params); }; React.useEffect(() => { diff --git a/tests/hooks/useAnalyticsPageView.test.ts b/tests/hooks/useAnalyticsPageView.test.ts index 386b6f47..d83f9556 100644 --- a/tests/hooks/useAnalyticsPageView.test.ts +++ b/tests/hooks/useAnalyticsPageView.test.ts @@ -10,13 +10,13 @@ describe('useAnalyticsPageView', () => { const callback = () => params; const asyncCallback = async () => params; - const onPageView = jest.fn(); + const trackPageView = jest.fn(); const useEffectSpy = jest.spyOn(React, 'useEffect').mockImplementationOnce(cb => cb()); const useContextSpy = jest.spyOn(contextModule, 'useAnalytics').mockImplementationOnce( () => ({ - onPageView, + trackPageView, // eslint-disable-next-line @typescript-eslint/no-explicit-any } as any), ); @@ -26,7 +26,7 @@ describe('useAnalyticsPageView', () => { params, callback, asyncCallback, - onPageView, + trackPageView, useEffectSpy, useContextSpy, }; @@ -34,36 +34,36 @@ describe('useAnalyticsPageView', () => { const waitForAsync = () => new Promise(resolve => setTimeout(resolve, 0)); - test('should call analytics.onPageView with params', async () => { - const {params, onPageView, useContextSpy, useEffectSpy} = setUp(); + test('should call analytics.trackPageView with params', async () => { + const {params, trackPageView, useContextSpy, useEffectSpy} = setUp(); useAnalyticsPageView(params); await waitForAsync(); expect(useContextSpy).toHaveBeenCalled(); expect(useEffectSpy).toHaveBeenCalled(); - expect(onPageView).toHaveBeenCalledWith(params); + expect(trackPageView).toHaveBeenCalledWith(params); }); - test('should call analytics.onPageView with callback', async () => { - const {params, callback, onPageView, useContextSpy, useEffectSpy} = setUp(); + test('should call analytics.trackPageView with callback', async () => { + const {params, callback, trackPageView, useContextSpy, useEffectSpy} = setUp(); useAnalyticsPageView(callback); await waitForAsync(); expect(useContextSpy).toHaveBeenCalled(); expect(useEffectSpy).toHaveBeenCalled(); - expect(onPageView).toHaveBeenCalledWith(params); + expect(trackPageView).toHaveBeenCalledWith(params); }); - test('should call analytics.onPageView with asyncCallback', async () => { - const {params, asyncCallback, onPageView, useContextSpy, useEffectSpy} = setUp(); + test('should call analytics.trackPageView with asyncCallback', async () => { + const {params, asyncCallback, trackPageView, useContextSpy, useEffectSpy} = setUp(); useAnalyticsPageView(asyncCallback); await waitForAsync(); expect(useContextSpy).toHaveBeenCalled(); expect(useEffectSpy).toHaveBeenCalled(); - expect(onPageView).toHaveBeenCalledWith(params); + expect(trackPageView).toHaveBeenCalledWith(params); }); }); From de8326f2af93bc9337e85dadada1f0ad6d4495c0 Mon Sep 17 00:00:00 2001 From: wplong11 Date: Mon, 13 Sep 2021 21:59:50 +0900 Subject: [PATCH 5/6] refactor: modify props structure of AnalyticsProvider --- README.md | 16 +++-- demo/with-cra/src/index.tsx | 73 ++++++++++++---------- demo/with-nextjs/src/pages/_app.tsx | 41 +++++++----- src/components/AnalyticsProvider/index.tsx | 33 ++-------- 4 files changed, 84 insertions(+), 79 deletions(-) diff --git a/README.md b/README.md index 28b85507..10446dd9 100644 --- a/README.md +++ b/README.md @@ -40,14 +40,20 @@ yarn add @every-analytics/react-analytics-provider You can check examples [here](https://github.com/EveryAnalytics/react-analytics-provider/tree/main/demo) ```tsx -import {AnalyticsProvider} from '@every-analytics/react-analytics-provider'; +import {Analytics, AnalyticsProvider} from '@every-analytics/react-analytics-provider'; + +const analytics: Analytics = { + trackPageView: params => console.log('onTrackPageView', params), + trackEvent: (name, params) => console.log('onTrackEvent', name, params), + trackClick: (name, params) => console.log('onTrackClick', name, params), + set: (...args) => console.log('onSet', args), + setUserId: userId => console.log("onSetUserId", userId), + setUserProperty: params => console.log("onSetUserProperty", params), +} console.log('initialized')} - onPageView={(params) => console.log('pageview', params)} - onEvent={(name, params) => console.log('event', name, params)} - onClick={(name, params) => console.log('click', name, params)} - onSetUserId={(userId) => console.log('setUserId', userId)} + analytics={analytics} > diff --git a/demo/with-cra/src/index.tsx b/demo/with-cra/src/index.tsx index 90e25f98..fc879a81 100644 --- a/demo/with-cra/src/index.tsx +++ b/demo/with-cra/src/index.tsx @@ -2,7 +2,12 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; -import {AnalyticsProvider, googleAnalyticsHelper, amplitudeHelper} from '@every-analytics/react-analytics-provider'; +import { + Analytics, + AnalyticsProvider, + googleAnalyticsHelper, + amplitudeHelper, +} from '@every-analytics/react-analytics-provider'; import {fruitLogger} from './utils/fruitLogger'; import {Toaster} from 'react-hot-toast'; import {toaster} from './utils/toaster'; @@ -10,43 +15,47 @@ import {toaster} from './utils/toaster'; amplitudeHelper.initialize(process.env.REACT_APP_AMPLITUDE_API_KEY); const persistentValues = {userNo: 123}; +const analytics: Analytics = { + trackPageView: params => { + // NOTE: Google Analytics(GA4)는 기본적으로 페이지뷰가 적용됩니다 - 따로 추가 필요X + const path = window.location.pathname + window.location.search; + fruitLogger.pageView(path, params); + toaster.pageView(path, params); + amplitudeHelper.logEvent('pageView', {path}); + }, + trackEvent: (name, params) => { + googleAnalyticsHelper.event(name, params); + fruitLogger.event(name, params); + toaster.event(name, params); + }, + trackClick: (name, params) => { + googleAnalyticsHelper.click(name, params); + fruitLogger.click(name, params); + toaster.click(name, params); + }, + set: (...args: Parameters) => { + googleAnalyticsHelper.set(...args); + fruitLogger.set(...args); + toaster.set(...args); + }, + setUserId: userId => { + // TODO: UserId 설정하는 코드 추가 + console.log(userId); + }, + setUserProperty: params => { + googleAnalyticsHelper.setUserProperty(params); + fruitLogger.setUserProperty(params); + toaster.setUserProperty(params); + }, +}; + ReactDOM.render( { googleAnalyticsHelper.initialize(process.env.REACT_APP_GA_TRACKING_ID, persistentValues); }} - onPageView={params => { - // NOTE: Google Analytics(GA4)는 기본적으로 페이지뷰가 적용됩니다 - 따로 추가 필요X - const path = window.location.pathname + window.location.search; - fruitLogger.pageView(path, params); - toaster.pageView(path, params); - amplitudeHelper.logEvent('pageView', {path}); - }} - onEvent={(name, params) => { - googleAnalyticsHelper.event(name, params); - fruitLogger.event(name, params); - toaster.event(name, params); - }} - onClick={(name, params) => { - googleAnalyticsHelper.click(name, params); - fruitLogger.click(name, params); - toaster.click(name, params); - }} - onSet={(...args: Parameters) => { - googleAnalyticsHelper.set(...args); - fruitLogger.set(...args); - toaster.set(...args); - }} - onSetUserId={userId => { - // TODO: UserId 설정하는 코드 추가 - console.log(userId); - }} - onSetUserProperty={params => { - googleAnalyticsHelper.setUserProperty(params); - fruitLogger.setUserProperty(params); - toaster.setUserProperty(params); - }} + analytics={analytics} > diff --git a/demo/with-nextjs/src/pages/_app.tsx b/demo/with-nextjs/src/pages/_app.tsx index 85fd63d5..b5720360 100644 --- a/demo/with-nextjs/src/pages/_app.tsx +++ b/demo/with-nextjs/src/pages/_app.tsx @@ -1,27 +1,40 @@ -import {AnalyticsProvider} from '@every-analytics/react-analytics-provider'; +import {Analytics, AnalyticsProvider} from '@every-analytics/react-analytics-provider'; import {AppProps} from 'next/app'; import {Layout} from '../layout/Layout'; function DemoApp({Component, pageProps}: AppProps) { + const analytics: Analytics = { + trackPageView: params => { + // NOTE: Google Analytics(GA4)는 기본적으로 페이지뷰가 적용됩니다 - 따로 추가 필요X + // TODO: 이준희 => ga, amplitude event tracking 코드 추가 + console.log('onTrackPageView', params); + }, + trackEvent: (name, params) => { + // TODO: 이준희 => ga, amplitude event tracking 코드 추가 + console.log('onTrackEvent', name, params); + }, + trackClick: (name, params) => { + // TODO: 이준희 => ga, amplitude event tracking 코드 추가 + console.log('onTrackClick', name, params); + }, + set: (...args) => { + console.log('onSet', args); + }, + setUserId: userId => { + console.log('onSetUserId', userId); + }, + setUserProperty: params => { + console.log('onSetUserProperty', params); + }, + }; + return ( { // TODO: 이준희 => ga, amplitude event tracking 코드 추가 console.log('onInitialize'); }} - onPageView={params => { - // NOTE: Google Analytics(GA4)는 기본적으로 페이지뷰가 적용됩니다 - 따로 추가 필요X - // TODO: 이준희 => ga, amplitude event tracking 코드 추가 - console.log('onPageView', params); - }} - onEvent={(name, params) => { - // TODO: 이준희 => ga, amplitude event tracking 코드 추가 - console.log('onEvent', name, params); - }} - onClick={(name, params) => { - // TODO: 이준희 => ga, amplitude event tracking 코드 추가 - console.log('onClick', name, params); - }} + analytics={analytics} > diff --git a/src/components/AnalyticsProvider/index.tsx b/src/components/AnalyticsProvider/index.tsx index f7b1e046..aee5e127 100644 --- a/src/components/AnalyticsProvider/index.tsx +++ b/src/components/AnalyticsProvider/index.tsx @@ -1,27 +1,17 @@ import * as React from 'react'; import AnalyticsProviderContext from '../../contexts/AnalyticsProviderContext'; -import {UnknownRecord} from '../../types/common'; +import {Analytics} from '../../core'; interface Props { onInitialize(): void; - onPageView?(params?: UnknownRecord): void; - onEvent?(name: string, params?: UnknownRecord): void; - onClick?(name: string, params?: UnknownRecord): void; - onSet?(...args: [string, UnknownRecord] | [UnknownRecord]): void; - onSetUserId?(userId: string | null): void; - onSetUserProperty?(params: UnknownRecord): void; + analytics: Analytics; children: React.ReactNode; } export function AnalyticsProvider({ onInitialize, - onPageView = () => null, - onEvent = () => null, - onClick = () => null, - onSet = () => null, - onSetUserId = () => null, - onSetUserProperty = () => null, + analytics, children, }: Props) { React.useEffect(() => { @@ -29,20 +19,7 @@ export function AnalyticsProvider({ }, [onInitialize]); return React.useMemo( - () => ( - - {children} - - ), - [children, onClick, onEvent, onPageView, onSet, onSetUserId, onSetUserProperty], + () => {children}, + [children, analytics], ); } From 03faef80e035f5a6aed45e57d5fb8409f342e659 Mon Sep 17 00:00:00 2001 From: wplong11 Date: Mon, 13 Sep 2021 22:01:00 +0900 Subject: [PATCH 6/6] feat: add initialize method to Analytics --- README.md | 1 + demo/with-cra/src/index.tsx | 10 ++++------ demo/with-nextjs/src/pages/_app.tsx | 11 ++++------- src/components/AnalyticsProvider/index.tsx | 11 +++-------- src/contexts/AnalyticsProviderContext.ts | 1 + src/core/Analytics.ts | 1 + 6 files changed, 14 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index 10446dd9..91bef444 100644 --- a/README.md +++ b/README.md @@ -43,6 +43,7 @@ You can check examples [here](https://github.com/EveryAnalytics/react-analytics- import {Analytics, AnalyticsProvider} from '@every-analytics/react-analytics-provider'; const analytics: Analytics = { + initialize: () => console.log('onInitialize'), trackPageView: params => console.log('onTrackPageView', params), trackEvent: (name, params) => console.log('onTrackEvent', name, params), trackClick: (name, params) => console.log('onTrackClick', name, params), diff --git a/demo/with-cra/src/index.tsx b/demo/with-cra/src/index.tsx index fc879a81..9a9f9bed 100644 --- a/demo/with-cra/src/index.tsx +++ b/demo/with-cra/src/index.tsx @@ -16,6 +16,9 @@ amplitudeHelper.initialize(process.env.REACT_APP_AMPLITUDE_API_KEY); const persistentValues = {userNo: 123}; const analytics: Analytics = { + initialize: () => { + googleAnalyticsHelper.initialize(process.env.REACT_APP_GA_TRACKING_ID, persistentValues); + }, trackPageView: params => { // NOTE: Google Analytics(GA4)는 기본적으로 페이지뷰가 적용됩니다 - 따로 추가 필요X const path = window.location.pathname + window.location.search; @@ -51,12 +54,7 @@ const analytics: Analytics = { ReactDOM.render( - { - googleAnalyticsHelper.initialize(process.env.REACT_APP_GA_TRACKING_ID, persistentValues); - }} - analytics={analytics} - > + { + console.log('onInitialize'); + }, trackPageView: params => { // NOTE: Google Analytics(GA4)는 기본적으로 페이지뷰가 적용됩니다 - 따로 추가 필요X // TODO: 이준희 => ga, amplitude event tracking 코드 추가 @@ -29,13 +32,7 @@ function DemoApp({Component, pageProps}: AppProps) { }; return ( - { - // TODO: 이준희 => ga, amplitude event tracking 코드 추가 - console.log('onInitialize'); - }} - analytics={analytics} - > + diff --git a/src/components/AnalyticsProvider/index.tsx b/src/components/AnalyticsProvider/index.tsx index aee5e127..f91e4fb5 100644 --- a/src/components/AnalyticsProvider/index.tsx +++ b/src/components/AnalyticsProvider/index.tsx @@ -4,19 +4,14 @@ import AnalyticsProviderContext from '../../contexts/AnalyticsProviderContext'; import {Analytics} from '../../core'; interface Props { - onInitialize(): void; analytics: Analytics; children: React.ReactNode; } -export function AnalyticsProvider({ - onInitialize, - analytics, - children, -}: Props) { +export function AnalyticsProvider({analytics, children}: Props) { React.useEffect(() => { - onInitialize(); - }, [onInitialize]); + analytics.initialize(); + }, [analytics]); return React.useMemo( () => {children}, diff --git a/src/contexts/AnalyticsProviderContext.ts b/src/contexts/AnalyticsProviderContext.ts index 661e3fe2..ded768be 100644 --- a/src/contexts/AnalyticsProviderContext.ts +++ b/src/contexts/AnalyticsProviderContext.ts @@ -2,6 +2,7 @@ import {createContext} from 'react'; import {Analytics} from '../core'; const initialState: Analytics = { + initialize: () => null, trackPageView: () => null, trackEvent: () => null, trackClick: () => null, diff --git a/src/core/Analytics.ts b/src/core/Analytics.ts index 8ed6f093..5586017f 100644 --- a/src/core/Analytics.ts +++ b/src/core/Analytics.ts @@ -1,6 +1,7 @@ import {UnknownRecord} from '../types/common'; export interface Analytics { + initialize(): void; trackPageView(params?: UnknownRecord): void; trackEvent(name: string, params?: UnknownRecord): void; trackClick(name: string, params?: UnknownRecord): void;