Documentación AEM as a Cloud Service Guía del usuario

Integración de componentes principales de AEM y CIF con Adobe Experience Platform aem-cif-aep-integration

Last update: Tue Aug 19 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Se aplica a:
Experience Manager as a Cloud Service

Temas:
Marco de integración de comercio

Creado para:

Principiante
Desarrollador

Los componentes principales de Commerce integration framework (CIF) se integran perfectamente con Adobe Experience Platform para reenviar eventos de tienda y sus datos a partir de interacciones del lado del cliente, como agregar al carro de compras.

El proyecto Componentes principales de AEM CIF proporciona una biblioteca de JavaScript llamada Conector de Adobe Experience Platform para Adobe Commerce para recopilar datos de evento de tu tienda Commerce. Esos datos de evento se envían a Experience Platform, donde se utilizan en otros productos de Adobe Experience Cloud, como Adobe Analytics y Adobe Target, para crear un perfil de 360 grados que cubra un recorrido del cliente. Al conectar los datos de Commerce con otros productos de Adobe Experience Cloud, puede realizar tareas como analizar el comportamiento de los usuarios en el sitio, realizar pruebas AB y crear campañas personalizadas.

Obtenga más información acerca del conjunto de tecnologías de recopilación de datos de Experience Platform que le permiten recopilar datos de experiencia del cliente de fuentes del lado del cliente.

Enviar datos de evento `addToCart` a Experience Platform send-addtocart-to-aep

Los pasos siguientes muestran cómo enviar los datos de evento addToCart desde páginas de producto procesadas por AEM a Experience Platform mediante el Conector CIF - Experience Platform. Con la extensión del explorador Adobe Experience Platform Debugger, puede probar y revisar los datos enviados.

Revisar los datos del evento addToCart en Adobe Experience Platform Debugger

Requisitos previos prerequisites

Utilice un entorno de desarrollo local para completar esta demostración. Esto incluye una instancia en ejecución de AEM configurada y conectada a una instancia de Adobe Commerce. Revise los requisitos y pasos para configurar el desarrollo local con AEM as a Cloud Service SDK.

También necesita acceso a Adobe Experience Platform y permisos para crear el esquema, el conjunto de datos y los flujos de datos para la recopilación de datos. Para obtener más información, vea Administración de permisos.

Configuración de AEM Commerce as a Cloud Service aem-setup

Para tener un entorno local de AEM Commerce as a Cloud Service en funcionamiento con el código y la configuración necesarios, complete los siguientes pasos.

Configuración local

Siga los pasos de la Configuración local para que pueda tener un entorno AEM Commerce as a Cloud Service en funcionamiento.

Configuración del proyecto

Siga los pasos de Tipo de archivo del proyecto AEM para poder crear un proyecto AEM Commerce (CIF) completamente nuevo.

TIP

En el ejemplo siguiente, el nombre del proyecto de AEM Commerce es: My Demo Storefront, sin embargo, puede elegir su propio nombre de proyecto.

Proyecto AEM Commerce

Cree e implemente el proyecto de AEM Commerce creado en el SDK local de AEM ejecutando el siguiente comando desde el directorio raíz del proyecto.

$ mvn clean install -PautoInstallSinglePackage

El sitio de comercio My Demo StoreFront implementado localmente con código y contenido predeterminados tiene el siguiente aspecto:

Sitio predeterminado de AEM Commerce

Instalación de las dependencias del conector Peregrine y CIF-AEP

Para recopilar y enviar los datos de evento desde las páginas de categorías y productos de este sitio de AEM Commerce, instale los paquetes de claves npm en el módulo ui.frontend del proyecto de AEM Commerce.

Vaya al módulo ui.frontend e instale los paquetes necesarios ejecutando los siguientes comandos desde la línea de comandos.

