npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@adobe/magento-storefront-event-collector

v1.12.0

Published

Event Collectors for Adobe Commerce storefronts

Downloads

24,249

Readme

Adobe Commerce Events Collectors

version downloads size build typescript contributing

Overview

This package listens for and handles events published by the Adobe Commerce Events SDK to the adobeDataLayeracdl. It runs as a side effect and is meant to be a convenience for users who want to send event data to Adobe Commerce.

Installation

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

To load the Collector as a script, use the following snippet.

<script src="https://cdn.jsdelivr.net/npm/@adobe/commerce-events-collectors/dist/index.js"></script>

To install the script as a dependency, run this command.

npm install @adobe/commerce-events-collectors

Quick start

After loading the collector script, or importing the package as shown below, there is nothing else that needs to be done.

import "@adobe/commerce-events-collectors";

Usage

The collector listens for the following events.

  • pageView
  • addToCart
  • productPageView
  • shoppingCartView
  • initiateCheckout
  • openCart
  • placeOrder
  • recsItemAddToCartClick
  • recsItemClick
  • recsRequestSent
  • recsResponseReceived
  • recsUnitRender
  • recsUnitView
  • removeFromCart
  • searchCategoryClick
  • searchProductClick
  • searchRequestSent
  • searchResponseReceived
  • searchResultsView
  • categoryResultsView
  • searchSuggestionClick
  • createAccount
  • editAccount
  • signIn
  • signOut
  • custom

B2B events

  • createRequisitionList
  • deleteRequisitionList
  • addToRequisitionList
  • removeFromRequisitionList

The handlers forward events to two edges:

  • Adobe Commerce Data Services (maintained by Adobe Engineering and used to power merchant performance dashboards)

    Required contexts:

    • StorefrontInstance

    Events not forwarded to Adobe Commerce:

    • createAccount
    • editAccount
    • openCart
    • removeFromCart
    • signIn
    • signOut
    • custom

    B2B events:

    • createRequisitionList
    • deleteRequisitionList
    • addToRequisitionList
    • removeFromRequisitionList
  • Adobe Experience Platform (AEP) (requires a subscription and additional merchant setup; data can be used by merchants inside the Adobe Experience Platform for detailed analytics, targeted merchandising, real time customer data profiles, and more)

    Required contexts:

    • AEP
    • EventForwarding.aep: true

    Events not forwarded to AEP Edge:

    • recsItemAddToCartClick
    • recsItemClick
    • recsRequestSent
    • searchResponseReceived
    • searchCategoryClick
    • searchProductClick
    • searchResultsView
    • categoryResultsView
    • searchSuggestionClick

Turning off collection per edge

Events are sent to Adobe Commerce Data Services by default. To turn collection off collection, set EventForwarding.commerce: false.

Events are not set to AEP Edge unless explicitly configured (EventForwarding.aep: true);

Handling custom events

Custom events are supported for the Adobe Experience Platform only. Custom data will not be forwarded to Adobe Commerce dashboards and metrics trackers.

For any custom event, the collector:

  • addsidentityMap with ECID as a primary identity
  • includes email in identityMap as a secondary identity if personalEmail.address is set in the event
  • wraps the full event inside an xdm object before forwarding to the Edge

Example:

Custom event published through MSE SDK:

mse.publish.custom({
    commerce: {
        saveForLaters: {
            value: 1,
        },
    },
});

In AEP Edge:

{
  xdm: {
    identityMap: {
      ECID: [
        {
          id: 'ecid1234',
          primary: true
        }
      ],
      email: [
        {
          id: "[email protected]",
          primary: false
        }
      ]
    },
    commerce: {
        saveForLaters: {
            value: 1
        }
    }
  }
}

note Using custom events may affect OOTB Adobe Analytics reports.

Handling event overrides (custom attributes)

Attribute overrides for standard events are supported for the Experience Platform only. Custom data will not be forwarded to Commerce dashboards and metrics trackers.

For any event with a set customContext, the collector overrides joins fields set in the relevant contexts with fields in customContext. The use case for overrides is when a developer wants to reuse and extend contexts set by other parts of the page in already supporte events.

Note when overriding custom events, event forwarding to AEP should be turned off for that event type in order to avoid-double counting.

Example:

Product view with Adobe Commerce overrides published though MSE SDK:

Product context (set by another script on the page):

{
}
mse.publish.productPageView({
    productListItems: [
        {
            productCategories: [
                {
                    categoryID: "cat_15",
                    categoryName: "summer pants",
                    categoryPath: "pants/mens/summer",
                },
            ],
        },
    ],
});

In AEP Edge:

{
  xdm: {
    eventType: 'commerce.productViews',
    identityMap: {
      ECID: [
        {
          id: 'ecid1234',
          primary: true,
        }
      ]
    },
    commerce: {
      productViews: {
        value : 1,
      }
    },
    productListItems: [{
        SKU: "1234",
        name: "leora summer pants",
        productCategories: [{
            categoryID: "cat_15",
            categoryName: "summer pants",
            categoryPath: "pants/mens/summer",
        }],
    }],
  }
}

Note Overriding events with custom attributes may affect OOTB Adobe Analytics reports.

Shopper Consent and Data Collection Opt out

The "mg_dnt" cookie is used by Product Recommendations to restrict data collection.

when the cookie restriction mode is enabled, data services will set the "mg_dnt" cookie to true.

const listenForCookieEvents = ($) => {
    const DNT_COOKIE = "mg_dnt";
    let userAllowedSaveCookie = !!$.mage.cookies.get("user_allowed_save_cookie");

    if (userAllowedSaveCookie) {
        $.mage.cookies.clear(DNT_COOKIE);
    } else {
        $.mage.cookies.set(DNT_COOKIE, true);
    }
};

By default, the user consent preference in AEP is set to "opt in", unless the cookie restriction mode is enabled and the "mg_dnt" cookie is present.

The script will keep polling to check for any changes and send the updated preference to AEP.

const doNotTrackCookie = document.cookie.indexOf("mg_dnt") !== -1;
alloy("setConsent", {
    consent: [
        {
            standard: "Adobe",
            version: "1.0",
            value: {
                general: doNotTrackCookie ? "out" : "in",
            },
        },
    ],
});
setInterval(setConsent, 1000);

PII Data Collection

The following events forward a user's email as PII data to AEP:

createAccount

editAccount

signIn

Support

If you have any questions or encounter any issues, please reach out at these locations.