Tracking

Whenever a user interacts with the Sprii player, a tracking event is emittet. These events can be captured and used to fit your purposer.

The basic implemtation takes this form:

window.onSpriiReady = (sdk) => {
  ...
   sdk.on('cart.added-to-cart', (payload) => {
    //Your logic to capture the add to cart event
  });
  ...
};

Tracking events

The following events are supported:

Id	Description
cart.added-to-cart	Product added to cart
cart.opened-cart	Cart opened
catalog.opened-product-url	Product URL opened
catalog.returned-to-list	Returned to product list
catalog.scrolled-to-playing-product	Scrolled to currently playing product
catalog.switched-product-image	Switched product image
catalog.viewed-product-details	Viewed product details
checkout.began-checkout	Began checkout process
player.comments-hidden	Comments hidden in player
player.comments-shown	Comments shown in player
player.closed	Player closed
player.ended	Video ended in player
player.jumped-to-cue	Jumped to a specific cue point in video
player.maximized	Player maximized
player.minimized	Player minimized
player.play	Video started playing
player.paused	Video paused
player.muted	Player muted
player.unmuted	Player unmuted
user.commented	User left a comment
user.reacted	User reacted to content

Each event has different payload. This section shows payload for each event.

cart.added-to-cart

export type CardAddProductEventHandler = (payload: {
  trackingEvent: "cart.added-to-cart";
  trackingInfo: {
    product: {
      price: number;
      uid: string;
      sku: string;
      externalId: string;
      name: string;
      url: string;
      product_id: string;
      fromSdk: boolean;
    };
    qty: number;
    variantName: string;
    variantUid: string;
  };
  timestamp: number;
  pageUid: string;
  userUid: string;
  campaignUid?: string;
  checkoutUid?: string;
  eventUid?: string;
  eventStatus?: LiveEventCurrentStatus;
  videoAbsoluteTime?: number;
  currency?: Currency;
  playingProducts?: Array<{
    price: number;
    uid: string;
    sku: string;
    externalId: string;
    name: string;
    url: string;
    product_id: string;
    fromSdk: boolean;
  }>;
}) => void;

cart.opened-cart

export type CartOpenEventHandler = (payload: {
  trackingEvent: "cart.opened-cart";
  timestamp: number;
  pageUid: string;
  userUid: string;
  campaignUid?: string;
  checkoutUid?: string;
  eventUid?: string;
  eventStatus?: LiveEventCurrentStatus;
  videoAbsoluteTime?: number;
  currency?: Currency;
  playingProducts?: Array<{
    price: number;
    uid: string;
    sku: string;
    externalId: string;
    name: string;
    url: string;
    product_id: string;
    fromSdk: boolean;
  }>;
}) => void;

catalog.opened-product-url

export type CatalogOpenedProductUrlEventHandler = (payload: {
  trackingEvent: "catalog.opened-product-url";
  trackingInfo: {
    product: {
      price: number;
      uid: string;
      sku: string;
      externalId: string;
      name: string;
      url: string;
      product_id: string;
      fromSdk: boolean;
    };
  };
  timestamp: number;
  pageUid: string;
  userUid: string;
  campaignUid?: string;
  checkoutUid?: string;
  eventUid?: string;
  eventStatus?: LiveEventCurrentStatus;
  videoAbsoluteTime?: number;
  currency?: Currency;
  playingProducts?: Array<{
    price: number;
    uid: string;
    sku: string;
    externalId: string;
    name: string;
    url: string;
    product_id: string;
    fromSdk: boolean;
  }>;
}) => void;

catalog.returned-to-list

export type CatalogReturnedToListEventHandler = (payload: {
  trackingEvent: "catalog.returned-to-list";
  trackingInfo: {
    product: {
      price: number;
      uid: string;
      sku: string;
      externalId: string;
      name: string;
      url: string;
      product_id: string;
      fromSdk: boolean;
    };
  };
  timestamp: number;
  pageUid: string;
  userUid: string;
  campaignUid?: string;
  checkoutUid?: string;
  eventUid?: string;
  eventStatus?: LiveEventCurrentStatus;
  videoAbsoluteTime?: number;
  currency?: Currency;
  playingProducts?: Array<{
    price: number;
    uid: string;
    sku: string;
    externalId: string;
    name: string;
    url: string;
    product_id: string;
    fromSdk: boolean;
  }>;
}) => void;