npm i --save lodash.get@^4.4.2 lodash.set@^4.3.2
npm i --save apollo-cache-persist@^0.1.1
npm i --save redux-thunk@~2.3.0
npm i --save @adobe/apollo-link-mutation-queue@~1.1.0
npm i --save @magento/peregrine@~12.5.0
npm i --save @adobe/aem-core-cif-react-components --force
npm i --save-dev @magento/babel-preset-peregrine@~1.2.1
npm i --save @adobe/aem-core-cif-experience-platform-connector --force

IMPORTANT

El argumento --force es necesario a veces, ya que PWA Studio es restrictivo con las dependencias del mismo nivel admitidas. Normalmente, esto no debería causar ningún problema.

Configurar Maven para que use el argumento `--force`

Como parte del proceso de generación de Maven, se activa la instalación limpia de npm (con npm ci). Esto también requiere el argumento --force.

Vaya al archivo POM raíz del proyecto pom.xml y busque el bloque de ejecución <id>npm ci</id>. Actualice el bloque para que tenga el siguiente aspecto:

<execution>
    <id>npm ci</id>
    <goals>
    <goal>npm</goal>
    </goals>
    <configuration>
    <arguments>ci --force</arguments>
    </configuration>
</execution>

Cambiar el formato de configuración de Babel

Cambie del formato predeterminado del archivo de configuración relativa de .babelrc al formato babel.config.js. Este es un formato de configuración para todo el proyecto y permite que los complementos y ajustes preestablecidos se apliquen a node_module con mayor control.

Vaya al módulo ui.frontend y elimine el archivo .babelrc existente.

Crear un archivo babel.config.js que use el ajuste preestablecido peregrine.

code language-javascript

code language-javascript
`const peregrine = require('@magento/babel-preset-peregrine'); module.exports = (api, opts = {}) => { const config = { ...peregrine(api, opts), sourceType: 'unambiguous' } config.plugins = config.plugins.filter(plugin => plugin !== 'react-refresh/babel'); return config; }`

const peregrine = require('@magento/babel-preset-peregrine');

module.exports = (api, opts = {}) => {
    const config = {
        ...peregrine(api, opts),
        sourceType: 'unambiguous'
    }

    config.plugins = config.plugins.filter(plugin => plugin !== 'react-refresh/babel');

    return config;
}

Configurar Webpack para usar Babel

Para transformar los archivos de JavaScript mediante el cargador de Babel (babel-loader) y el webpack, edite el archivo webpack.common.js.

Vaya al módulo ui.frontend y actualice el archivo webpack.common.js para que pueda tener la siguiente regla dentro del valor de propiedad module:

{
    test: /\.jsx?$/,
    exclude: /node_modules\/(?!@magento\/)/,
    loader: 'babel-loader'
}

Configurar el cliente Apollo

El cliente Apollo se usa para administrar datos locales y remotos con GraphQL. También almacena los resultados de las consultas de GraphQL en una memoria caché local normalizada en memoria.

Para que InMemoryCache funcione correctamente, necesita un archivo de possibleTypes.js. Para generar este archivo, consulte Generando possibleTypes automáticamente.

Vea también la implementación de referencia de PWA Studio y un ejemplo de archivo possibleTypes.js.

Vaya al módulo ui.frontend y guarde el archivo como ./src/main/possibleTypes.js

Actualice la sección webpack.common.js del archivo DefinePlugin para que pueda reemplazar las variables estáticas necesarias durante la generación.

code language-javascript

code language-javascript
`const { DefinePlugin } = require('webpack'); const { POSSIBLE_TYPES } = require('./src/main/possibleTypes'); ... plugins: [ ... new DefinePlugin({ 'process.env.USE_STORE_CODE_IN_URL': false, POSSIBLE_TYPES }) ]`

const { DefinePlugin } = require('webpack');
const { POSSIBLE_TYPES } = require('./src/main/possibleTypes');

...

plugins: [
    ...
    new DefinePlugin({
        'process.env.USE_STORE_CODE_IN_URL': false,
        POSSIBLE_TYPES
    })
]

Inicialización de los componentes principales de Peregrine y CIF

Para inicializar los componentes principales de React-based Peregrine y CIF, cree la configuración y los archivos de JavaScript necesarios.

