Install the Storefront Events SDK

The storefront events SDK serves as the foundation for eventing on an Adobe Commerce storefront. It provides access to a common data layer, and an event publishing and subscription service. You can use the Adobe Commerce Event Collector package to listen for the events and send them to Adobe Commerce for processing.

This SDK can be used as a hosted script, or bundled in a JavaScript application. The script version is hosted on cdn, and the bundled version is hosted on npm.

If you are using the Data Connection module, you can skip the installation process because the module automatically deploys the SDK for you.

Use the SDK as a hosted script—Use the following snippet to load the script from the JSDelivr CDN.

<script src="https://cdn.jsdelivr.net/npm/@adobe/magento-storefront-events-sdk@1/dist/index.js"></script>
Copied to your clipboard
<script src="https://cdn.jsdelivr.net/npm/@adobe/magento-storefront-events-sdk@1/dist/index.js"></script>

Use the bundled version—Run the following command to install the script as a dependency.

npm install @adobe/magento-storefront-events-sdk
Copied to your clipboard
npm install @adobe/magento-storefront-events-sdk

Confirm SDK is Available

If you used the CDN to install the script, confirm that the SDK asset has downloaded successfully by running the following code:

//Module Load
import mse from "@adobe/magento-storefront-events-sdk";
if(!mse) return;

//AMD Load
require(['magentoStorefrontEvents'], function (magentoStorefrontEvents) {
        if(!magentoStorefrontEvents) return; 
Copied to your clipboard
//Module Load
import mse from "@adobe/magento-storefront-events-sdk";
if(!mse) return;

//AMD Load
require(['magentoStorefrontEvents'], function (magentoStorefrontEvents) {
        if(!magentoStorefrontEvents) return;

To prevent issues, always keep the script or bundled version updated to the latest release.

Quick Start

Once imported, you have access to the four main functions of the Events SDK.

Context - Set context data
Publish - Publish events
Subscribe - Subscribe to events
Unsubscribe - Unsubscribe from events

The following code example shows how to get started.

Relevant context data must be populated before publishing events that require it.

import mse from "@adobe/magento-storefront-events-sdk";

// subscribe to events
mse.subscribe.pageView(pageViewHandler);

// set context data
mse.context.setPage(/* page context */);

// publish events
mse.publish.pageView();

// unsubscribe from events
mse.unsubscribe.pageView(pageViewHandler);
Copied to your clipboard
import mse from "@adobe/magento-storefront-events-sdk";

// subscribe to events
mse.subscribe.pageView(pageViewHandler);

// set context data
mse.context.setPage(/* page context */);

// publish events
mse.publish.pageView();

// unsubscribe from events
mse.unsubscribe.pageView(pageViewHandler);