Sample Example

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);
});
};
 

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> {}
}

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;
  };
};

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>
  );
};