feat: add publish configure, fix redundant click event (#6)

Co-authored-by: xiaoweii <[email protected]>

Author: zhu-xiaowei

README.md

@@ -10,40 +10,20 @@ The SDK relies on the Amplify for JS SDK Core Library and is developed according
 
 ### Include SDK
 
-**1. Using NPM repository** (The package is pending release)
-
-```bash
-npm install @awslabs/clickstream-web
-```
-
-**2. Using source code**
-
-Clone this repository locally.
-```bash
-git clone https://github.com/awslabs/clickstream-web.git
-```
-
-Execute the following script to Generate `clickstream-web-x.x.x.tgz` zip package, which will be located in the project root folder.
 ```bash
-cd clickstream-web && npm run build && npm run pack
+npm install @aws/clickstream-web
 ```
 
-Copy the `clickstream-web-x.x.x.tgz` into your project, then execute the following script in your project root folder to install the SDK.
-```bash
-npm install ./clickstream-web-x.x.x.tgz
-```
-Note: Please correct the SDK version and change the path to where the `clickstream-web-x.x.x.tgz` file is located.
-
 ### Initialize the SDK
 You need to configure the SDK with default information before using it. Copy your configuration code from your clickstream solution control plane, the configuration code should look like as follows. You can also manually add this code snippet and replace the values of appId and endpoint after you registered app to a data pipeline in the Clickstream Analytics solution console.
 
 ```typescript
-import { ClickstreamAnalytics, EventMode, PageType } from 'clickstream-web';
+import { ClickstreamAnalytics } from '@aws/clickstream-web';
 
 ClickstreamAnalytics.configure({
    appId: "your appId",
    endpoint: "https://example.com/collect",
-)};
+});
 ```
 
 Your `appId` and `endpoint` are already set up in it.
@@ -55,7 +35,7 @@ Your `appId` and `endpoint` are already set up in it.
 Add the following code where you need to record event.
 
 ```typescript
-import { ClickstreamAnalytics } from 'clickstream-web';
+import { ClickstreamAnalytics } from '@aws/clickstream-web';
 
 ClickstreamAnalytics.record({ name: 'albumVisit' });
 ClickstreamAnalytics.record({
@@ -67,7 +47,7 @@ ClickstreamAnalytics.record({
 #### Login and logout
 
 ```typescript
-import { ClickstreamAnalytics } from 'clickstream-web';
+import { ClickstreamAnalytics } from '@aws/clickstream-web';
 
 // when user login success.
 ClickstreamAnalytics.setUserId("UserId");
@@ -91,7 +71,7 @@ Current login user's attributes will be cached in localStorage, so the next time
 In addition to the required `appId` and `endpoint`, you can configure other information to get more customized usage:
 
 ```typescript
-import { ClickstreamAnalytics, EventMode, PageType } from 'clickstream-web';
+import { ClickstreamAnalytics, EventMode, PageType } from '@aws/clickstream-web';
 
 ClickstreamAnalytics.configure({
    appId: "your appId",
@@ -106,7 +86,9 @@ ClickstreamAnalytics.configure({
    isLogEvents: false,
    authCookie: "your auth cookie",
    sessionTimeoutDuration: 1800000,
-)};
+   searchKeyWords: ['product', 'class'],
+   domainList: ['example1.com', 'example2.com'],
+});
 ```
 
 Here is an explanation of each property:
@@ -123,12 +105,14 @@ Here is an explanation of each property:
 - **isLogEvents**: whether to print out event json for debugging, default is false.
 - **authCookie**: your auth cookie for AWS application load balancer auth cookie.
 - **sessionTimeoutDuration**: the duration for session timeout millisecond, default is 1800000
+- **searchKeyWords**: the customized Keywords for trigger the `_search` event, by default we detect `q`, `s`, `search`, `query` and `keyword` in query parameters.
+- **domainList**: if your website cross multiple domain, you can customize the domain list. The `_outbound` attribute of the `_click` event will be true when a link leads to a website that's not a part of your configured domain.  
 
 #### Configuration update
 You can update the default configuration after initializing the SDK, below are the additional configuration options you can customize.
 
 ```typescript
-import { ClickstreamAnalytics } from 'clickstream-web';
+import { ClickstreamAnalytics } from '@aws/clickstream-web';
 
 ClickstreamAnalytics.updateConfigure({
   isLogEvents: true,
@@ -137,19 +121,23 @@ ClickstreamAnalytics.updateConfigure({
   isTrackClickEvents: false,
   isTrackScrollEvents: false,
   isTrackSearchEvents: false,
-  searchKeyWords: ['product', 'class'],
 });
 ```
 
-## How to build&test locally
+## How to integrate and test locally
 
-**Build**
+**Integrate**
 
-Open your terminal window, at the root project folder to execute: 
+Clone this repository locally, execute the following script to generate `aws-clickstream-web-x.x.x.tgz` zip package, which will be located in the project root folder.
+```bash
+cd clickstream-web && npm run pack
+```
 
+Copy the `aws-clickstream-web-x.x.x.tgz` into your project, then execute the following script in your project root folder to install the SDK.
 ```bash
-npm run build
+npm install ./aws-clickstream-web-x.x.x.tgz
 ```
+Note: Please correct the SDK version and change the path to where the `aws-clickstream-web-x.x.x.tgz` file is located.
 
 **Test**
 

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "clickstream-web",
-  "version": "0.1.0",
+  "name": "@aws/clickstream-web",
+  "version": "0.1.1",
   "description": "ClickstreamAnalytics Web SDK",
   "license": "Apache-2.0",
   "main": "./lib/index.ts",
@@ -19,8 +19,13 @@
     "lint": "npx eslint src",
     "test": "npm run prebuild && npx jest -w 1 --coverage",
     "clean": "rimraf lib-esm lib dist",
-    "pack": "npm run prebuild && npm pack"
+    "pack": "npm run build && npm pack"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/awslabs/clickstream-web.git"
+  },
+  "author": "AWS GCR Solutions Team",
   "dependencies": {
     "@aws-amplify/core": "^5.5.1",
     "uuid": "^9.0.0",

src/provider/ClickstreamProvider.ts

@@ -57,6 +57,8 @@ export class ClickstreamProvider implements AnalyticsProvider {
 			pageType: PageType.SPA,
 			isLogEvents: false,
 			sessionTimeoutDuration: 1800000,
+			searchKeyWords: [],
+			domainList: [],
 		};
 	}
 