catalog.scrolled-to-playing-product

export type CatalogScrolledToPlayingProductEventHandler = (payload: {
  trackingEvent: "catalog.scrolled-to-playing-product";
  trackingInfo: {
    product: {
      price: number;
      uid: string;
      sku: string;
      externalId: string;
      name: string;
      url: string;
      product_id: string;
      fromSdk: boolean;
    };
  };
  timestamp: number;
  pageUid: string;
  userUid: string;
  campaignUid?: string;
  checkoutUid?: string;
  eventUid?: string;
  eventStatus?: LiveEventCurrentStatus;
  videoAbsoluteTime?: number;
  currency?: Currency;
  playingProducts?: Array<{
    price: number;
    uid: string;
    sku: string;
    externalId: string;
    name: string;
    url: string;
    product_id: string;
    fromSdk: boolean;
  }>;
}) => void;

catalog.switched-product-image

export type CatalogSwitchedProductImageEventHandler = (payload: {
  trackingEvent: "catalog.switched-product-image";
  trackingInfo: {
    product: {
      price: number;
      uid: string;
      sku: string;
      externalId: string;
      name: string;
      url: string;
      product_id: string;
      fromSdk: boolean;
    };
    url: string;
  };
  timestamp: number;
  pageUid: string;
  userUid: string;
  campaignUid?: string;
  checkoutUid?: string;
  eventUid?: string;
  eventStatus?: LiveEventCurrentStatus;
  videoAbsoluteTime?: number;
  currency?: Currency;
  playingProducts?: Array<{
    price: number;
    uid: string;
    sku: string;
    externalId: string;
    name: string;
    url: string;
    product_id: string;
    fromSdk: boolean;
  }>;
}) => void;

catalog.viewed-product-details

export type CatalogViewedProductDetailsEventHandler = (payload: {
  trackingEvent: "catalog.viewed-product-details";
  trackingInfo: {
    product: {
      price: number;
      uid: string;
      sku: string;
      externalId: string;
      name: string;
      url: string;
      product_id: string;
      fromSdk: boolean;
    };
  };
  timestamp: number;
  pageUid: string;
  userUid: string;
  campaignUid?: string;
  checkoutUid?: string;
  eventUid?: string;
  eventStatus?: LiveEventCurrentStatus;
  videoAbsoluteTime?: number;
  currency?: Currency;
  playingProducts?: Array<{
    price: number;
    uid: string;
    sku: string;
    externalId: string;
    name: string;
    url: string;
    product_id: string;
    fromSdk: boolean;
  }>;
}) => void;

checkout.began-checkout

export type CheckoutBeganCheckoutEventHandler = (payload: {
  trackingEvent: "checkout.began-checkout";
  trackingInfo: {
    reservation: {
      totalPrice: number;
      items: Array<{
        product: {
          price: number;
          uid: string;
          sku: string;
          externalId: string;
          name: string;
          url: string;
          product_id: string;
          fromSdk: boolean;
        };
        qty: number;
        totalPrice: number;
        unitPrice: number;
        variantName: string;
        variantUid: string;
      }>;
    };
  };
  timestamp: number;
  pageUid: string;
  userUid: string;
  campaignUid?: string;
  checkoutUid?: string;
  eventUid?: string;
  eventStatus?: LiveEventCurrentStatus;
  videoAbsoluteTime?: number;
  currency?: Currency;
  playingProducts?: Array<{
    price: number;
    uid: string;
    sku: string;
    externalId: string;
    name: string;
    url: string;
    product_id: string;
    fromSdk: boolean;
  }>;
}) => void;

player.closed

