AUT Feature

AnonymousUserEventTracking.md

@@ -0,0 +1,138 @@
+# Anonymous User Event Tracking Iterable's Web SDK
+The Anonymous User Tracking Module is a pivotal component within our WEB SDK that seamlessly captures user events while maintaining anonymity for non-logged-in users. This module is designed to diligently gather and store events triggered by users who have not yet signed in. Once specific criteria are met or when the user decides to engage further, the module securely synchronizes all accumulated anonymous events with our servers.
+
+By adopting a privacy-first approach, the module allows us to gain valuable insights into user interactions without compromising their personal information. As users transition from anonymous to logged-in status, the module smoothly transitions as well, associating future events with the user's unique identity while ensuring the continuity of event tracking.
+
+Key Features:
+
+- Anonymous Event Tracking: Captures a diverse range of user events even before they log in, ensuring a comprehensive understanding of user behavior.
+Privacy Protection: Safeguards user anonymity by collecting and storing events without requiring personal information.
+- Event Synchronization: Upon meeting predefined conditions, securely transmits all anonymous events to the server, enabling data-driven decision-making.
+- Seamless User Transition: Effortlessly shifts from tracking anonymous events to associating events with specific users as they log in.
+- Enhanced Insights: Provides a holistic view of user engagement patterns, contributing to a more informed product optimization strategy.
+Implementing the Anonymous
+
+# Installation
+
+To install this SDK through NPM:
+
+```
+$ npm install @iterable/web-sdk
+```
+
+with yarn:
+
+```
+$ yarn add @iterable/web-sdk
+```
+
+or with a CDN:
+
+```js
+<script src="https://unpkg.com/@iterable/web-sdk/index.js"></script>
+```
+
+# Methods
+- [`getAnonCriteria`]
+- [`trackAnonEvent`]
+- [`trackAnonPurchaseEvent`]
+- [`trackAnonUpdateCart`]
+- [`createUser`]
+- [`syncEvents`]
+- [`checkCriteriaCompletion`]
+
+# Usage
+
+1. `trackAnonEvent`
+The 'trackAnonEvent' function within the Iterable-Web SDK empowers seamless tracking of diverse web events. Developers can enrich event data with specific metadata using the 'dataFields' attribute. This function intelligently distinguishes between logged-in and non-logged-in users, securely storing event data on the server post-login, while locally preserving data for anonymous users, ensuring comprehensive event monitoring in both scenarios.
+
+```ts
+const eventDetails = {
+    ...conditionalParams,
+    createNewFields: true,
+    createdAt: (Date.now() / 1000) | 0,
+    dataFields: { website: { domain: 'omni.com' }, eventType: 'track' },
+};
+
+await anonymousUserEventManager.trackAnonEvent(eventDetails);
+```
+
+2. `trackAnonPurchaseEvent`
+The 'trackAnonPurchaseEvent' function in the Iterable-Web SDK enables precise tracking of purchase-related web events. Developers can seamlessly include specific details about purchased items. With an innate understanding of user authentication status, the function securely stores event data on the server post-login, while also providing localized storage for non-logged-in users, guaranteeing comprehensive event monitoring in both usage scenarios.
+
+```ts
+const eventDetails = {
+    ...conditionalParams,
+    items: [{ name: purchaseItem, id: 'fdsafds', price: 100, quantity: 2 }],
+    total: 200
+}
+
+await anonymousUserEventManager.trackAnonPurchaseEvent(eventDetails);
+```
+
+3. `trackAnonUpdateCart`
+The 'trackAnonUpdateCart' function in the Iterable-Web SDK empowers effortless tracking of web events related to cart updates. Developers can accurately outline details for multiple items within the cart. It seamlessly handles data, securely transmitting events to the server upon user login, while also providing local storage for event details in the absence of user login, ensuring comprehensive event tracking in all scenarios.
+
+```ts
+const eventDetails = {
+    ...conditionalParams,
+    items: [{ name: cartItem, id: 'fdsafds', price: 100, quantity: 2 }]
+}
+
+await anonymousUserEventManager.trackAnonUpdateCart(eventDetails);
+```
+
+4. `createUser`
+The 'createUser' function in the Iterable-Web SDK facilitates user creation by assigning a unique user UUID. This function also supports the seamless updating of user details on the server, providing a comprehensive solution for managing user data within your application.
+
+```ts
+await anonymousUserEventManager.createUser(uuid, process.env.API_KEY);
+```
+
+5. `getAnonCriteria`
+The 'getAnonCriteria' function within the Iterable-Web SDK retrieves criteria from the server for matching purposes. It efficiently fetches and returns an array of criteria, providing developers with essential tools to enhance their application's functionality through data-driven decision-making.
+
+```ts
+const criteriaList = await anonymousUserEventManager.getAnonCriteria();
+```
+
+6. `checkCriteriaCompletion`
+The 'checkCriteriaCompletion' function in the Iterable-Web SDK performs a local assessment of stored events to determine if they fulfill specific criteria. If any of the stored events satisfy the criteria, the function returns 'true', offering developers a reliable method to validate the completion status of predefined conditions based on accumulated event data.
+
+```ts
+const isCriteriaCompleted = await anonymousUserEventManager.checkCriteriaCompletion();
+```
+
+7. `syncEvents`
+The 'syncEvents' function within the Iterable-Web SDK facilitates the seamless synchronization of locally stored events to the server while sequentially maintaining their order. This function efficiently transfers all accumulated events, clearing the local storage in the process, ensuring data consistency and integrity between the client and server-side environments.
+
+```ts
+await anonymousUserEventManager.syncEvents();
+```
+
+# Example
+
+```ts
+const eventDetails = {
+    ...conditionalParams,
+    createNewFields: true,
+    createdAt: (Date.now() / 1000) | 0,
+    userId: loggedInUser,
+    dataFields: { website: { domain: 'omni.com' }, eventType: 'track' },
+    deviceInfo: {
+        appPackageName: 'my-website'
+    }
+};
+
+await anonymousUserEventManager.trackAnonEvent(eventDetails);
+const isCriteriaCompleted = await anonymousUserEventManager.checkCriteriaCompletion();
+
+if (isCriteriaCompleted) {
+    const userId = uuidv4();
+    const App = await initialize(process.env.API_KEY);
+    await App.setUserID(userId);
+    await anonymousUserEventManager.createUser(userId, process.env.API_KEY);
+    setLoggedInUser({ type: 'user_update', data: userId });
+    await anonymousUserEventManager.syncEvents();
+}
+```

