Product Advisor Event Tracking Integration

This guide explains how to integrate the Product Advisor event to send analytic information to your analytics platform.

These events provide detailed insights into the behavior and performance of Product Advisors on your platform, enabling seamless integration with third-party analytics systems.

The Product Advisor component generates events that contain rich data about user interactions and advisor performance. By hooking into these events, you can relay the information to your preferred analytics platform for deeper insights.

Example Product Advisor Track Event

Below is a structure of the FinderTrackEvent object in TypeScript, which is emitted whenever a relevant interaction occurs:

type FinderTrackEvent = {
  id: string; // unique identifier of the finder
  variant: string; // unique identifier of the finder variant (for A/B testing)
  activation: string; // what activated this finder (e.g., 'ribbon' or 'custom')
  open: boolean; // is the finder opened or closed
  name: string; // name of the finder
  version: number; // current version of the finder
  page: string; // component currently shown to the end-user (e.g., landing or loading)
  question: string; // current question the user is on (e.g., 'gender' or 'goal')
  answers: Record<string, string>; // all answers previously given, e.g., {'landing': '1', 'gender': 'male'}
  products: string[]; // if the page is a result page, contains the product-IDs advised
};

window.crobox = window.crobox || [];
crobox.push(crobox => {
  crobox.on('productfinder.track', (event: FinderTrackEvent) => {
    // TODO: Implement the connection to third-party analytics
  });
});

Implementation Steps

Follow these steps to integrate Product Advisor tracking events with your analytics platform:

1. Hook Into the Event

Use the crobox.on('productfinder.track', callback) method to listen to FinderTrackEvent emissions.

window.crobox = window.crobox || [];
crobox.push(crobox => {
  crobox.on('productfinder.track', (event) => {
    console.log('FinderTrackEvent:', event);
  });
});

1. Process the Event Data

Extract relevant fields from the event object, such as id, variant, activation, products, etc. Ensure that the data aligns with your analytics platform's structure.

1. Send to Analytics Platform

Map the extracted data to your analytics platform's schema and use its API to send the event information, for example:

crobox.on('productfinder.track', (event) => {
  const analyticsData = {
    finderId: event.id,
    variantId: event.variant,
    activationMethod: event.activation,
    isOpen: event.open,
    currentPage: event.page,
    currentQuestion: event.question,
    answers: event.answers,
    advisedProducts: event.products,
  };

  // Replace this with your analytics platform API call
  sendToAnalyticsPlatform(analyticsData);
});

function sendToAnalyticsPlatform(data) {
  // Example API call
  fetch('https://your-analytics-platform.com/api/track', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  });
}

1. Verify the Integration

Test the integration by triggering various interactions with the Product Advisor. Confirm that the events are being accurately sent to and processed by your analytics platform in comparison to your Crobox platform analytics.

Key Notes on Naming Conventions

To maintain consistency and clarity, adhere to the following naming conventions when working with the FinderTrackEvent object:

• Identifiers: Use the id and variant fields to uniquely identify each Product Advisor and its variant. Ensure these are mapped correctly in your analytics platform.

• Activation Type: The activation field specifies what triggered the finder (e.g., ribbon or a custom trigger). This is critical for analysing the effectiveness of different activation methods.

• User Interaction States: Utilise the open and page fields to track user interaction states and navigation flow.

• User Inputs: Leverage the question and answers fields to understand user choices and behaviour during their interaction. Avoid locking onto specific keys or names as they may change over time.

  • For example, a field currently named gender might be updated to gender-v2 in the future. Relying on static field names in your tracking code could result in broken functionality.

• Results Data: Use the products field to track which products are being advised to the user on result pages.

By following this guide, you can effectively integrate Product Advisor analytics into your analytics platform, providing enhanced visibility into user behaviour and Product Advisor performance.