export type PlayerClosedEventHandler = (payload: {
  trackingEvent: "player.closed";
  timestamp: number;
  pageUid: string;
  userUid: string;
  campaignUid?: string;
  checkoutUid?: string;
  eventUid?: string;
  eventStatus?: LiveEventCurrentStatus;
  videoAbsoluteTime?: number;
  currency?: Currency;
  playingProducts?: Array<{
    price: number;
    uid: string;
    sku: string;
    externalId: string;
    name: string;
    url: string;
    product_id: string;
    fromSdk: boolean;
  }>;
}) => void;

player.comments-hidden

export type PlayerCommentsHiddenEventHandler = (payload: {
  trackingEvent: "player.comments-hidden";
  timestamp: number;
  pageUid: string;
  userUid: string;
  campaignUid?: string;
  checkoutUid?: string;
  eventUid?: string;
  eventStatus?: LiveEventCurrentStatus;
  videoAbsoluteTime?: number;
  currency?: Currency;
  playingProducts?: Array<{
    price: number;
    uid: string;
    sku: string;
    externalId: string;
    name: string;
    url: string;
    product_id: string;
    fromSdk: boolean;
  }>;
}) => void;

player.comments-shown

export type PlayerCommentsShownEventHandler = (payload: {
  trackingEvent: "player.comments-shown";
  trackingInfo: { unseenComments: number };
  timestamp: number;
  pageUid: string;
  userUid: string;
  campaignUid?: string;
  checkoutUid?: string;
  eventUid?: string;
  eventStatus?: LiveEventCurrentStatus;
  videoAbsoluteTime?: number;
  currency?: Currency;
  playingProducts?: Array<{
    price: number;
    uid: string;
    sku: string;
    externalId: string;
    name: string;
    url: string;
    product_id: string;
    fromSdk: boolean;
  }>;
}) => void;

player.ended

export type PlayerEndedEventHandler = (payload: {
  trackingEvent: "player.ended";
  timestamp: number;
  pageUid: string;
  userUid: string;
  campaignUid?: string;
  checkoutUid?: string;
  eventUid?: string;
  eventStatus?: LiveEventCurrentStatus;
  videoAbsoluteTime?: number;
  currency?: Currency;
  playingProducts?: Array<{
    price: number;
    uid: string;
    sku: string;
    externalId: string;
    name: string;
    url: string;
    product_id: string;
    fromSdk: boolean;
  }>;
}) => void;

player.jumped-to-cue

export type PlayerJumpedToCueEventHandler = (payload: {
  trackingEvent: "player.jumped-to-cue";
  trackingInfo: {
    product: {
      price: number;
      uid: string;
      sku: string;
      externalId: string;
      name: string;
      url: string;
      product_id: string;
      fromSdk: boolean;
    };
    cue: { start: number; end: number };
  };
  timestamp: number;
  pageUid: string;
  userUid: string;
  campaignUid?: string;
  checkoutUid?: string;
  eventUid?: string;
  eventStatus?: LiveEventCurrentStatus;
  videoAbsoluteTime?: number;
  currency?: Currency;
  playingProducts?: Array<{
    price: number;
    uid: string;
    sku: string;
    externalId: string;
    name: string;
    url: string;
    product_id: string;
    fromSdk: boolean;
  }>;
}) => void;

player.maximized

export type PlayerMaximizedEventHandler = (payload: {
  trackingEvent: "player.maximized";
  timestamp: number;
  pageUid: string;
  userUid: string;
  campaignUid?: string;
  checkoutUid?: string;
  eventUid?: string;
  eventStatus?: LiveEventCurrentStatus;
  videoAbsoluteTime?: number;
  currency?: Currency;
  playingProducts?: Array<{
    price: number;
    uid: string;
    sku: string;
    externalId: string;
    name: string;
    url: string;
    product_id: string;
    fromSdk: boolean;
  }>;
}) => void;

player.minimized

