diff --git a/packages/plugin-autocapture-browser/package.json b/packages/plugin-autocapture-browser/package.json index 2a2bae9e6..bfd89589c 100644 --- a/packages/plugin-autocapture-browser/package.json +++ b/packages/plugin-autocapture-browser/package.json @@ -40,7 +40,7 @@ }, "dependencies": { "@amplitude/analytics-client-common": ">=1 <3", - "@amplitude/analytics-types": ">=1 <3", + "@amplitude/analytics-types": ">=2.8.1 <3", "rxjs": "^7.8.1", "tslib": "^2.4.1" }, diff --git a/packages/plugin-autocapture-browser/src/autocapture-plugin.ts b/packages/plugin-autocapture-browser/src/autocapture-plugin.ts index 1b307899c..4cce16920 100644 --- a/packages/plugin-autocapture-browser/src/autocapture-plugin.ts +++ b/packages/plugin-autocapture-browser/src/autocapture-plugin.ts @@ -1,5 +1,15 @@ /* eslint-disable no-restricted-globals */ -import { BrowserClient, BrowserConfig, EnrichmentPlugin, Logger } from '@amplitude/analytics-types'; +import { + BrowserClient, + BrowserConfig, + EnrichmentPlugin, + Logger, + ElementInteractionsOptions, + DEFAULT_CSS_SELECTOR_ALLOWLIST, + DEFAULT_DATA_ATTRIBUTE_PREFIX, + DEFAULT_ACTION_CLICK_ALLOWLIST, + ActionType, +} from '@amplitude/analytics-types'; import * as constants from './constants'; import { fromEvent, map, Observable, Subscription } from 'rxjs'; import { @@ -11,8 +21,7 @@ import { createShouldTrackEvent, getClosestElement, } from './helpers'; -import { Messenger, WindowMessenger } from './libs/messenger'; -import { ActionType } from './typings/autocapture'; +import { WindowMessenger } from './libs/messenger'; import { getHierarchy } from './hierarchy'; import { trackClicks } from './autocapture/track-click'; import { trackChange } from './autocapture/track-change'; @@ -52,77 +61,10 @@ interface NavigateEvent extends Event { type BrowserEnrichmentPlugin = EnrichmentPlugin; -export const DEFAULT_CSS_SELECTOR_ALLOWLIST = [ - 'a', - 'button', - 'input', - 'select', - 'textarea', - 'label', - 'video', - 'audio', - '[contenteditable="true" i]', - '[data-amp-default-track]', - '.amp-default-track', -]; -export const DEFAULT_ACTION_CLICK_ALLOWLIST = ['div', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']; -export const DEFAULT_DATA_ATTRIBUTE_PREFIX = 'data-amp-track-'; - -export interface AutocaptureOptions { - /** - * List of CSS selectors to allow auto tracking on. - * When provided, allow elements matching any selector to be tracked. - * Default is ['a', 'button', 'input', 'select', 'textarea', 'label', '[data-amp-default-track]', '.amp-default-track']. - */ - cssSelectorAllowlist?: string[]; - - /** - * List of page URLs to allow auto tracking on. - * When provided, only allow tracking on these URLs. - * Both full URLs and regex are supported. - */ - pageUrlAllowlist?: (string | RegExp)[]; - - /** - * Function to determine whether an event should be tracked. - * When provided, this function overwrites all other allowlists and configurations. - * If the function returns true, the event will be tracked. - * If the function returns false, the event will not be tracked. - * @param actionType - The type of action that triggered the event. - * @param element - The element that triggered the event. - */ - shouldTrackEventResolver?: (actionType: ActionType, element: Element) => boolean; - - /** - * Prefix for data attributes to allow auto collecting. - * Default is 'data-amp-track-'. - */ - dataAttributePrefix?: string; - - /** - * Options for integrating visual tagging selector. - */ - visualTaggingOptions?: { - enabled?: boolean; - messenger?: Messenger; - }; - - /** - * Debounce time in milliseconds for tracking events. - * This is used to detect rage clicks. - */ - debounceTime?: number; - - /** - * CSS selector allowlist for tracking clicks that result in a DOM change/navigation on elements not already allowed by the cssSelectorAllowlist - */ - actionClickAllowlist?: string[]; -} - export type AutoCaptureOptionsWithDefaults = Required< - Pick + Pick > & - AutocaptureOptions; + ElementInteractionsOptions; export enum ObservablesEnum { ClickObservable = 'clickObservable', @@ -164,7 +106,7 @@ export function isElementBasedEvent(event: BaseTimestampedEvent): event is return event.type === 'click' || event.type === 'change'; } -export const autocapturePlugin = (options: AutocaptureOptions = {}): BrowserEnrichmentPlugin => { +export const autocapturePlugin = (options: ElementInteractionsOptions = {}): BrowserEnrichmentPlugin => { const { dataAttributePrefix = DEFAULT_DATA_ATTRIBUTE_PREFIX, visualTaggingOptions = { diff --git a/packages/plugin-autocapture-browser/src/autocapture/track-action-click.ts b/packages/plugin-autocapture-browser/src/autocapture/track-action-click.ts index c2b0b65f8..9623858bd 100644 --- a/packages/plugin-autocapture-browser/src/autocapture/track-action-click.ts +++ b/packages/plugin-autocapture-browser/src/autocapture/track-action-click.ts @@ -5,8 +5,7 @@ import { ObservablesEnum, } from 'src/autocapture-plugin'; import { filter, map, merge, switchMap, take, timeout, EMPTY } from 'rxjs'; -import { ActionType } from 'src/typings/autocapture'; -import { BrowserClient } from '@amplitude/analytics-types'; +import { BrowserClient, ActionType } from '@amplitude/analytics-types'; import { filterOutNonTrackableEvents, getClosestElement, shouldTrackEvent } from '../helpers'; import { AMPLITUDE_ELEMENT_CLICKED_EVENT } from '../constants'; diff --git a/packages/plugin-autocapture-browser/src/autocapture/track-change.ts b/packages/plugin-autocapture-browser/src/autocapture/track-change.ts index af1a3a31f..2fdf285fa 100644 --- a/packages/plugin-autocapture-browser/src/autocapture/track-change.ts +++ b/packages/plugin-autocapture-browser/src/autocapture/track-change.ts @@ -1,7 +1,6 @@ import { AllWindowObservables } from 'src/autocapture-plugin'; import { filter } from 'rxjs'; -import { ActionType } from 'src/typings/autocapture'; -import { BrowserClient } from '@amplitude/analytics-types'; +import { BrowserClient, ActionType } from '@amplitude/analytics-types'; import { filterOutNonTrackableEvents, shouldTrackEvent } from '../helpers'; import { AMPLITUDE_ELEMENT_CHANGED_EVENT } from '../constants'; diff --git a/packages/plugin-autocapture-browser/src/helpers.ts b/packages/plugin-autocapture-browser/src/helpers.ts index 4883f067d..8647af0c9 100644 --- a/packages/plugin-autocapture-browser/src/helpers.ts +++ b/packages/plugin-autocapture-browser/src/helpers.ts @@ -1,9 +1,8 @@ /* eslint-disable no-restricted-globals */ import { finder } from './libs/finder'; import * as constants from './constants'; -import { Logger } from '@amplitude/analytics-types'; -import { AutocaptureOptions, ElementBasedEvent, ElementBasedTimestampedEvent } from './autocapture-plugin'; -import { ActionType } from './typings/autocapture'; +import { Logger, ElementInteractionsOptions, ActionType } from '@amplitude/analytics-types'; +import { ElementBasedEvent, ElementBasedTimestampedEvent } from './autocapture-plugin'; export type JSONValue = string | number | boolean | null | { [x: string]: JSONValue } | Array; @@ -12,7 +11,7 @@ const SENSITIVE_TAGS = ['input', 'select', 'textarea']; export type shouldTrackEvent = (actionType: ActionType, element: Element) => boolean; export const createShouldTrackEvent = ( - autocaptureOptions: AutocaptureOptions, + autocaptureOptions: ElementInteractionsOptions, allowlist: string[], // this can be any type of css selector allow list ): shouldTrackEvent => { return (actionType: ActionType, element: Element) => { diff --git a/packages/plugin-autocapture-browser/src/index.ts b/packages/plugin-autocapture-browser/src/index.ts index d0fd5da80..126497315 100644 --- a/packages/plugin-autocapture-browser/src/index.ts +++ b/packages/plugin-autocapture-browser/src/index.ts @@ -1,8 +1,2 @@ -export { - autocapturePlugin as plugin, - autocapturePlugin, - DEFAULT_CSS_SELECTOR_ALLOWLIST, - DEFAULT_DATA_ATTRIBUTE_PREFIX, - AutocaptureOptions, -} from './autocapture-plugin'; -export { Messenger, Action, ActionData, Message, WindowMessenger } from './libs/messenger'; +export { autocapturePlugin as plugin, autocapturePlugin } from './autocapture-plugin'; +export { Action, ActionData, Message, WindowMessenger } from './libs/messenger'; diff --git a/packages/plugin-autocapture-browser/src/libs/messenger.ts b/packages/plugin-autocapture-browser/src/libs/messenger.ts index 3d73ccd9b..acad4eda8 100644 --- a/packages/plugin-autocapture-browser/src/libs/messenger.ts +++ b/packages/plugin-autocapture-browser/src/libs/messenger.ts @@ -6,13 +6,7 @@ import { AMPLITUDE_VISUAL_TAGGING_HIGHLIGHT_CLASS, } from '../constants'; import { asyncLoadScript, generateUniqueId, getEventTagProps } from '../helpers'; -import { Logger } from '@amplitude/analytics-types'; -import { ActionType } from '../typings/autocapture'; - -export interface Messenger { - logger?: Logger; - setup: () => void; -} +import { Logger, Messenger, ActionType } from '@amplitude/analytics-types'; export type Action = | 'ping' diff --git a/packages/plugin-autocapture-browser/src/typings/autocapture.ts b/packages/plugin-autocapture-browser/src/typings/autocapture.ts index 7f37fdb33..e70465675 100644 --- a/packages/plugin-autocapture-browser/src/typings/autocapture.ts +++ b/packages/plugin-autocapture-browser/src/typings/autocapture.ts @@ -1,5 +1,3 @@ -export type ActionType = 'click' | 'change'; - export type HierarchyNode = { tag: string; id?: string; diff --git a/yarn.lock b/yarn.lock index 03f81233b..981997ee1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -66,6 +66,11 @@ "@amplitude/analytics-types" "^2.6.0" tslib "^2.4.1" +"@amplitude/analytics-types@>=2.8.1 <3": + version "2.8.1" + resolved "https://registry.yarnpkg.com/@amplitude/analytics-types/-/analytics-types-2.8.1.tgz#baf7b23b3bccc72df9ef5b0464f4dd6b82c0f37a" + integrity sha512-q+JRrw92VZmCuFzuaL7gBsRidNtqsjLRqNfLNH5RtbKdG6hmx/UEVIGDm/NeLlH4pQokCTHUWeiS+cbmOkgOwQ== + "@amplitude/analytics-types@^2.1.1": version "2.1.1" resolved "https://registry.yarnpkg.com/@amplitude/analytics-types/-/analytics-types-2.1.1.tgz#89ef85397c4e6bc3a6aeaae4f3d4354ebb7de297"