Vaya al módulo ui.frontend y cree la carpeta siguiente: src/main/webpack/components/commerce/App

Crear un archivo de config.js con el siguiente contenido:

code language-javascript

code language-javascript
// get and parse the CIF store configuration from the <head> const storeConfigEl = document.querySelector('meta[name="store-config"]'); const storeConfig = storeConfigEl ? JSON.parse(storeConfigEl.content) : {}; // the following global variables are needed for some of the peregrine features window.STORE_VIEW_CODE = storeConfig.storeView \|\| 'default'; window.AVAILABLE_STORE_VIEWS = [ { code: window.STORE_VIEW_CODE, base_currency_code: 'USD', default_display_currency_code: 'USD', id: 1, locale: 'en', secure_base_media_url: '', store_name: 'My Demo StoreFront' } ]; window.STORE_NAME = window.STORE_VIEW_CODE; window.DEFAULT_COUNTRY_CODE = 'en'; export default { storeView: window.STORE_VIEW_CODE, graphqlEndpoint: storeConfig.graphqlEndpoint, // Can be GET or POST. When selecting GET, this applies to cache-able GraphQL query requests only. // Mutations will always be executed as POST requests. graphqlMethod: storeConfig.graphqlMethod, headers: storeConfig.headers, mountingPoints: { // TODO: define the application specific mount points as they may be used by <Portal> and <PortalPlacer> }, pagePaths: { // TODO: define the application specific paths/urls as they may be used by the components baseUrl: storeConfig.storeRootUrl }, eventsCollector: { eventForwarding: { acds: true, aep: false, } } };

// get and parse the CIF store configuration from the <head>
const storeConfigEl = document.querySelector('meta[name="store-config"]');
const storeConfig = storeConfigEl ? JSON.parse(storeConfigEl.content) : {};

// the following global variables are needed for some of the peregrine features
window.STORE_VIEW_CODE = storeConfig.storeView || 'default';
window.AVAILABLE_STORE_VIEWS = [
    {
        code: window.STORE_VIEW_CODE,
        base_currency_code: 'USD',
        default_display_currency_code: 'USD',
        id: 1,
        locale: 'en',
        secure_base_media_url: '',
        store_name: 'My Demo StoreFront'
    }
];
window.STORE_NAME = window.STORE_VIEW_CODE;
window.DEFAULT_COUNTRY_CODE = 'en';

export default {
    storeView: window.STORE_VIEW_CODE,
    graphqlEndpoint: storeConfig.graphqlEndpoint,
    // Can be GET or POST. When selecting GET, this applies to cache-able GraphQL query requests only.
    // Mutations will always be executed as POST requests.
    graphqlMethod: storeConfig.graphqlMethod,
    headers: storeConfig.headers,

    mountingPoints: {
        // TODO: define the application specific mount points as they may be used by <Portal> and <PortalPlacer>
    },
    pagePaths: {
        // TODO: define the application specific paths/urls as they may be used by the components
        baseUrl: storeConfig.storeRootUrl
    },
    eventsCollector: {
        eventForwarding: {
            acds: true,
            aep: false,
        }
    }
};

note important

note important
IMPORTANT
Aunque es posible que ya esté familiarizado con el archivo `config.js` de AEM Guides - Proyecto Venia de CIF, debe realizar algunos cambios en este archivo. Primero, revise cualquier comentario de TODO. A continuación, dentro de la propiedad `eventsCollector`, busque el objeto `eventsCollector > aep` y actualice las propiedades `orgId` y `datastreamId` a los valores correctos. Más información.

IMPORTANT

Aunque es posible que ya esté familiarizado con el archivo config.js de AEM Guides - Proyecto Venia de CIF, debe realizar algunos cambios en este archivo. Primero, revise cualquier comentario de TODO. A continuación, dentro de la propiedad eventsCollector, busque el objeto eventsCollector > aep y actualice las propiedades orgId y datastreamId a los valores correctos. Más información.

