Einstein Activities for Phased Headless Rollouts

Ensuring visibility into storefront performance, including revenue generation, traffic patterns and funnel attrition, is essential for any ecommerce project. Starting with v2.3 of PWA Kit, the Retail React App comes with robust event tracking powered by the Einstein Activities API.

If you are pursuing a phased headless rollout, where some site elements are powered by PWA Kit and others are powered by SFRA or Sitegenesis, you must take extra steps to ensure that user activities are tracked from one to the other. These extra steps ensure that you can capture the full user journey and that related dashboards represent that journey accurately.

This guide covers how to implement Einstein Activities for a phased rollout where PWA Kit is used for the top of the funnel and SFRA is used for checkout.

To test a storefront with this sample hybrid implementation, see our hybrid demo storefront.

The client-side approach to activity tracking described in this guide is best suited for projects with simple requirements for activity tracking. If you need to track multiple activities across different pages or have other more complex requirements, consider waiting until a solution is available in the form of a cartridge plug-in.

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.

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 beginCheckout activity at the end of the initialize function for your checkout code:

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

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.

That’s it! You’ve successfully implemented Einstein Activities for checkout.