decentraland / decentraland/auth

Migrate getAnalytics to useAnalytics Hook

Open
#198 0 comments 0 reactions 0 assignees View on GitHub
enhancement good first issue
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.