export type PlayerMinimizedEventHandler = (payload: {
  trackingEvent: "player.minimized";
  timestamp: number;
  pageUid: string;
  userUid: string;
  campaignUid?: string;
  checkoutUid?: string;
  eventUid?: string;
  eventStatus?: LiveEventCurrentStatus;
  videoAbsoluteTime?: number;
  currency?: Currency;
  playingProducts?: Array<{
    price: number;
    uid: string;
    sku: string;
    externalId: string;
    name: string;
    url: string;
    product_id: string;
    fromSdk: boolean;
  }>;
}) => void;

player.muted

export type PlayerMutedEventHandler = (payload: {
  trackingEvent: "player.muted";
  timestamp: number;
  pageUid: string;
  userUid: string;
  campaignUid?: string;
  checkoutUid?: string;
  eventUid?: string;
  eventStatus?: LiveEventCurrentStatus;
  videoAbsoluteTime?: number;
  currency?: Currency;
  playingProducts?: Array<{
    price: number;
    uid: string;
    sku: string;
    externalId: string;
    name: string;
    url: string;
    product_id: string;
    fromSdk: boolean;
  }>;
}) => void;

player.play

export type PlayerPlayEventHandler = (payload: {
  trackingEvent: "player.play";
  timestamp: number;
  pageUid: string;
  userUid: string;
  campaignUid?: string;
  checkoutUid?: string;
  eventUid?: string;
  eventStatus?: LiveEventCurrentStatus;
  videoAbsoluteTime?: number;
  currency?: Currency;
  playingProducts?: Array<{
    price: number;
    uid: string;
    sku: string;
    externalId: string;
    name: string;
    url: string;
    product_id: string;
    fromSdk: boolean;
  }>;
}) => void;

player.paused

export type PlayerPausedEventHandler = (payload: {
  trackingEvent: "player.paused";
  timestamp: number;
  pageUid: string;
  userUid: string;
  campaignUid?: string;
  checkoutUid?: string;
  eventUid?: string;
  eventStatus?: LiveEventCurrentStatus;
  videoAbsoluteTime?: number;
  currency?: Currency;
  playingProducts?: Array<{
    price: number;
    uid: string;
    sku: string;
    externalId: string;
    name: string;
    url: string;
    product_id: string;
    fromSdk: boolean;
  }>;
}) => void;

player.unmuted

export type PlayerUnmutedEventHandler = (payload: {
  trackingEvent: "player.unmuted";
  timestamp: number;
  pageUid: string;
  userUid: string;
  campaignUid?: string;
  checkoutUid?: string;
  eventUid?: string;
  eventStatus?: LiveEventCurrentStatus;
  videoAbsoluteTime?: number;
  currency?: Currency;
  playingProducts?: Array<{
    price: number;
    uid: string;
    sku: string;
    externalId: string;
    name: string;
    url: string;
    product_id: string;
    fromSdk: boolean;
  }>;
}) => void;

user.commented

export type UserCommentedEventHandler = (payload: {
  trackingEvent: "user.commented";
  timestamp: number;
  pageUid: string;
  userUid: string;
  campaignUid?: string;
  checkoutUid?: string;
  eventUid?: string;
  eventStatus?: LiveEventCurrentStatus;
  videoAbsoluteTime?: number;
  currency?: Currency;
  playingProducts?: Array<{
    price: number;
    uid: string;
    sku: string;
    externalId: string;
    name: string;
    url: string;
    product_id: string;
    fromSdk: boolean;
  }>;
}) => void;

user.reacted

export type UserReactedEventHandler = (payload: {
  trackingEvent: "user.reacted";
  trackingInfo: { type: string };
  timestamp: number;
  pageUid: string;
  userUid: string;
  campaignUid?: string;
  checkoutUid?: string;
  eventUid?: string;
  eventStatus?: LiveEventCurrentStatus;
  videoAbsoluteTime?: number;
  currency?: Currency;
  playingProducts?: Array<{
    price: number;
    uid: string;
    sku: string;
    externalId: string;
    name: string;
    url: string;
    product_id: string;
    fromSdk: boolean;
  }>;
}) => void;