Auto-track product demo events for Navattic events

README.md

@@ -10,6 +10,9 @@ JavaScript client for interacting with the Unify Intent API in the browser.
   - [Page Events](#page-view-events)
   - [Identify Events](#identify-events)
   - [Track Events](#track-events)
+- [Third-Party Tools](#third-party-tools)
+  - [Default](#default)
+  - [Navattic](#navattic)
 - [Configuration](#configuration)
 
 ## Installation
@@ -352,6 +355,32 @@ unify.startAutoTrack();
 unify.startAutoTrack({ clickTrackingSelectors: ['.custom-button'] });
 ```
 
+## Third-Party Tools
+
+The intent client ships with out-of-the-box event tracking for some popular third-party tools such as [Default](https://www.default.com/) and [Navattic](https://www.navattic.com/). If these tools are embedded into a page where the intent client is running, the client will track relevant events automatically. This behavior can be disabled with the `UnifyIntentClientConfig`. See [configuration](#configuration) for more details on configuring the intent client.
+
+### Default
+
+[Default](https://www.default.com/) is a popular tool for automating inbound form submission workflows. If you use a Default form wherever the intent client is running, the client will automatically fire track events for corresponding Default form events. The following Default form events are supported:
+
+| Default event                 | Unify track event name        | Unify track event properties                                      | Description                                                         |
+| ----------------------------- | ----------------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------- |
+| `default.form_completed`      | `Default Form Completed`      | `form`, `formId`                                                  | When a user completes all steps in a form.                          |
+| `default.form_page_submitted` | `Default Form Page Submitted` | `form`, `formId`, `pageNumber`                                    | When a user completes a single step of a mult-step form.            |
+| `default.meeting_booked`      | `Default Meeting Booked`      | `memberName`, `memberEmail`, `durationInMinutes`, `startDateTime` | When a user successfully books a meeting via the Default scheduler. |
+| `default.scheduler_closed`    | `Default Scheduler Closed`    |                                                                   | When a user closes the Default scheduler UI.                        |
+| `default.scheduler_displayed` | `Default Scheduler Displayed` | `formId`                                                          | When the Default scheduler UI is displayed to the user.             |
+
+### Navattic
+
+[Navattic](https://www.navattic.com/) is a popular tool for automating interactive product demos. If you use a Navattic demo wherever the intent client is running, the client will automatically fire track events for corresponding Navattic demo events. The following Navattic demo events are supported:
+
+| Navattic event  | Unify track event name      | Unify track event properties | Description                                         |
+| --------------- | --------------------------- | ---------------------------- | --------------------------------------------------- |
+| `START_FLOW`    | `Navattic Demo Started`     | `demo`                       | When a user starts a Navattic demo.                 |
+| `VIEW_STEP`     | `Navattic Demo Step Viewed` | `demo`, `step`               | When a user views a new step of the demo.           |
+| `COMPLETE_FLOW` | `Navattic Demo Completed`   | `demo`                       | When a user successfully completes the entire demo. |
+
 ## Configuration
 
 The following configuration options can be passed when initializing the client:
@@ -362,5 +391,7 @@ The following configuration options can be passed when initializing the client:
   - **Default**: `true` if the client is installed via the Unify JavaScript tag, `false` if installed via a package manager
 - `autoTrackOptions` - Options to customize the auto-tracking of user actions such as click events:
   - `clickTrackingSelectors` - Optional list of CSS selectors to customize which elements the client will automatically fire a `track` event for when clicked. Can be a list of string selectors, in which case the default track event name `Element Clicked` will be used as the event name. Can also be a list of objects containing a `selector` key and `eventName` key, in which case the value of `eventName` will be used as the event name.
+  - `defaultForms` - By default, the intent client will fire track events for [Default](https://www.default.com/) form events. This option can be used to customize which Default form events will result in Unify track events being fired or disable this behavior entirely.
+  - `navatticProductDemos`: By default, the intent client will fire track events for [Navattic](https://www.navattic.com/) product demos. This option can be used to customize which Navattic demo events will result in Unify track events being fired or disable this behavior entirely.
 - `sessionDurationMinutes` - Length in minutes that user sessions will persist when no activities are tracked. Activities include `page`, `identify,` and `track` activities.
   - **Default**: `30`

src/browser/index.ts

@@ -1,4 +1,5 @@
 import { UnifyIntentClient } from '../client';
+import { DEFAULT_AUTO_TRACK_OPTIONS } from '../client/constants';
 import { isIntentClient } from '../client/utils/helpers';
 import { logUnifyError } from '../client/utils/logging';
 
@@ -31,9 +32,7 @@ export const initBrowser = function () {
   new UnifyIntentClient(writeKey, {
     autoPage: true,
     autoIdentify: true,
-    autoTrackOptions: {
-      clickTrackingSelectors: [],
-    },
+    autoTrackOptions: DEFAULT_AUTO_TRACK_OPTIONS,
   }).mount();
 };
 

src/client/agent/constants.ts

@@ -65,6 +65,25 @@ export const UNIFY_CUSTOM_PROPERTY_DATA_ATTR_PREFIXES = [
 export const UNIFY_ELEMENT_EXCLUSION_DATA_ATTR = 'unifyExclude';
 
 export const DEFAULT_FORMS_IFRAME_ORIGIN = 'https://forms.default.com';
+export const DEFAULT_SCHEDULER_IFRAME_ORIGIN = 'https://scheduler.default.com';
+
+/**
+ * Some events are only emitted by one of the two Default iframe origins. Others
+ * are emitted by both. We don't want to double-process events emitted by
+ * both iframes, so this maps from event type to expected origin to use.
+ */
+export const DEFAULT_EVENT_TYPE_TO_ORIGIN_MAP: Record<
+  DefaultEventType,
+  typeof DEFAULT_FORMS_IFRAME_ORIGIN | typeof DEFAULT_SCHEDULER_IFRAME_ORIGIN
+> = {
+  [DefaultEventType.FORM_COMPLETED]: DEFAULT_FORMS_IFRAME_ORIGIN,
+  [DefaultEventType.FORM_PAGE_SUBMITTED]: DEFAULT_FORMS_IFRAME_ORIGIN,
+  [DefaultEventType.FORM_PAGE_SUBMITTED_V2]: DEFAULT_FORMS_IFRAME_ORIGIN,
+  [DefaultEventType.MEETING_BOOKED]: DEFAULT_SCHEDULER_IFRAME_ORIGIN,
+  [DefaultEventType.SCHEDULER_CLOSED]: DEFAULT_FORMS_IFRAME_ORIGIN,
+  [DefaultEventType.SCHEDULER_DISPLAYED]: DEFAULT_SCHEDULER_IFRAME_ORIGIN,
+};
+
 export const NAVATTIC_IFRAME_ORIGIN = 'https://capture.navattic.com';
 
 export const DEFAULT_FORM_EVENT_TYPES: DefaultEventType[] = [

src/client/agent/types/default.ts

@@ -7,17 +7,20 @@ export enum DefaultEventType {
   FORM_PAGE_SUBMITTED_V2 = 'default.form_page_submitted',
   MEETING_BOOKED = 'default.meeting_booked',
   SCHEDULER_DISPLAYED = 'default.scheduler_displayed',
+  SCHEDULER_CLOSED = 'default.scheduler_closed',
 }
 
 /**
  * Union of all events which can be emitted by Default.
  */
 export type DefaultEventData =
+  | string
   | DefaultFormCompletedEventData
   | DefaultFormPageSubmittedEventData
   | DefaultFormPageSubmittedV2EventData
   | DefaultMeetingBookedEventData
-  | DefaultSchedulerDisplayedEventData;
+  | DefaultSchedulerDisplayedEventData
+  | DefaultSchedulerClosedEventData;
 
 /**
  * Event emitted when a form is completed.
@@ -55,36 +58,44 @@ export interface DefaultSchedulerDisplayedEventData {
   payload: DefaultSchedulerDisplayedEventPayload;
 }
 
+/**
+ * Event emitted when the meeting scheduler is closed by a user.
+ */
+export interface DefaultSchedulerClosedEventData {
+  event: DefaultEventType.SCHEDULER_CLOSED;
+  payload: DefaultSchedulerClosedEventPayload;
+}
+
 export interface DefaultFormEventPayload {
   /**
    * The email of the user who submitted the form.
    */
-  email: string;
+  email?: string;
 
   /**
    * The ID of the form.
    */
-  formId: string;
+  formId?: string;
 
   /**
    * The name of the form.
    */
-  formName: string;
+  formName?: string;
 
   /**
    * The number of the page which the form was submitted on.
    */
-  pageNumber: number;
+  pageNumber?: number;
 
   /**
    * The date and time that the form was submitted.
    */
-  submittedAt: string;
+  submittedAt?: string;
 
   /**
    * List of user responses from the form.
    */
-  responses: string[];
+  responses?: string[];
 
   /**
    * Lead attribute data from the user responses.
@@ -96,59 +107,66 @@ export interface DefaultSchedulerDisplayedEventPayload {
   /**
    * The email of the user to whom the scheduler was displayed.
    */
-  email: string;
+  email?: string;
 
   /**
    * The ID of the form.
    */
-  formId: string;
+  formId?: string;
 
   /**
    * The date and time that the scheduler was displayed at.
    */
-  displayedAt: string;
+  displayedAt?: string;
+}
+
+export interface DefaultSchedulerClosedEventPayload {
+  /**
+   * The URL that the user was redirected to after closing.
+   */
+  redirectUrl?: string;
 }
 
 export interface DefaultMeetingBookedEventPayload {
   /**
    * The ID of the meeting which was booked.
    */
-  id: string;
+  id?: string;
 
   /**
    * The full name of the team member who the meeting was booked with.
    */
-  memberName: string;
+  memberName?: string;
 
   /**
    * The email of the team member who the meeting was booked with.
    */
-  memberEmail: string;
+  memberEmail?: string;
 
   /**
    * The email of the person who booked the meeting.
    */
-  leadEmail: string;
+  leadEmail?: string;
 
   /**
    * The duration of the booked meeting in minutes.
    */
-  durationInMinutes: number;
+  durationInMinutes?: number;
 
   /**
    * The start date and time of the booked meeting.
    */
-  startDateTime: string;
+  startDateTime?: string;
 
   /**
    * The title of the booked meeting.
    */
-  title: string;
+  title?: string;
 
   /**
    * The date and time that the meeting was booked at.
    */
-  bookedAt: string;
+  bookedAt?: string;
 }
 
 /**