Example
Simple usage
Here is a simple usage for using the component:
info
Read more in User guide > introducing
- track.ts
- reportAdapter.ts
- types.ts
- index.txs
track.ts
export const reportTrack = () => {
const reportAdapter = new ReportAdapter();
const adapterBuilder = createAdapterBuilder<
TrackContext<ReportTrackData>,
ReportEventData,
ReportAdapterOptions<TrackContext<ReportTrackData>, ReportEventData>
>(reportAdapter);
const adapter = adapterBuilder
.setup(() => {
return Promise.resolve({
name: 'setup',
timeStamp: Date.now(),
});
})
.before((ctx, eventType, eventData) => {
console.log('before', ctx, eventType, eventData);
})
.transform('addCart', (ctx, eventType, eventData) => {
return {
...eventData,
goodName: 'ac_' + eventData?.goodsName,
};
})
.transform('registry', (ctx, eventType, eventData) => {
return { ...eventData, userName: 'rg_' + eventData?.userName };
})
.after((ctx, eventType, reportData) => {
console.log('after', ctx, eventType, reportData);
})
.build();
const trackBuilder = createTrackBuilder<
TrackContext<ReportTrackData>,
ReportEventData
>();
return trackBuilder
.init(() => {
return {
reportAdapter: adapter,
};
})
.before((ctx) => {
console.log('before track', ctx);
})
.after((ctx) => {
console.log('after track', ctx);
});
};
reportAdapter.ts
export class ReportAdapter extends BaseAdapter<
TrackContext<ReportTrackData>,
ReportEventData,
ReportAdapterOptions<TrackContext<ReportTrackData>, ReportEventData>
> {
isTrackable<EventType extends keyof ReportEventData>(
ctx: TrackContext<ReportTrackData>,
eventType: keyof ReportEventData,
reportData?:
| AdapterReportData<ReportEventData, ReportEventData, EventType>
| Awaited<AdapterReportData<ReportEventData, ReportEventData, EventType>>
| undefined
): boolean | Promise<boolean> {
return true;
}
protected report<EventType extends keyof ReportEventData>(
ctx: TrackContext<ReportTrackData>,
eventType: keyof ReportEventData,
reportData?:
| AdapterReportData<ReportEventData, ReportEventData, EventType>
| Awaited<AdapterReportData<ReportEventData, ReportEventData, EventType>>
| undefined,
setupData?:
| {
name: 'setup' | 'setup1' | 'setup2';
timeStamp: number;
user?: string;
}
| undefined
): void | Promise<void> {}
}
types.ts
export type ReportAdapterOptions<Context, EventData> = {
setup?: <EventType extends keyof EventData>(
ctx: Context,
eventTYpe: EventType,
eventData: EventData[EventType]
) => Promise<{
name: 'setup' | 'setup2' | 'setup3';
timeStamp: number;
}>;
};
export type ReportTrackData = {
bizMode: 'test' | 'test2';
env: 'prod' | 'uat';
platform: 'android' | 'ios';
ip: string;
userId: string;
};
export type ReportEventData = {
registry?: {
userName: string;
mobile: string;
pwd: string;
email: string;
};
addCart?: {
price: number;
goodsId: string;
goodsName: string;
count: number;
};
};
index.tsx
export const Index = () => {
const onAddToCart = async () => {
await reportTrack().select('reportAdapter').track('addCart', {
price: 25.99,
goodsId: '23432252',
goodsName: 'Long Chair',
count: 1,
});
};
return (
<div>
<div class="w-60 h-80 bg-gray-50 p-3 flex flex-col gap-1 rounded-2xl">
<div class="h-48 bg-gray-700 rounded-xl"></div>
<div class="flex flex-col gap-4">
<div class="flex flex-row justify-between">
<div class="flex flex-col">
<span class="text-xl font-bold">Long Chair</span>
<p class="text-xs text-gray-700">ID: 23432252</p>
</div>
<span class="font-bold text-red-600">$25.99</span>
</div>
<button class="hover:bg-sky-700 text-gray-50 bg-sky-800 py-2 rounded-md">
Add to cart
</button>
</div>
</div>
</div>
);
};
Congratulations !
That's all, now let's deep dive into the props.