Einstein Activities for Hybrid Implementations

With Reports & Dashboards, you can identify trends over time and make smarter business decisions based on your B2C Commerce data.

Reports & Dashboards analytics can only be derived from either web adapter logs or the Einstein Activities API. By default, SFRA and SiteGenesis analytics data are stored in web adapter logs, while the PWA Kit sends analytics data to Einstein Activities API.

If you are pursuing a phased headless rollout, where some pages are powered by PWA Kit and others are powered by SFRA or SiteGenesis, and you want to use Reports & Dashboards across your entire site, you must update your SFRA or SiteGenesis implementation to use the Einstein Activities API. This ensures that the API captures the full shopper experience, regardless of whether the shopper is in PWA Kit, SFRA, or SiteGenesis.

Implementations using Sitegenesis with Composable Storefront are not officially supported.

This guide shows you how to integrate the Einstein Activities API with SFRA's checkout, so that it sends the same activities as PWA Kit's checkout.

If your phased rollout has additional pages on SFRA or SiteGenesis that send analytics data to the web adapter logs, then for those pages you can follow a process similar to what's described in this guide. Look at the corresponding pages in the Retail React App and observe which activities they send out. You'll then need to send the same activities on your SFRA or SiteGenesis pages. As a resource, this overview of Einstein activities shows you where those activities are supposed to be used.

Use caution when integrating the code examples provided, and always test your code thoroughly before pushing it to production.

Lines to be added to existing code are marked with the addition (+) symbol and lines to be deleted are marked with the subtraction (-) symbol.

Before running the commands in this tutorial, replace any placeholders with actual values. Placeholders are formatted like this: $PLACEHOLDER.

Start by updating your checkout controller to include the current basket ID.

Update the ISML template used for checkout. This change makes the basket ID, items, and total available to the browser.

Create a JavaScript file called js/einsteinHelpers.js that contains helper functions:

Don’t forget to replace the placeholders $YOUR_SITE_ID and $YOUR_CLIENT_ID with actual values.

Update your checkout.js script to record activities. You must add this call to require() at the top of your checkout script, and it must appear after any existing imports.

Trigger the checkoutStep activity when the checkout stage is changed. Append the following code to the updateUrl method:

Triggering the checkoutStep activity in the updateUrl method ensures that any transition from one checkout stage to the next (or previous) is tracked.

Trigger the beginCheckout activity at the end of the initialize function for your checkout code:

The beginCheckout activity is only triggered one time per page load during checkout. Activity data preparation is handled automatically.

That’s it! You’ve successfully integrated Einstein Activities with SFRA's checkout. To finish your setup of Reports & Dashboards, complete the steps in Reports & Dashboards.