Engagement Adapter Pattern

The adapter pattern decouples analytics components from vendor-specific event APIs. Components call a generic interface and the adapter translates those calls into the vendor’s API. Storefront Next provides three built-in adapters for analytics event tracking that use Einstein, Active Data, and Data 360 (formerly Data Cloud).

AdapterPurposeConfig key
EinsteinAnalytics event tracking (viewProduct, addToCart, and so on)engagement.adapters.einstein
Active DataAnalytics event tracking (dwac beacon)engagement.adapters.activeData
Data 360Salesforce Data 360 page, product-view, and impression interactionsengagement.adapters.data360

All three implement the EngagementAdapter interface and are registered in a shared store.

A Map<string, EngagementAdapter> with functional accessors:

Adapter code is dynamically imported to stay out of the initial bundle:

The dynamic import() means that the Einstein, Active Data, and Data 360 implementation modules are code-split into a separate chunk.

Adapters are configured in config.server.ts under engagement.adapters:

If an adapter’s enabled flag is false, it isn’t registered.

Data 360 maps page, search, product-view, and impression interactions — view_page, view_product, view_search, view_category, and view_recommender. Search, category, and product events send a separate Page View interaction when shared Page View tracking blocks their path and view_page is enabled. A direct search sends one Search interaction per search execution and correlates its product impressions across pagination. Recommendations don’t derive a Page View. Cart, checkout, wishlist, and click events have no Data 360 mapping and ship disabled in eventToggles.

For how to provision Data 360 and connect your storefront, see Send Storefront Next Analytics Events to Data 360.

  1. Create src/lib/adapters/engagement/your-adapter.ts with a factory function returning EngagementAdapter.
  2. Register it in src/lib/adapters/engagement/register.ts inside initializeEngagementAdapters().
  3. Add configuration under engagement.adapters.yourAdapter in config.server.ts.