Salesforce Commerce for B2C: Features and Use Cases

} /> Explanation: Implements a lazy-loaded video component in PWA Kit using . src='cdn/pdp-video.mp4' specifies the video file hosted on the CDN. intersectionThreshold={0.1} delays loading until 10% of the component enters the viewport. placeholder={} displays a loading spinner while the video loads. Localization for Currency, Language, and Tax Logic SFCC’s locale pipelines inject translated video transcripts and tax-adjusted pricing. The system resolves currency conflicts using Accept-Language headers and IP geolocation. // SFRA middleware applying locale rules server.use((req, res, next) => { res.locals.currency = req.locale.currency; res.set('Content-Language', req.locale.language); next(); }); Explanation: Applies middleware in SFRA to handle locale-specific rules during requests. res.locals.currency = req.locale.currency sets the current currency for rendering views. res.set('Content-Language', req.locale.language) adds the appropriate language header to the response. next() passes control to the next middleware or route handler in the chain. How Video Workflow Works in Salesforce Commerce for B2C Server-Side Video Module Initialization The workflow begins when Page Designer processes the layout JSON during server-side rendering. It parses video configuration blocks from the templates, validates CDN URLs against Salesforce's Media Service whitelist, and generates placeholder DIVs with data attributes for deferred loading. // SSR output for video placeholder

Explanation : Outputs a server-side rendered

container prepared for client-side hydration of video content. Embeds a dynamic HLS video source using a placeholder {product_id} in the data-video-src attribute for runtime substitution. Includes a data-min-score attribute to enable conditional rendering based on affinity scoring or personalization logic. Client-Side Hydration Logic Upon reaching the client, PWA Kit's hydration script checks Einstein scores stored in Session Storage. These scores are compared against predefined data-min-score thresholds, and matching elements trigger the initialization of HLS.js for video playback. document.querySelectorAll('[data-video-src]').forEach(el => { if (parseFloat(sessionStorage.einsteinScore) >= parseFloat(el.dataset.minScore)) { new HLSPlayer(el, el.dataset.videoSrc); } }); Explanation : Selects all DOM elements containing the data-video-src attribute to identify deferred video containers. Compares each element’s data-min-score threshold with the user’s einsteinScore stored in sessionStorage to enforce personalization logic. Initializes an instance of HLSPlayer for qualifying elements, passing in the container and HLS video source for dynamic playback. Real-Time Media Adaptation The player dynamically adjusts based on network API detection, distinguishing between connections like 5G, Wi-Fi, or slower networks such as 3G and 4G. It also profiles device capabilities, including checks for GPU acceleration, and evaluates viewport intersection ratios to optimize playback behavior. const streamQualities = { mobile: [480p, 720p], desktop: [720p, 1080p, 4K] }; function selectStream() { return navigator.connection.effectiveType.includes('4g') ? streamQualities.desktop : streamQualities.mobile; } Explanation : Defines available streaming resolutions categorized by device context, mobile gets 480p and 720p, while desktop supports up to 4K. Uses navigator.connection.effectiveType to detect current network quality, optimizing delivery based on bandwidth. Returns high-resolution streams for 4G or better connections, enabling 1080p or 4K playback on desktop. Shoppable Event Processing Hotspot interactions follow a defined sequence where click events are captured using event delegation. The system then validates product IDs against OCAPI inventory before applying cart mutations with optimistic UI updates for faster user feedback. document.body.addEventListener('click', (e) => { if (e.target.classList.contains('hotspot')) { OCAPI.post('/cart/items', { product_id: e.target.dataset.sku, quantity: 1 }).then(updateCartBadge); } }); Explanation : Attaches a click event listener to the document body to monitor user interactions dynamically. Identifies interactive elements with the hotspot class for clickable product tags on video overlays or 3D models. On interaction, it triggers an OCAPI POST request to /cart/items to add the associated product (data-sku) to the shopping cart. Engagement Data Pipeline Video analytics flow begins with client-side buffering metrics collection. Web Workers handle scroll and viewport tracking, and the processed data is sent to Salesforce CDP through the bulk API integration. const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { MediaTracker.logViewability(entry.target.id); } }); }, {threshold: 0.5}); Explanation : Creates an IntersectionObserver instance to track when elements become visible within the viewport. Monitors each observed element and checks if at least 50% of it is visible (threshold: 0.5). When an element meets the visibility threshold (entry.isIntersecting), it calls MediaTracker.logViewability with the element’s id. Supports performance-efficient media analytics by only logging viewability when content is meaningfully seen. B2C Use Cases Leading B2C brands integrate video throughout the customer journey using Salesforce Commerce Cloud and edge delivery strategies. These workflows optimize performance, engagement, and conversion outcomes. Product Demos Gated by Network Conditions On electronics PDPs, 4K demo videos (up to 18MB) load only for users on Wi-Fi. PWA Kit leverages the NetworkInformation API to control delivery, while Einstein tracks segment-level engagement to measure conversion lift. Shoppable Livestreams with Real-Time Inventory Sync A beauty brand embeds Twitch livestreams on PDPs, enabling users to add products to cart in real time. Viewer counts sync with SFCC’s ProductInterest objects to manage inventory allocation dynamically. A/B Testing Video Length for Merchandising Strategy A home goods retailer tests 15-second versus 30-second product videos on category pages. Einstein’s Media Lift Analysis compares video length against add-to-cart rates across desktop and mobile devices. Dynamic Video Mapping with Real-Time Engagement Scores A jewelry brand personalizes PDP content by showing craftsmanship videos to users with more than 3 minutes of session activity. Interaction Studio updates user segments in real time using behavioral event streams.

Boost Campaign Performance Through Video