Overview

Analytics events are structured data objects that get automatically triggered when significant actions or states occur within components. These allow you to monitor every aspect of the payment journey.

Analytics events allow you to:

Gain transparency with native transaction tracking in PXP reports.
Optimise conversion rates and reduce drop-offs, thanks to actionable insights.
Feed real-time data into your analytics and CRM systems.

Consume an event

To consume an analytics event, use the following snippet:

analyticsEvent(analyticsEvent: any) {
  if (analyticsEvent instanceof SecurityCheckAnalyticsEvent) {
    console.log("{eventName}", analyticsEvent);
  }
}

Supported events

The following table lists all the available events and describes the structure of each event.

Event name	Structure
`BrowserData`	For card-on-file and new card components: `eventName` `timestamp` `browserType` `browserVersion` `operatingSystem` `pageUrl` For click-once components: `eventName` `timestamp` `browserType` `browserVersion` `operatingSystem` `pageUrl` `componentType` `sessionId`
`CardBrandType`	`eventName` `timestamp` `cardBrand` `pageUrl`
`CardDeletion`	`eventName` `timestamp` `cardStatus` `cardBrand` `pageUrl` `elementId`
`CardValidationError`	For card-on-file components: `eventName` `timestamp` `errorType` `errorMessage` `componentId` For click-once components: `eventName` `timestamp` `messageContent` `elementId` `pageUrl` `componentType` `sessionId`
`ChangePreselectedCardClick`	`eventName` `timestamp` `componentId` `pageUrl`
`ComponentAbandonment`	For card-on-file components: `eventName` `timestamp` `formId` `pageUrl` For new card components: `eventName` `timestamp` `formId` `pageUrl` `componentType`
`ComponentError`	`eventName` `timestamp` `errorCode` `errorMessage` `componentId`
`ComponentInteraction`	`eventName` `timestamp` `interactionType` `componentId` `pageUrl`
`ComponentLifecycle`	`eventName` `timestamp` `eventType` `componentId`
`CustomerClick`	`eventName` `timestamp` `elementId` `pageUrl`
`CvvFillTime`	`eventName` `startTimestamp` `endTimestamp` `duration` `pageUrl`
`DetectClick`	`elementId` `pageUrl` `sessionId`
`DeviceType`	For card-on-file and new card components: `eventName` `timestamp` `deviceType` `pageUrl` For click-once components: `eventName` `timestamp` `deviceType` `pageUrl` `componentType` `sessionId`
`EditCardClick`	`eventName` `timestamp` `elementId` `pageUrl` `editedFields`
`ErrorMessageShown`	`eventName` `timestamp` `messageContent` `elementId` `pageUrl`
`OneClickPaymentAbandonment`	`timestamp` `pageUrl` `componentType` `sessionId`
`OneClickPaymentCompletionTime`	`startTimestamp` `endTimestamp` `duration` `pageUrl` `sessionId`
`OneClickPaymentConfirmed`	`timestamp` `pageUrl` `componentType` `sessionId`
`PaymentAbandonment`	`sessionId` `pageUrl` `componentType`
`PayButtonClick`	`eventName` `timestamp` `cardBrand` `cardType` `componentId` `pageUrl`
`PreInitiateAuthentication`	`eventName` `componentId` `sessionId` `transactionId`
`PreTokenization`	`eventName` `timestamp` `componentId` `sessionId` `transactionId`
`PostAuthentication`	`eventName` `timestamp` `componentId` `sessionId` `transactionId`
`PostAuthorisation`	`eventName` `timestamp` `componentId` `sessionId` `transactionId`
`PostInitiateAuthentication`	`eventName` `timestamp` `componentId` `sessionId` `transactionId`
`PostTokenization`	`eventName` `timestamp` `componentId` `sessionId` `transactionId`
`PreAuthentication`	`eventName` `timestamp` `componentId` `sessionId` `transactionId`
`PreAuthorisation`	`eventName` `timestamp` `componentId` `sessionId` `transactionId`
`SecurityCheck`	`eventName` `timestamp` `checkType` `pageUrl`
`ValidationMessageShown`	`eventName` `timestamp` `messageContent` `elementId` `pageUrl`

Event data

The following table describes the different types of data that can be returned by events.

Name	Description
`browserType`	The browser type (e.g., `Chrome`).
`browserVersion`	The browser version.
`cardBrand`	The card brand (e.g., `Visa` or `Mastercard`).
`cardStatus`	The state of the card (e.g., `Expired`).
`componentId`	The component's unique identifier.
`componentType`	The component type (e.g., `NewCard`).
`duration`	The total time taken to complete a payment or fill in a CVV.
`editedFields`	The fields that were edited.
`elementId`	The element's unique identifier.
`endTimestamp`	The date and time when the customer starts the payment process.
`errorCode`	The error code.
`errorMessage`	The description of the error.
`eventName`	The name of the event.
`eventType`	The type of lifecycle event (e.g., mount or unmount).
`formId`	The form's unique identifier.
`interactionType`	The type of interaction (e.g., `Focus`).
`messageContent`	The content of the message.
`operatingSystem`	The operating system.
`pageUrl`	The URL of the page that the event occurred on.
`sessionId`	The session's unique identifier.
`startTimestamp`	The date and time when the customer completes the payment process.
`timestamp`	The date and time when the event occurred.