decentraland / decentraland/auth
Migrate getAnalytics to useAnalytics Hook
- Dominant language
- TypeScript
- Stars
- 0
- Forks
- 3
- Avg merge
- 8h 13m
- Merged PRs (30d)
- 37
Description
## Files Using getAnalytics That Need Migration
### 1. **src/main.tsx**
```typescript
// Line 24: Initial Segment loading
getAnalytics()?.load(config.get('SEGMENT_API_KEY'))
// Lines 28-32: Page navigation tracking
const analytics = getAnalytics()
useEffect(() => {
analytics?.page()
}, [location, analytics])
```
**Migration Steps:**
- Move initialization to useEffect with `initializeAnalytics(segmentApiKey)`
- Replace page tracking with `trackPageVisit()`
### 2. **src/components/Pages/RequestPage/RequestPage.tsx**
```typescript
// Line 134: User identification after getting signer
const signerAddress = await signer.getAddress()
getAnalytics()?.identify({ ethAddress: signerAddress })
// Lines 147-151: Request expiration tracking
getAnalytics()?.track(TrackingEvents.REQUEST_EXPIRED, {
browserTime: Date.now(),
requestTime: new Date(request.expiration).getTime(),
timeTheSiteStartedLoading
})
```
**Migration Steps:**
- Replace `getAnalytics()?.identify({ ethAddress: signerAddress })` with `identifyUserByAddress(signerAddress)`
- Replace direct tracking with `trackRequestExpired(data)`
### 3. **src/shared/utils/analytics.ts**
```typescript
// Functions that encapsulate getAnalytics:
const trackEvent = (event: TrackingEvents, data?: TrackingData) => {
getAnalytics()?.track(event, data)
}
const identifyUser = (ethAddress: string) => {
getAnalytics()?.identify({ ethAddress })
}
```
**Migration Steps:**
- Keep as internal utility functions (already used by useAnalytics)
- These should remain unchanged as they provide abstraction layer
## New Functions Needed in useAnalytics Hook
```typescript
export const useAnalytics = () => {
// ... existing functions ...
// ADD THESE NEW FUNCTIONS:
const trackRequestExpired = useCallback((data: {
browserTime: number;
requestTime: number;
timeTheSiteStartedLoading: number;
}) => {
trackEvent(TrackingEvents.REQUEST_EXPIRED, data);
}, []);
const trackPageVisit = useCallback(() => {
const analytics = getAnalytics();
analytics?.page();
}, []);
const identifyUserByAddress = useCallback((ethAddress: string) => {
const analytics = getAnalytics();
analytics?.identify({ ethAddress });
}, []);
const initializeAnalytics = useCallback((segmentApiKey: string) => {
const analytics = getAnalytics();
analytics?.load(segmentApiKey);
}, []);
return {
// ... existing functions ...
trackAvatarEditSuccess,
trackCheckTermsOfService,
trackClick,
trackGuestLogin,
trackLoginClick,
trackLoginSuccess,
trackStartAddingEmail,
trackStartAddingName,
trackTermsOfServiceSuccess,
// NEW FUNCTIONS
trackRequestExpired,
trackPageVisit,
identifyUserByAddress,
initializeAnalytics
};
};
```
## Migration Implementation Steps
### Step 1: Add New Functions to useAnalytics
- Add the four new functions above to useAnalytics.ts
- Export them in the return object
### Step 2: Update main.tsx
```typescript
// BEFORE:
getAnalytics()?.load(config.get('SEGMENT_API_KEY'))
const analytics = getAnalytics()
useEffect(() => {
analytics?.page()
}, [location, analytics])
// AFTER:
const { initializeAnalytics, trackPageVisit } = useAnalytics()
useEffect(() => {
initializeAnalytics(config.get('SEGMENT_API_KEY'))
}, [])
useEffect(() => {
trackPageVisit()
}, [location, trackPageVisit])
```
### Step 3: Update RequestPage.tsx
```typescript
// BEFORE:
getAnalytics()?.identify({ ethAddress: signerAddress })
getAnalytics()?.track(TrackingEvents.REQUEST_EXPIRED, {...})
// AFTER:
const { identifyUserByAddress, trackRequestExpired } = useAnalytics()
// In the function:
identifyUserByAddress(signerAddress)
trackRequestExpired({
browserTime: Date.now(),
requestTime: new Date(request.expiration).getTime(),
timeTheSiteStartedLoading
})
```
### Step 4: Remove Direct getAnalytics Imports
- Remove `import { getAnalytics } from '../../../modules/analytics/segment'` from RequestPage.tsx
- Remove `import { getAnalytics } from './modules/analytics/segment'` from main.tsx
### Step 5: Keep src/shared/utils/analytics.ts Unchanged
- This file should remain as internal utility functions
- It already provides the abstraction layer used by useAnalytics
## Benefits of This Migration
- **Centralized Analytics**: All analytics logic in one hook
- **Consistent API**: Same pattern for all analytics calls
- **Better Testing**: Easier to mock analytics behavior
- **Type Safety**: Better TypeScript support with centralized functions
- **Maintainability**: Single place to update analytics logic
Contributor guide
Assessment
This issue has not been assessed yet.