Merge pull request #2 from ridi/dev/ridi-event/0.1

ebongzzang · web-flow · commit efb97b786194 · 2020-11-06T21:36:05.000+09:00
Update EventClient following event spec r0.1
diff --git a/README.md b/README.md
@@ -14,22 +14,26 @@
 <body>
 <script src="./dist/umd/bundle.min.js"></script>
 <script>
-    var client = new EventClient({
+  var eventClient = new client({
     deviceType: 'pc',
-    uId: 'uId',
+    uId: 123456,
     debug: true,
-    development: true,
-    tagManagerOptions: {
-      trackingId: "GTM-ID"
-    },
     autoPageView: true,
+    trackingId: "GTM-5XSZZGH",
   });
-  client.initialize();
-  client.sendPurchase(...);
 
+  eventClient.setUId(12345678);
+
+
+  eventClient.sendAddPaymentInfo('payment_type', {
+    value: 1,
+    currency: 'KRW',
+    items: [
+      {item_id: 'item_id', item_name: 'abcd', item_category: 123456, service_type: 'ridibooks'}
+    ]
+  });
 </script>
-<script>
-  </script>
+
 </body>
 </html>
 ```
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ridi/ridi-event-client",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Ridibooks event tracking client",
   "main": "dist/cjs/index.js",
   "typings": "dist/typings/index.d.ts",
diff --git a/src/eventClient.ts b/src/eventClient.ts
@@ -7,24 +7,11 @@ import { convertKeyToSnakeCase } from './utils/util';
 export interface ClientOptions {
   trackingId: string;
   debug?: boolean;
-  development?: boolean;
   uId?: number;
   autoPageView?: boolean;
   deviceType: DeviceType;
 }
 
-/* eslint-disable camelcase */
-export interface PageMeta {
-  page: string;
-  device: DeviceType;
-  query_params: { [key: string]: string | undefined };
-  path: string;
-  href: string;
-  referrer: string;
-}
-
-/* eslint-enable camelcase */
-
 declare global {
   interface Window {
     dataLayer?: Record<string, any>[];
@@ -39,7 +26,17 @@ export class EventClient {
       this.options.autoPageView = true;
     }
 
-    this.pushDataLayer({ ...options });
+    loadTagManager(this.options.trackingId);
+
+    this.tagCalled = true;
+
+    this.pushDataLayer({ event: 'Init', ...options });
+  }
+
+  public setUId(uId: number): void {
+    this.options.uId = uId;
+
+    this.pushDataLayer(this.options);
   }
 
   private get dataLayer() {
@@ -57,27 +54,6 @@ export class EventClient {
     this.dataLayer.push(data);
   }
 
-  private getPageMeta(href: string, referrer = ''): PageMeta {
-    const url = new URL(href, {}, true);
-
-    const path = url.pathname;
-
-    return {
-      page: url.pathname.split('/')[1] || 'index',
-      device: this.options.deviceType,
-      query_params: url.query,
-      path,
-      href,
-      referrer,
-    };
-  }
-
-  public async initialize(): Promise<void> {
-    this.pushDataLayer(this.options);
-    await loadTagManager(this.options.trackingId);
-    this.tagCalled = true;
-  }
-
   public sendEvent(
     name: string,
     data: Record<string, any> = {},
@@ -88,7 +64,11 @@ export class EventClient {
       ts = new Date();
     }
 
-    const dataLayerValues = { event: name, event_params: data, ts };
+    const dataLayerValues = {
+      event: name,
+      event_params: { data, uId: this.options.uId },
+      ts: ts.getTime(),
+    };
 
     if (this.options.debug) {
       console.group(`[@ridi/ridi-event-client] Sending '${name}' event`);
@@ -105,14 +85,13 @@ export class EventClient {
     return this.tagCalled;
   }
 
-  public sendPageView(href: string, referrer?: string, ts?: Date): void {
+  public sendPageView(ts?: Date): void {
     if (this.options.autoPageView) {
       throw new Error(
         '[@ridi/ridi-event-client] autoPageView option enabled. Do not call this method manually',
       );
     }
-    const pageMeta = this.getPageMeta(href, referrer);
-    this.sendEvent('PageView', { ...pageMeta }, ts);
+    this.sendEvent('PageView', {}, ts);
   }
 
   public sendScreenView(
@@ -152,7 +131,7 @@ export class EventClient {
     this.sendEvent('EnrollPreference', { items }, ts);
   }
 
-  public sendUnenrollPreferences(items: Item[], ts?: Date): void {
+  public sendUnenrollPreference(items: Item[], ts?: Date): void {
     this.sendEvent('UnenrollPreference', { items }, ts);
   }
 
diff --git a/src/index.ts b/src/index.ts
@@ -1,2 +1,3 @@
 export * from './constants';
 export * from './models';
+export * from './eventClient';
diff --git a/src/utils/externalServices.ts b/src/utils/externalServices.ts
@@ -1,27 +1,8 @@
-function addScriptLoadListener(
-  scriptElement: HTMLScriptElement,
-): Promise<void> {
-  const listener = new Promise<void>(resolve => {
-    const callback = () => {
-      scriptElement.removeEventListener('load', callback);
-      resolve();
-    };
-    scriptElement.addEventListener('load', callback);
-  });
-
-  const timeout = new Promise<void>((_, reject) => {
-    setTimeout(() => {
-      reject('Failed to load Script.');
-    }, 5000);
-  });
-
-  return Promise.race([listener, timeout]);
-}
 
 export function loadTagManager(id: string) {
-    return addScriptLoadListener((function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
   new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
   j:any=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);return j;
-  })(window as any,document,'script','dataLayer',id));
+  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+  })(window as any,document,'script','dataLayer',id);
   }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@ridi/ridi-event-client",`
`3`		`- "version": "0.1.0",`
	`3`	`+ "version": "0.2.0",`
`4`	`4`	`"description": "Ridibooks event tracking client",`
`5`	`5`	`"main": "dist/cjs/index.js",`
`6`	`6`	`"typings": "dist/typings/index.d.ts",`
Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,3 @@`
`1`	`1`	`export * from './constants';`
`2`	`2`	`export * from './models';`
	`3`	`+export * from './eventClient';`