src/tracker/ClickTracker.ts

@@ -21,6 +21,11 @@ export class ClickTracker extends BaseTracker {
 	init() {
 		this.trackClick = this.trackClick.bind(this);
 		document.addEventListener('click', this.trackClick);
+		const currentDomain = window.location.host;
+		const domainList = this.context.configuration.domainList;
+		if (!domainList.includes(currentDomain)) {
+			domainList.push(currentDomain);
+		}
 	}
 
 	trackClick(event: MouseEvent) {
@@ -36,9 +41,11 @@ export class ClickTracker extends BaseTracker {
 			} catch (error) {
 				logger.debug('parse link domain failed: ' + error);
 			}
+			if (linkDomain === '') return;
 			const linkClasses = targetElement.getAttribute('class');
 			const linkId = targetElement.getAttribute('id');
-			const outbound = window.location.host !== linkDomain;
+			const outbound =
+				!this.context.configuration.domainList.includes(linkDomain);
 			this.provider.record({
 				name: Event.PresetEvent.CLICK,
 				attributes: {

src/tracker/PageViewTracker.ts

@@ -25,8 +25,11 @@ export class PageViewTracker extends BaseTracker {
 	provider: ClickstreamProvider;
 	context: ClickstreamContext;
 	isEntrances = false;
+	searchKeywords = Event.Constants.KEYWORDS;
 
 	init() {
+		const configuredSearchKeywords = this.provider.configuration.searchKeyWords;
+		Object.assign(this.searchKeywords, configuredSearchKeywords);
 		this.trackPageView = this.trackPageView.bind(this);
 		if (this.context.configuration.pageType === PageType.SPA) {
 			this.trackPageViewForSPA();
@@ -90,12 +93,7 @@ export class PageViewTracker extends BaseTracker {
 		const searchStr = window.location.search;
 		if (!searchStr || searchStr.length === 0) return;
 		const urlParams = new URLSearchParams(searchStr);
-		const searchKeywords = Event.Constants.KEYWORDS;
-		const configuredSearchKeywords = this.provider.configuration.searchKeyWords;
-		if (configuredSearchKeywords !== undefined) {
-			Object.assign(searchKeywords, configuredSearchKeywords);
-		}
-		for (const keyword of searchKeywords) {
+		for (const keyword of this.searchKeywords) {
 			if (urlParams.has(keyword)) {
 				const searchTerm = urlParams.get(keyword);
 				this.provider.record({

src/types/Analytics.ts

@@ -18,6 +18,8 @@ export interface ClickstreamConfiguration extends Configuration {
 	readonly sendEventsInterval?: number;
 	readonly pageType?: PageType;
 	readonly sessionTimeoutDuration?: number;
+	readonly searchKeyWords?: string[];
+	readonly domainList?: string[];
 }
 
 export interface Configuration {
@@ -27,7 +29,6 @@ export interface Configuration {
 	isTrackClickEvents?: boolean;
 	isTrackScrollEvents?: boolean;
 	isTrackSearchEvents?: boolean;
-	searchKeyWords?: string[];
 }
 
 export enum SendMode {

test/ClickstreamAnalytics.test.ts

@@ -92,7 +92,6 @@ describe('ClickstreamAnalytics test', () => {
 			isTrackClickEvents: false,
 			isTrackScrollEvents: false,
 			isTrackSearchEvents: false,
-			searchKeyWords: ['video', 'product', 'class'],
 		});
 		const newConfigure = ClickstreamAnalytics['provider'].configuration;
 		expect(newConfigure.isLogEvents).toBeTruthy();
@@ -101,7 +100,7 @@ describe('ClickstreamAnalytics test', () => {
 		expect(newConfigure.isTrackClickEvents).toBeFalsy();
 		expect(newConfigure.isTrackScrollEvents).toBeFalsy();
 		expect(newConfigure.isTrackSearchEvents).toBeFalsy();
-		expect(newConfigure.searchKeyWords.length).toBe(3);
+		expect(newConfigure.searchKeyWords.length).toBe(0);
 	});
 
 	function sleep(ms: number): Promise<void> {

test/tracker/ClickTracker.test.ts

@@ -35,6 +35,7 @@ describe('ClickTracker test', () => {
 			appId: 'testAppId',
 			endpoint: 'https://example.com/click',
 			sendMode: SendMode.Batch,
+			domainList: ['example1.com', 'example2.com'],
 		});
 		context = new ClickstreamContext(new BrowserInfo(), provider.configuration);
 		const sessionTracker = new SessionTracker(provider, context);
@@ -67,35 +68,53 @@ describe('ClickTracker test', () => {
 		expect(trackClickMock).toBeCalled();
 	});
 
-	test('test click a element will full attribute', () => {
+	test('test click a element with current domain', () => {
 		const clickEvent = getMockMouseEvent(
 			'A',
-			'https://example.com',
+			'https://localhost/collect',
 			'link-class',
 			'link-id'
 		);
+		clickTracker.setUp()
 		clickTracker.trackClick(clickEvent);
 		expect(recordMethodMock).toBeCalledWith({
 			name: Event.PresetEvent.CLICK,
 			attributes: {
-				[Event.ReservedAttribute.LINK_URL]: 'https://example.com',
-				[Event.ReservedAttribute.LINK_DOMAIN]: 'example.com',
+				[Event.ReservedAttribute.LINK_URL]: 'https://localhost/collect',
+				[Event.ReservedAttribute.LINK_DOMAIN]: 'localhost',
 				[Event.ReservedAttribute.LINK_CLASSES]: 'link-class',
 				[Event.ReservedAttribute.LINK_ID]: 'link-id',
-				[Event.ReservedAttribute.OUTBOUND]: true,
+				[Event.ReservedAttribute.OUTBOUND]: false,
 			},
 		});
 	});
 
-	test('test click a element without link', () => {
+	test('test click a element in configured domain', () => {
 		const clickEvent = getMockMouseEvent(
 			'A',
-			'',
+			'https://example1.com/collect',
 			'link-class',
 			'link-id'
 		);
+		clickTracker.setUp()
 		clickTracker.trackClick(clickEvent);
-		expect(recordMethodMock).not.toBeCalled()
+		expect(recordMethodMock).toBeCalledWith({
+			name: Event.PresetEvent.CLICK,
+			attributes: {
+				[Event.ReservedAttribute.LINK_URL]: 'https://example1.com/collect',
+				[Event.ReservedAttribute.LINK_DOMAIN]: 'example1.com',
+				[Event.ReservedAttribute.LINK_CLASSES]: 'link-class',
+				[Event.ReservedAttribute.LINK_ID]: 'link-id',
+				[Event.ReservedAttribute.OUTBOUND]: false,
+			},
+		});
+	});
+
+	test('test click a element without link', () => {
+		const clickEvent = getMockMouseEvent('A', '', 'link-class', 'link-id');
+		clickTracker.setUp()
+		clickTracker.trackClick(clickEvent);
+		expect(recordMethodMock).not.toBeCalled();
 	});
 
 	test('test click a element without host', () => {
@@ -105,12 +124,25 @@ describe('ClickTracker test', () => {
 			'link-class',
 			'link-id'
 		);
+		clickTracker.setUp()
+		clickTracker.trackClick(clickEvent);
+		expect(recordMethodMock).not.toBeCalled();
+	});
+
+	test('test click a element with outbound', () => {
+		const clickEvent = getMockMouseEvent(
+			'A',
+			'https://example3.com',
+			'link-class',
+			'link-id'
+		);
+		clickTracker.setUp()
 		clickTracker.trackClick(clickEvent);
 		expect(recordMethodMock).toBeCalledWith({
 			name: Event.PresetEvent.CLICK,
 			attributes: {
-				[Event.ReservedAttribute.LINK_URL]: '/products',
-				[Event.ReservedAttribute.LINK_DOMAIN]: '',
+				[Event.ReservedAttribute.LINK_URL]: 'https://example3.com',
+				[Event.ReservedAttribute.LINK_DOMAIN]: 'example3.com',
 				[Event.ReservedAttribute.LINK_CLASSES]: 'link-class',
 				[Event.ReservedAttribute.LINK_ID]: 'link-id',
 				[Event.ReservedAttribute.OUTBOUND]: true,