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

Analytics events should be consumed in the PxpCheckout.initialize function. For example:

const pxpCheckoutSdk = PxpCheckout.initialize({
  environment: "test",
  session: sessionData,
  merchantShopperId: '123',
  ownerId: "UnityGroup",
  ownerType: "MerchantGroup",
  transactionData: {
    currency: 'USD' as CurrencyType,
    amount: payAmount,
    entryType: "Ecom",
    intent: "Authorisation",
    merchantTransactionId: "9af8af33-59d5-432d-bd35-96124930ec9f",
    merchantTransactionDate: () => new Date().toISOString(),
  },
  analyticsEvent: (analyticsEvent: AnalyticsEvent.BaseAnalyticsEvent) => {
    if (analyticsEvent instanceof ClickOncePaymentCompletionTimeAnalyticsEvent) {
      const completionTime = analyticsEvent.duration;
      if (completionTime > 5000) { // Alert if over 5s
        alertPerformanceTeam(analyticsEvent);
      }
    }
  }
});

Supported events

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

Event name	Structure
`BrowserData`	`eventName` `timestamp` `browserType` `browserVersion` `operatingSystem` `pageUrl` `sessionId`
`CardBrandType`	`eventName` `timestamp` `cardBrand` `sessionId` `pageUrl`
`CardDeletion`	`eventName` `timestamp` `cardStatus` `cardBrand` `sessionId` `pageUrl` `elementId`
`ChangePreselectedCardClick`	`eventName` `timestamp` `sessionId` `componentId` `pageUrl`
`ComponentAbandonment`	`eventName` `timestamp` `sessionId` `pageUrl` `componentType`
`ComponentError`	`eventName` `timestamp` `errorCode` `errorMessage` `sessionId` `componentId`
`ComponentInteraction`	`eventName` `timestamp` `interactionType` `componentId` `pageUrl` `sessionId` `componentType`
`ComponentLifecycle`	`eventName` `timestamp` `eventType` `sessionId` `componentId`
`CustomerClick`	`eventName` `timestamp` `elementId` `pageUrl` `sessionId`
`CvvFillTime`	`eventName` `startTimestamp` `endTimestamp` `duration` `pageUrl` `timestamp` `sessionId`
`DetectClick`	`elementId` `pageUrl` `sessionId` `timestamp` `eventName`
`DeviceType`	`eventName` `timestamp` `deviceType` `pageUrl` `sessionId`
`EditCardClick`	`eventName` `timestamp` `elementId` `pageUrl` `editedFields`
`ErrorMessageShown`	`eventName` `timestamp` `messageContent` `elementId` `pageUrl` `sessionId` `componentType`
`OneClickPaymentCompletionTime`	`eventName` `timestamp` `startTimestamp` `endTimestamp` `duration` `pageUrl` `sessionId`
`OneClickPaymentConfirmed`	`timestamp` `pageUrl` `componentType` `sessionId`
`PaymentAbandonment`	`eventName` `timestamp` `sessionId` `pageUrl` `componentType`
`PayButtonClick`	`eventName` `timestamp` `cardBrand` `cardType` `sessionId` `pageUrl` `componentId`
`PreInitiateAuthentication`	`eventName` `timestamp` `componentId` `sessionId` `transactionId`
`PreTokenization`	`eventName` `timestamp` `componentType` `sessionId` `transactionId`
`PostAuthentication`	`eventName` `timestamp` `componentType` `sessionId` `transactionId`
`PostAuthorisation`	`eventName` `timestamp` `componentType` `sessionId` `transactionId`
`PostInitiateAuthentication`	`eventName` `timestamp` `componentType` `sessionId` `transactionId`
`PostTokenization`	`eventName` `timestamp` `componentType` `sessionId` `transactionId`
`PreAuthentication`	`eventName` `timestamp` `componentType` `sessionId` `transactionId`
`PreAuthorisation`	`eventName` `timestamp` `componentType` `sessionId` `transactionId`
`SecurityCheck`	`eventName` `timestamp` `checkType` `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.