Interaction Tracking

Overview

Snippet Interaction Events track user interactions with the tiun snippet, allowing you to integrate this data into your preferred tracking system.

Tracking Event Structure

To monitor snippet interactions, observe the TIUN_EVENT that contains TIUN_SNIPPET_INTERACTION. This event provides an interactionType field with detailed information that can be forwarded to your preferred tracking system.

Implementation Example

window.addEventListener('message', (event) => {
  if (event.data?.type === 'TIUN_EVENT') {
    if (event.data?.content === 'TIUN_SNIPPET_INTERACTION') {

      var interactionType = event.data.interactionType; // string
      var paymentMethod = event.data.paymentMethod; // string or undefined
      // TODO: send interactionType (and paymentMethod where available)
      //       to your tracking system

    }
  }
});

Supported Interaction Types

You can pass the interactionType value directly to your tracking system. Below are the expected values.

All types that have a ✔️ we pass the payment method type, which could be for example: 'Paypal', 'Card' etc.

Interaction Type	Interaction Description	paymentMethod Support
ShowConnectionDetails	Primary CTA click to show connection details (e.g., payment methods, legal toggles).
HideConnectionDetails	Close the connection details view to return to the main snippet.
WatchExplainerVideo	Play the "How it works" video.
GetHelp	Click "Get help" or "More info" to get additional information (varies by snippet version).
PricingDetails	Show detailed pricing information (not available in all versions).
SupportDetails	Show support information (not available in all versions).
SwitchPaymentMethod	Select a different payment method on the connection details screen.	✔️
LegalInfo	Click the link next to the legal terms toggle to open legal details.
NewsletterInfo	Click the link next to the newsletter opt-in toggle to open newsletter details (not always shown).
ShowQrCode	Show the QR code to connect using a different (mobile) device (e.g., with Apple Pay).	✔️
HideQrCode	Close the QR code view to return to connection details.	✔️
Connect	Click the primary CTA on the connection details screen to continue with the selected payment method and start creating the connection.	✔️
StartSession	Recurring user click to start a new session.