Composables

useAlgoliaEvent

Description

The useAlgoliaEvent composable provides an interface to handle and send tracking events related to user interactions with products on an e-commerce platform using Algolia. It wraps the creation and sending of specific events like adding a product to the cart, viewing a product, and completing a purchase. This composable simplifies the process by integrating with an Algolia store and provides default configurations, such as API keys, application IDs, and index settings, from the Nuxt runtime configuration.

FEATURE GOALS

  • Create and send Add to Cart events.
  • Track Product View events.
  • Record Purchase events with relevant data.
  • Interface with Algolia's API to log and process events.

FEATURE EXPECTATIONS

  • Sends events to Algolia with the necessary information about product interactions.
  • Allows for sending different types of e-commerce-related events, such as viewing products and making purchases.
  • Utilizes runtime configuration for keys, IDs, and indices, making it easier to manage these values across environments.
  • Provides a consistent structure for event data.

DEV STRATEGIES

  1. Composables Logic
const { sendAddToCartEvent, sendProductViewEvent, sendPurchaseEvent } = useAlgoliaEvent();

// Example of sending an Add to Cart event
await sendAddToCartEvent({
  item: selectedProduct, // product object
  quantity: 2, // quantity added
});

// Example of sending a Product View event
await sendProductViewEvent('product123'); // product code

// Example of sending a Purchase event
await sendPurchaseEvent({
  queryID: 'xyz123',
  objectIDs: ['product123', 'product456'],
  orderTotal: 120.50,
});
  • Calls Algolia's sendAlgoliaEvent method to send the event data.
  • The composable manages essential API keys and indices from the runtime configuration for easy setup.
  1. COMPOSABLE STRUCTURE
useAlgoliaEvent(): {
  sendAddToCartEvent: (options: { item: Product; quantity: number }) => Promise<void>;
  sendProductViewEvent: (productCode: string) => Promise<void>;
  sendPurchaseEvent: (params: { queryID: string; objectIDs: string[]; orderTotal: number }) => Promise<void>;
}
  1. DEFAULT BEHAVIOR
OptionDefaultDescription
algoliaApplicationIdRuntime ConfigApplication ID for Algolia, fetched from runtime configuration.
algoliaApiKeyRuntime ConfigIndex for product-related data in Algolia.
productsIndexRuntime ConfigIndex for category-related data in Algolia.
categoriesIndexEventConstantsCurrency symbol used in events.

  1. ERROR RESPONSE STRUCTURE
  • In case of a failure when sending an event, the sendAlgoliaEvent method will return a rejection with error details, allowing developers to handle errors gracefully.
{
  success: false,
  error: string // Error message related to the failure
}
  • Debug mode enables detailed error messages.
  • Standardized failure structure eases error processing in server workflows.

FLOW SUMMARY

  • This composable provides three key functions: sending Add to Cart, Product View, and Purchase events.
  • It integrates with the Algolia API using runtime configuration for API keys, indices, and other necessary values.
  • On event completion, the composable sends event data to Algolia.
  • Developers can customize and extend the events by passing additional parameters such as product information and quantities.

Copyright © 2026