package.json

@@ -73,7 +73,7 @@
     "@types/jest": "^27.0.2",
     "@types/node": "^12.7.1",
     "@types/throttle-debounce": "^2.1.0",
-    "@types/uuid": "^9.0.2",
+    "@types/uuid": "^9.0.8",
     "@typescript-eslint/eslint-plugin": "^5.38.1",
     "@typescript-eslint/parser": "^5.38.1",
     "@webpack-cli/serve": "^1.6.0",

react-example/src/components/EventsForm.tsx

@@ -28,10 +28,9 @@ export const EventsForm: FC<Props> = ({
   );
 
   const [trackEvent, setTrackEvent] = useState<string>('');
-
   const [isTrackingEvent, setTrackingEvent] = useState<boolean>(false);
 
-  const handleTrack = (e: FormEvent<HTMLFormElement>) => {
+  const handleTrack = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setTrackingEvent(true);
 
@@ -50,7 +49,6 @@ export const EventsForm: FC<Props> = ({
       })
       .catch((e: any) => {
         setTrackResponse(JSON.stringify(e.response.data));
-        setTrackingEvent(false);
       });
   };
 

react-example/src/components/LoginFormWithoutJWT.tsx

@@ -0,0 +1,150 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { ChangeEvent, FC, FormEvent, useState } from 'react';
+import styled from 'styled-components';
+
+import { TextField as _TextField } from './TextField';
+import { Button as _Button } from './Button';
+
+import { useUser } from '../context/Users';
+
+const TextField = styled(_TextField)``;
+
+const Button = styled(_Button)`
+  margin-left: 0.4em;
+  max-width: 425px;
+`;
+
+const Form = styled.form`
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  justify-content: flex-end;
+  height: 100%;
+
+  ${TextField} {
+    align-self: stretch;
+    margin-top: 5px;
+  }
+`;
+
+const StyledDiv = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`;
+
+const Error = styled.div`
+  color: red;
+`;
+
+interface Props {
+  setEmail: (email: string) => Promise<void>;
+  setUserId: (userId: string, merge?: boolean) => Promise<void>;
+  logout: () => void;
+}
+
+export const LoginFormWithoutJWT: FC<Props> = ({
+  setEmail,
+  setUserId,
+  logout
+}) => {
+  const [useEmail, setUseEmail] = useState<boolean>(true);
+  const [user, updateUser] = useState<string>(process.env.LOGIN_EMAIL || '');
+
+  const [error, setError] = useState<string>('');
+
+  const [isEditingUser, setEditingUser] = useState<boolean>(false);
+
+  const { loggedInUser, setLoggedInUser } = useUser();
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const setUser = useEmail ? setEmail : setUserId;
+
+    setUser(user, true)
+      .then(() => {
+        setEditingUser(false);
+        setLoggedInUser({ type: 'user_update', data: user });
+      })
+      .catch(() => setError('Something went wrong!'));
+  };
+
+  const handleLogout = () => {
+    logout();
+    setLoggedInUser({ type: 'user_update', data: '' });
+  };
+
+  const handleEditUser = () => {
+    updateUser(loggedInUser);
+    setEditingUser(true);
+  };
+
+  const handleCancelEditUser = () => {
+    updateUser('');
+    setEditingUser(false);
+  };
+
+  const handleRadioChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setUseEmail(e.target.value === 'email');
+  };
+
+  const first5 = loggedInUser.substring(0, 5);
+  const last9 = loggedInUser.substring(loggedInUser.length - 9);
+
+  return (
+    <>
+      {loggedInUser && !isEditingUser ? (
+        <>
+          <Button onClick={handleEditUser}>
+            Logged in as {`${first5}...${last9}`} (change)
+          </Button>
+          <Button onClick={handleLogout}>Logout</Button>
+        </>
+      ) : (
+        <StyledDiv>
+          <Form>
+            <div>
+              <input
+                type="radio"
+                id="userId"
+                name="userId"
+                value="userId"
+                checked={!useEmail}
+                onChange={handleRadioChange}
+              />
+              <label>UserId</label>
+            </div>
+            <div>
+              <input
+                type="radio"
+                id="email"
+                name="email"
+                value="email"
+                checked={useEmail}
+                onChange={handleRadioChange}
+              />
+              <label>Email</label>
+            </div>
+          </Form>
+          <Form onSubmit={handleSubmit} data-qa-login-form>
+            <TextField
+              onChange={(e) => updateUser(e.target.value)}
+              value={user}
+              placeholder="e.g. [email protected]"
+              required
+              data-qa-login-input
+            />
+            <Button type="submit">{isEditingUser ? 'Change' : 'Login'}</Button>
+            {isEditingUser && (
+              <Button onClick={handleCancelEditUser}>Cancel</Button>
+            )}
+          </Form>
+          {error && <Error>{error}</Error>}
+        </StyledDiv>
+      )}
+    </>
+  );
+};
+
+export default LoginFormWithoutJWT;

react-example/src/index.tsx

@@ -14,6 +14,7 @@ import { EmbeddedMessage } from './views/Embedded';
 import { Link } from './components/Link';
 import { LoginForm } from './components/LoginForm';
 import { EmbeddedMsgs } from './views/EmbeddedMsgs';
+import AUTTesting from './views/AUTTesting';
 
 import { UserProvider } from './context/Users';
 import { EmbeddedMsgsImpressionTracker } from './views/EmbeddedMsgsImpressionTracker';
@@ -45,7 +46,8 @@ const HomeLink = styled(Link)`
     authToken: process.env.API_KEY || '',
     configOptions: {
       isEuIterableService: false,
-      dangerouslyAllowJsPopups: true
+      dangerouslyAllowJsPopups: true,
+      enableAnonTracking: true
     },
     generateJWT: ({ email, userID }) =>
       axios
@@ -54,7 +56,7 @@ const HomeLink = styled(Link)`
           {
             exp_minutes: 2,
             email,
-            user_id: userID,
+            userId: userID,
             jwt_secret: process.env.JWT_SECRET
           },
           {
@@ -98,6 +100,7 @@ const HomeLink = styled(Link)`
                 path="/embedded-msgs-impression-tracker"
                 element={<EmbeddedMsgsImpressionTracker />}
               />
+              <Route path="/aut-testing" element={<AUTTesting />} />
             </Routes>
           </RouteWrapper>
         </UserProvider>