BLOG . Adobe Commerce

Adobe Sensei is Adobe’s AI and machine learning technology framework designed to power intelligent features across Adobe Experience Cloud, Creative Cloud, and Document Cloud. In ecommerce, Adobe Sensei enhances digital experiences by delivering advanced personalization, automated decision-making, and deep customer insights.

When integrated with platforms like Magento Storefront Events (MSE) and Adobe Experience Cloud, Adobe Sensei helps businesses:

• Predict customer behavior through intelligent data analysis.
• Automate personalization for product recommendations, search, and promotions.
• Optimize marketing campaigns by identifying high-conversion touchpoints.
• Improve merchandising by analyzing trends and product performance.

When events such as product views, add-to-cart actions, or checkouts are tracked and sent to Adobe Experience Cloud, Adobe Sensei uses this data to drive smarter experiences — all without relying on Magento’s traditional frontend.

Headless GraphQL Customization for Adobe Sensei

In a fully headless commerce solution using Next.js and React.js (connected to Magento via GraphQL), Adobe Sensei can be integrated to fetch personalized product recommendations based on real-time user interaction data.

Example Query:

query GetRecommendations($pageType: PageType!, $category: String, $currentSku: String, $cartSkus: [String], $userPurchaseHistory: [PurchaseHistory], $userViewHistory: [ViewHistory]) {
  recommendations(
    cartSkus: $cartSkus
    category: $category
    currentSku: $currentSku
    pageType: $pageType
    userPurchaseHistory: $userPurchaseHistory
    userViewHistory: $userViewHistory
  ) {
    results {
      displayOrder
      pageType
      productsView {
        name
        sku
        url
        inStock
        images {
          url
          __typename
        }
        externalId
        __typename
      }
      storefrontLabel
      totalProducts
      typeId
      unitId
      unitName
      __typename
    }
    totalResults
    __typename
  }
}

This query returns highly relevant product recommendations based on page type and user behavior.

Challenges in Headless Architecture (Without Traditional Magento Frontend)

When implementing Adobe Sensei in a headless architecture, we face some common challenges, particularly due to the absence of Magento’s default frontend.

1. Custom Handling of Real-Time User Data

In a headless architecture, it’s necessary to:

• Manually capture user interaction events like product views, add-to-cart, and checkout.
• Send these events to Adobe Sensei via Magento Storefront Events (MSE).
• Manage context data (such as product, category, and shopper information) from the React frontend.

2. Direct Adobe Sensei Integration for Recommendations

To address the lack of Magento’s default frontend, Adobe Sensei’s Recommendation API is integrated directly into the Next.js frontend. This approach allows for:

• Fetching personalized product recommendations dynamically using GraphQL queries.
• Optimizing product listings, product detail pages, and cart pages with relevant suggestions.
• Delivering personalized experiences without relying on Magento’s traditional frontend logic.

Understanding Magento Storefront Events (MSE)

Magento Storefront Events (MSE) is an event-driven data collection framework that enables real-time tracking of user interactions on a Magento storefront. It is particularly useful for headless architectures, where frontend applications operate independently from the Magento backend. MSE enables seamless data exchange, allowing businesses to track user behavior effectively.

Key Benefits of MSE

1. Real-time Event Tracking: Instantly capture user interactions such as product views, cart additions, and checkouts.
2. Integration with Adobe Experience Cloud: Easily connect Magento’s event data with Adobe Experience Cloud services like Adobe Analytics, Adobe Target, and Adobe Campaign.
3. Enhanced Analytics and Reporting: Collect valuable data on customer behavior to optimize business decisions.
4. Optimized Marketing Automation: Use event data to trigger personalized marketing campaigns and improve conversion rates.
5. Headless-Friendly Implementation: MSE is designed to work with headless architectures, making it ideal for Next.js or other frontend frameworks.

Setting Up MSE in a Headless Next.js Storefront

1. Adding Adobe Event Scripts

To enable Adobe Storefront Events in your project, you need to include the required scripts in your application. Add the following script tags to your HTML file or dynamically load them in your Next.js project:

<script src="https://cdn.jsdelivr.net/npm/@adobe/magento-storefront-events-sdk@1/dist/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@adobe/magento-storefront-event-collector@^1/dist/index.js"></script>

These scripts provide access to the Magento Storefront Events SDK and Event Collector, enabling you to track and publish events.

2. Implementing Sample Product View Event Tracking

Tracking product page views is essential for analytics and marketing automation. Below is a function that sets up product view event tracking in a Next.js component:

export const useProductViewEventTracking = ({ contextData, customerToken }) => {
  try {
    if (!contextData || !window?.magentoStorefrontEvents) {
      console.warn(
        "Page view tracking could not be initialized: Missing contextData or magentoStorefrontEvents."
      );
      return;
    }

    const mse = window.magentoStorefrontEvents;
    const { context, publish, subscribe, unsubscribe } = mse;

    context.setStorefrontInstance(storeFront);
    context.setShopper({
      shopperId: "guest",
    });

    if (context?.setProduct) {
      context.setProduct(contextData);
    }

    if (subscribe?.productPageView) {
      subscribe.productPageView((event) => {
        console.log("Product page event tracked:", event);
      });
    }

    if (publish?.productPageView) {
      publish.productPageView();
    }

    return () => {
      if (unsubscribe?.productPageView) {
        unsubscribe.productPageView();
      }
    };
  } catch (error) {
    console.error("Store Magento error:", error);
  }
};

Testing and Validating Adobe Events Implementation

After integrating Adobe Events in your Next.js, testing and validation are crucial to ensure accurate data tracking. Here are three recommended methods:

Method 1: Developer Tools (Console)

1. Open Developer Tools in your browser (Chrome, Firefox, etc.).
2. Run window.adobeDataLayer in the console.
3. Verify if the expected events are being triggered and logged.
   
   

Method 2: Developer Tools (Network Tab)

1. Open Developer Tools in your browser.
2. Go to the Network tab and filter for tp2 requests.
3. Examine the response payload to confirm that event data is being sent correctly to Adobe Experience Cloud.
   
   

Method 3: Using Snowplow Debugger (Recommended)

1. Download and install the Snowplow Debugger Chrome extension.
   Extension Link: https://chromewebstore.google.com/detail/snowplow-debugger/jbnlcgeengmijcghameodeaenefieedm
2. Open the extension and browse your site.
3. The extension will display detailed logs of all triggered Adobe events, helping you validate data accuracy.
4. You can finalize it working. If all events are triggered in the Snowplow Debugger
   
   

Conclusion

Implementing Adobe Events in a fully headless Next.js storefront enhances customer insights, personalization, and marketing automation. By integrating the Storefront Events SDK and utilizing script-based initialization, you can efficiently capture user interactions without relying on Magento Admin. This approach allows businesses to leverage real-time data for advanced analytics, targeted marketing, and dynamic content delivery, ultimately improving the overall shopping experience.

If you are looking to enhance your Adobe Commerce Capabilities, you can work with the Adobe Commerce solutions partners like Klizer. Our Adobe Commerce Solutions can help you optimize your ecommerce platform using Adobe’s powerful technologies.