Crear un archivo de App.js con el siguiente contenido. Este archivo es similar al típico archivo de punto de inicio de la aplicación React y contiene los enlaces React y personalizados, así como el uso de React Context para facilitar la integración de Experience Platform.

code language-javascript

code language-javascript
import config from './config'; import React, { useEffect } from 'react'; import ReactDOM from 'react-dom'; import { IntlProvider } from 'react-intl'; import { BrowserRouter as Router } from 'react-router-dom'; import { combineReducers, createStore } from 'redux'; import { Provider as ReduxProvider } from 'react-redux'; import { createHttpLink, ApolloProvider } from '@apollo/client'; import { ConfigContextProvider, useCustomUrlEvent, useReferrerEvent, usePageEvent, useDataLayerEvents, useAddToCartEvent } from '@adobe/aem-core-cif-react-components'; import { EventCollectorContextProvider, useEventCollectorContext } from '@adobe/aem-core-cif-experience-platform-connector'; import { useAdapter } from '@magento/peregrine/lib/talons/Adapter/useAdapter'; import { customFetchToShrinkQuery } from '@magento/peregrine/lib/Apollo/links'; import { BrowserPersistence } from '@magento/peregrine/lib/util'; import { default as PeregrineContextProvider } from '@magento/peregrine/lib/PeregrineContextProvider'; import { enhancer, reducers } from '@magento/peregrine/lib/store'; const storage = new BrowserPersistence(); const store = createStore(combineReducers(reducers), enhancer); storage.setItem('store_view_code', config.storeView); const App = () => { const [{ sdk: mse }] = useEventCollectorContext(); // trigger page-level events useCustomUrlEvent({ mse }); useReferrerEvent({ mse }); usePageEvent({ mse }); // listen for add-to-cart events and enable forwarding to the magento storefront events sdk useAddToCartEvent(({ mse })); // enable CIF specific event forwarding to the Adobe Client Data Layer useDataLayerEvents(); useEffect(() => { // implement a proper marketing opt-in, for demo purpose you hard-set the consent cookie if (document.cookie.indexOf('mg_dnt') < 0) { document.cookie += '; mg_dnt=track'; } }, []); // TODO: use the App to create Portals and PortalPlaceholders to mount the CIF / Peregrine components to the server side rendered markup return <></>; }; const AppContext = ({ children }) => { const { storeView, graphqlEndpoint, graphqlMethod = 'POST', headers = {}, eventsCollector } = config; const { apolloProps } = useAdapter({ apiUrl: new URL(graphqlEndpoint, window.location.origin).toString(), configureLinks: (links, apiBase) => // reconfigure the HTTP link to use the configured graphqlEndpoint, graphqlMethod and storeView header links.set('HTTP', createHttpLink({ fetch: customFetchToShrinkQuery, useGETForQueries: graphqlMethod !== 'POST', uri: apiBase, headers: { ...headers, 'Store': storeView } })) }); return ( <ApolloProvider {...apolloProps}> <IntlProvider locale='en' messages={{}}> <ConfigContextProvider config={config}> <ReduxProvider store={store}> <PeregrineContextProvider> <EventCollectorContextProvider {...eventsCollector}> {children} </EventCollectorContextProvider> </PeregrineContextProvider> </ReduxProvider> </ConfigContextProvider> </IntlProvider> </ApolloProvider> ); }; window.onload = async () => { const root = document.createElement('div'); document.body.appendChild(root); ReactDOM.render( <Router> <AppContext> <App /> </AppContext> </Router>, root ); };

import config from './config';

import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import { IntlProvider } from 'react-intl';
import { BrowserRouter as Router } from 'react-router-dom';
import { combineReducers, createStore } from 'redux';
import { Provider as ReduxProvider } from 'react-redux';
import { createHttpLink, ApolloProvider } from '@apollo/client';
import { ConfigContextProvider, useCustomUrlEvent, useReferrerEvent, usePageEvent, useDataLayerEvents, useAddToCartEvent } from '@adobe/aem-core-cif-react-components';
import { EventCollectorContextProvider, useEventCollectorContext } from '@adobe/aem-core-cif-experience-platform-connector';
import { useAdapter } from '@magento/peregrine/lib/talons/Adapter/useAdapter';
import { customFetchToShrinkQuery } from '@magento/peregrine/lib/Apollo/links';
import { BrowserPersistence } from '@magento/peregrine/lib/util';
import { default as PeregrineContextProvider } from '@magento/peregrine/lib/PeregrineContextProvider';
import { enhancer, reducers } from '@magento/peregrine/lib/store';

const storage = new BrowserPersistence();
const store = createStore(combineReducers(reducers), enhancer);

storage.setItem('store_view_code', config.storeView);

const App = () => {
    const [{ sdk: mse }] = useEventCollectorContext();

    // trigger page-level events
    useCustomUrlEvent({ mse });
    useReferrerEvent({ mse });
    usePageEvent({ mse });
    // listen for add-to-cart events and enable forwarding to the magento storefront events sdk
    useAddToCartEvent(({ mse }));
    // enable CIF specific event forwarding to the Adobe Client Data Layer
    useDataLayerEvents();

    useEffect(() => {
        // implement a proper marketing opt-in, for demo purpose you hard-set the consent cookie
        if (document.cookie.indexOf('mg_dnt') < 0) {
            document.cookie += '; mg_dnt=track';
        }
    }, []);

    // TODO: use the App to create Portals and PortalPlaceholders to mount the CIF / Peregrine components to the server side rendered markup
    return <></>;
};

const AppContext = ({ children }) => {
    const { storeView, graphqlEndpoint, graphqlMethod = 'POST', headers = {}, eventsCollector } = config;
    const { apolloProps } = useAdapter({
        apiUrl: new URL(graphqlEndpoint, window.location.origin).toString(),
        configureLinks: (links, apiBase) =>
            // reconfigure the HTTP link to use the configured graphqlEndpoint, graphqlMethod and storeView header

            links.set('HTTP', createHttpLink({
                fetch: customFetchToShrinkQuery,
                useGETForQueries: graphqlMethod !== 'POST',
                uri: apiBase,
                headers: { ...headers, 'Store': storeView }
            }))
    });

    return (
        <ApolloProvider {...apolloProps}>
            <IntlProvider locale='en' messages={{}}>
                <ConfigContextProvider config={config}>
                    <ReduxProvider store={store}>
                        <PeregrineContextProvider>
                            <EventCollectorContextProvider {...eventsCollector}>
                                {children}
                            </EventCollectorContextProvider>
                        </PeregrineContextProvider>
                    </ReduxProvider>
                </ConfigContextProvider>
            </IntlProvider>
        </ApolloProvider>
    );
};

window.onload = async () => {
    const root = document.createElement('div');
    document.body.appendChild(root);

    ReactDOM.render(
        <Router>
            <AppContext>
                <App />
            </AppContext>
        </Router>,
        root
    );
};

EventCollectorContext exporta el contexto de React que:

carga la biblioteca commerce-events-sdk y commerce-events-collector,
los inicializa con una configuración determinada para Experience Platform o ACDS
se suscribe a todos los eventos de Peregrine y los reenvía a los eventos de SDK

Puede revisar los detalles de implementación de EventCollectorContext. Consulte aem-core-cif-components en GitHub.

Cree e implemente el proyecto de AEM actualizado build-and-deploy

Para asegurarse de que los cambios de instalación, código y configuración del paquete anterior son correctos, vuelva a generar e implemente el proyecto de AEM Commerce actualizado con el siguiente comando de Maven: $ mvn clean install -PautoInstallSinglePackage.

Configuración de Experience Platform aep-setup

Para recibir y almacenar los datos de evento procedentes de las páginas de Commerce de AEM, como la categoría y el producto, complete los siguientes pasos:

AVAILABILITY

Asegúrese de que forma parte de los perfiles de producto correctos en Adobe Experience Platform y Recopilación de datos de Adobe Experience Platform. Si es necesario, trabaje con el administrador del sistema para crear, actualizar o asignar perfiles de producto en Admin Console.

Crear esquema con el grupo de campos de Commerce create-schema

Para definir la estructura de los datos de evento de comercio, debe crear un esquema del Modelo de datos de experiencia (XDM). Un esquema es un conjunto de reglas que representan y validan la estructura y el formato de los datos.

En el explorador, vaya a la página de inicio del producto Adobe Experience Platform. Por ejemplo, https://experience.adobe.com/#/@YOUR-ORG-NAME/sname:prod/platform/home.
Busque el menú Esquemas en la sección de navegación izquierda, haga clic en el botón Crear esquema de la sección superior derecha y seleccione XDM ExperienceEvent.
Asigne un nombre al esquema mediante el campo Propiedades del esquema > Nombre para mostrar y agregue grupos de campos mediante el botón Composición > Grupos de campos > Agregar.
En el cuadro de diálogo Agregar grupos de campos, busque Commerce, seleccione la casilla Detalles de Commerce y haga clic en Agregar grupos de campos.

TIP

Vea los conceptos básicos de la composición de esquemas para obtener más información.

Crear conjunto de datos create-dataset

Para almacenar los datos de evento, debe crear un Conjunto de datos que se ajuste a la definición del esquema. Un conjunto de datos es una construcción de almacenamiento y administración para una colección de datos (normalmente una tabla) que contiene un esquema (columnas) y campos (filas).

En el explorador, vaya a la página de inicio del producto Adobe Experience Platform. Por ejemplo, https://experience.adobe.com/#/@YOUR-ORG-NAME/sname:prod/platform/home.
Busque el menú Conjuntos de datos en la sección de navegación izquierda y haga clic en el botón Crear conjunto de datos de la sección superior derecha.
En la nueva página, seleccione la tarjeta Crear conjunto de datos a partir del esquema.

En la nueva página, busque y seleccione el esquema que creó en el paso anterior y haga clic en el botón Siguiente.
Asigne un nombre al conjunto de datos utilizando el campo Configurar conjunto de datos > Nombre y haga clic en el botón Finalizar.

TIP

Consulte la Información general de conjuntos de datos para obtener más información.

Crear flujo de datos create-datastream

Complete los siguientes pasos para poder crear una secuencia de datos en Experience Platform.

En el explorador, vaya a la página de inicio del producto Adobe Experience Platform. Por ejemplo, https://experience.adobe.com/#/@YOUR-ORG-NAME/sname:prod/platform/home.
Busque el menú Datastreams en la sección de navegación izquierda y haga clic en el botón Nuevo flujo de datos en la sección superior derecha.
Asigne un nombre a su secuencia de datos utilizando el campo obligatorio Name. En el campo Esquema de evento, seleccione el esquema creado y haga clic en Guardar.
Abra la secuencia de datos creada y haga clic en Agregar servicio.
En el campo Servicio, seleccione la opción Adobe Experience Platform. En el campo Conjunto de datos de evento, seleccione el nombre del conjunto de datos del paso anterior y haga clic en Guardar.

TIP

Consulte la Información general de secuencia de datos para obtener más información.

Añadir valor de secuencia de datos a la configuración de AEM Commerce add-aep-values-to-aem

Después de completar la configuración de Experience Platform anterior, debería tener datastreamId en el carril izquierdo de los detalles de la secuencia de datos y orgId en la esquina superior derecha del modal Imagen de perfil > Información de cuenta > Información del usuario.

ID de flujos de datos de AEP

En el módulo ui.frontend del proyecto AEM Commerce, actualice el archivo config.js y, específicamente, las propiedades del objeto eventsCollector > aep.
Cree e implemente el proyecto actualizado de AEM Commerce

Déclencheur el evento `addToCart` y compruebe la recopilación de datos event-trigger-verify

Los pasos anteriores completan la configuración de AEM Commerce y Experience Platform. Ahora puede almacenar en déclencheur un evento addToCart y comprobar la recopilación de datos con la extensión de Google Chrome Inspector Snowplow y el conjunto de datos Métricas y gráficos en la interfaz de usuario del producto.

Para almacenar el evento en déclencheur, puede utilizar el autor de AEM o el servicio de publicación desde la configuración local. Para este ejemplo, inicie sesión en su cuenta para utilizar el autor de AEM.

En la página Sitios, seleccione la página Mi StoreFront de demostración > usar > en y haga clic en Editar en la barra de acciones superior.
En la barra de acciones superior, haz clic en Ver como publicado y luego haz clic en cualquier categoría preferida en la navegación de la tienda.
Haga clic en cualquier tarjeta de producto preferida de la página de productos y, a continuación, seleccione color, tamaño para habilitar el botón Agregar al carro de compras.
Abra la extensión Snowplow Inspector en el panel de extensión del explorador y seleccione Experience Platform Wed SDK en el carril izquierdo.
Vuelva a la página de productos y haga clic en el botón Agregar al carro. Esto envía datos a Experience Platform. La extensión Adobe Experience Platform Debugger muestra los detalles del evento.
En la interfaz de usuario del producto de Experience Platform, vaya a Conjuntos de datos > Mi tienda de demostración, en la pestaña Actividad del conjunto de datos. Si Métricas y gráficos está habilitado, se mostrarán las estadísticas de datos de evento.

Detalles de implementación implementation-details

El conector Experience Platform de CIF se basa en la conexión de datos para Adobe Commerce, que forma parte del proyecto PWA Studio.

El proyecto de PWA Studio le permite crear tiendas de Progressive Web Application (PWA) con la tecnología de Adobe Commerce o Magento Open Source. El proyecto también contiene una biblioteca de componentes llamada Peregrin para agregar lógica a los componentes visuales. La biblioteca Peregrin también proporciona los vínculos React personalizados que usa CIF Experience Platform Connector para integrarse perfectamente con Experience Platform.

Eventos admitidos supported-events

A partir de ahora, se admiten los siguientes eventos:

Eventos XDM de experiencia :

Añadir al carro (AEM)
Ver página (AEM)
Ver producto (AEM)
Solicitud de búsqueda enviada (AEM)
Respuesta de búsqueda recibida (AEM)

Cuando se reutilizan componentes peregrinos en el proyecto de AEM Commerce:

Eventos XDM de experiencia :

Eliminar del carro
Abrir carro
Ver carro
Compra instantánea
Iniciar cierre de compra
Finalizar pago y envío

Eventos XDM de perfil :

Iniciar sesión
Crear cuenta
Editar cuenta

Recursos adicionales additional-resources

Para obtener más información, consulte los siguientes recursos:

recommendation-more-help

fbcff2a9-b6fe-4574-b04a-21e75df764ab

Integración de componentes principales de AEM y CIF con Adobe Experience Platform aem-cif-aep-integration

Enviar datos de evento addToCart a Experience Platform send-addtocart-to-aep

Requisitos previos prerequisites

Configuración de AEM Commerce as a Cloud Service aem-setup

Configuración local

Configuración del proyecto

Instalación de las dependencias del conector Peregrine y CIF-AEP

Configurar Maven para que use el argumento --force

Cambiar el formato de configuración de Babel

Configurar Webpack para usar Babel

Configurar el cliente Apollo

Inicialización de los componentes principales de Peregrine y CIF

Cree e implemente el proyecto de AEM actualizado build-and-deploy

Configuración de Experience Platform aep-setup

Crear esquema con el grupo de campos de Commerce create-schema

Crear conjunto de datos create-dataset

Crear flujo de datos create-datastream

Añadir valor de secuencia de datos a la configuración de AEM Commerce add-aep-values-to-aem

Déclencheur el evento addToCart y compruebe la recopilación de datos event-trigger-verify

Detalles de implementación implementation-details

Eventos admitidos supported-events

Recursos adicionales additional-resources

Enviar datos de evento `addToCart` a Experience Platform send-addtocart-to-aep

Configurar Maven para que use el argumento `--force`

Déclencheur el evento `addToCart` y compruebe la recopilación de datos event-trigger-verify