AEM Integración de componentes principales del CIF de y Adobe Experience Platform

El Commerce Integration Framework (CIF) Los componentes principales proporcionan una integración perfecta con Adobe Experience Platform para reenviar eventos de tienda y sus datos desde interacciones del lado del cliente, como añadir al carro.

El AEM Componentes principales de CIF El proyecto proporciona una biblioteca JavaScript llamada Conector de Adobe Experience Platform para Adobe Commerce para recopilar datos de evento de su tienda de Commerce. Esos datos de evento se envían al 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 a otros productos de Adobe Experience Cloud, puede realizar tareas como analizar el comportamiento del usuario en el sitio, realizar pruebas AB y crear campañas personalizadas.

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

Enviar addToCart datos de evento para el Experience Platform

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

Requisitos previos

Debe utilizar un entorno de desarrollo local para completar esta demostración. AEM Esto incluye una instancia de ejecución de la instancia de que está configurada y conectada a una instancia de Adobe Commerce. Revise los requisitos y pasos para AEM configuración del desarrollo local con el SDK as a Cloud Service de.

También necesita acceder a Adobe Experience Platform y permisos para crear el esquema, el conjunto de datos y las secuencias de datos para la recopilación de datos. Para obtener más información, consulte Administración de permisos.

AEM Configuración as a Cloud Service de comercio de

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

Configuración local

Siga las Configuración local AEM Pasos para tener un entorno as a Cloud Service de Commerce en funcionamiento.

Configuración del proyecto

Siga las AEM Tipo de archivo del proyecto AEM Pasos para crear un proyecto de Commerce (CIF) completamente nuevo.

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

$ mvn clean install -PautoInstallSinglePackage

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

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

AEM Para recopilar y enviar los datos de evento desde las páginas de categoría y producto de este sitio de comercio de la, debe instalar la clave npm paquetes en la ui.frontend AEM módulo del proyecto de comercio de la.

Vaya a 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

Configuración de Maven para utilizar --force discusión

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

Vaya al archivo POM raíz del proyecto pom.xml y busque el <id>npm ci</id> bloque de ejecución. 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

Cambiar del valor predeterminado .babelrc archivo de configuración relativa formato de archivo a babel.config.js formato. Se trata de un formato de configuración para todo el proyecto y permite aplicar los complementos y ajustes preestablecidos al node_module con el bueno control.

1. Vaya a ui.frontend y elimine el existente .babelrc archivo.

2. Crear un babel.config.js que utiliza el peregrine ajuste preestablecido.

   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 JavaScript con el cargador Babel (babel-loader) y webpack, debe modificar el webpack.common.js archivo.

Vaya a ui.frontend y actualice el módulo webpack.common.js para tener la siguiente regla dentro de la variable module valor de propiedad:

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

Configurar el cliente Apollo

El Cliente Apollo se utiliza 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 InMemoryCache para trabajar de forma eficaz, necesita un possibleTypes.js archivo. Para generar este archivo, consulte Generación automática de possibleTypes. Consulte también la implementación de referencia del PWA Studio y un ejemplo de possibleTypes.js archivo.

1. Vaya a ui.frontend y guarde el archivo como ./src/main/possibleTypes.js

2. Actualice el webpack.common.js del archivo DefinePlugin para reemplazar las variables estáticas requeridas durante el tiempo de compilación.

   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 Peregrine y CIF basados en React, cree la configuración y los archivos JavaScript necesarios.

1. Vaya a ui.frontend y cree la siguiente carpeta: src/main/webpack/components/commerce/App

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

   // 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: {
           // Enable the Experience Platform Connector and define the org and datastream to use
           aep: {
               orgId: // TODO: add your orgId
               datastreamId: // TODO: add your datastreamId
           }
       }
   };
   

   IMPORTANTE

   Aunque es posible que ya esté familiarizado con el config.js archivo de AEM Guias de viaje - Proyecto Venia en CIF Sin embargo, hay algunos cambios que debe realizar en este archivo. Primero, revise cualquier PENDIENTE comentarios. A continuación, dentro de eventsCollector propiedad, busque la variable eventsCollector > aed y actualice el orgId y datastreamId a los valores correctos. Más información.

3. Crear un 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 vínculos React y Personalizado, así como el uso de React Context para facilitar la integración del Experience Platform.

   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 we 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
       );
   };
   

   El 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 al SDK de eventos

   Puede revisar los detalles de implementación de EventCollectorContext aquí.

AEM Creación e implementación del proyecto de actualizado

AEM 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 Commerce actualizado mediante el siguiente comando de Maven: $ mvn clean install -PautoInstallSinglePackage.

configuración del Experience Platform

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

Crear esquema con el grupo de campos Comercio

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.

1. En el explorador, vaya a Adobe Experience Platform Página de inicio del producto. Por ejemplo, https://experience.adobe.com/#/@YOUR-ORG-NAME/sname:prod/platform/home.

2. Busque el Esquemas en la sección de navegación izquierda, haga clic en el Crear esquema en la sección superior derecha y seleccione. ExperienceEvent de XDM.

   

3. Asigne un nombre al esquema mediante la variable Propiedades del esquema > Nombre para mostrar y añadir grupos de campos mediante el Composición > Grupos de campos > Añadir botón.

   

4. En el Agregar grupos de campos diálogo, buscar Commerce, seleccione la Detalles de comercio y haga clic en Agregar grupos de campos.

   

Crear conjunto de datos

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).

1. En el explorador, vaya a Adobe Experience Platform Página de inicio del producto. Por ejemplo, https://experience.adobe.com/#/@YOUR-ORG-NAME/sname:prod/platform/home.

2. Busque el 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.

   

3. En la nueva página, seleccione Crear conjunto de datos a partir de esquema Tarjeta de.

   

• En la nueva página, buscar y seleccionar Seleccione el esquema que ha creado en el paso anterior y haga clic en Siguiente botón.

  

1. Asigne un nombre al conjunto de datos mediante Configurar conjunto de datos > Nombre y haga clic en el Finalizar botón.

   

Crear flujo de datos

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

1. En el explorador, vaya a Adobe Experience Platform Página de inicio del producto. Por ejemplo, https://experience.adobe.com/#/@YOUR-ORG-NAME/sname:prod/platform/home.

2. Busque el Datastreams en la sección de navegación izquierda y haga clic en el botón Nueva secuencia de datos de la sección superior derecha.

   

3. Asigne un nombre a la secuencia de datos mediante Nombre campo obligatorio. En el Esquema de evento , seleccione el esquema recién creado y haga clic en Guardar.

   

4. Abra la secuencia de datos recién creada y haga clic en Añadir servicio.

   

5. En el Servicio , seleccione el campo Adobe Experience Platform opción. En Conjunto de datos de evento , seleccione el nombre del conjunto de datos del paso anterior y haga clic en Guardar.

   

AEM Añadir valor de flujo de datos a la configuración de comercio de

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

1. AEM En el proyecto de comercio de la ui.frontend módulo, actualice el config.js y, específicamente, el eventsCollector > aep propiedades del objeto.

2. AEM Cree e implemente el proyecto actualizado de Commerce

Déclencheur addToCart y verificar la recopilación de datos

AEM Los pasos anteriores completan la configuración de comercio y Experience Platform de la. Ahora puede almacenar en déclencheur una addToCart y comprobar la recopilación de datos con el depurador de Experience Platform y el conjunto de datos Métricas y gráficos en la interfaz de usuario del producto.

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

1. En la página Sitios, seleccione Mi tienda de demostraciónFront > us > es y haga clic en Editar en la barra de acciones superior.

2. En la barra de acciones superior, haga clic en Ver como aparece publicado, luego haz clic en cualquier categoría preferida en la navegación de la tienda.

3. Haga clic en cualquier tarjeta de producto preferida de la Página de productos, luego seleccione color, tamaño para habilitar el Añadir al carro botón.

4. Abra el Adobe Experience Platform Debugger en el panel de extensiones del explorador y seleccione. SDK de Experience Platform Wed en el carril izquierdo.

   

5. Vuelva a la Página de productos y haga clic en Añadir al carro botón. Esto envía datos al Experience Platform. El Adobe Experience Platform Debugger La extensión muestra los detalles del evento.

   

6. En la interfaz de usuario del producto de Experience Platform, vaya a Conjuntos de datos > Mi tienda de demostraciónFront, en Actividad de conjunto de datos pestaña. Si la variable Métricas y gráficos Cuando la opción está activada, se muestran las estadísticas de datos del evento.

   

Detalles de implementación

El Conector del Experience Platform del CIF se basa en el Conector de Experience Platform para Adobe Commerce, que forma parte del PWA Studio proyecto.

El proyecto PWA Studio permite crear tiendas de Progressive Web Application (PWA) con Adobe Commerce o Magento Open Source. El proyecto también contiene una biblioteca de componentes llamada Peregrina para agregar lógica a los componentes visuales. El Biblioteca Peregrina también proporciona los vínculos React personalizados que utilizan Conector del Experience Platform para integrarse perfectamente con Experience Platform.

Eventos admitidos

A partir de ahora, se admiten los siguientes eventos:

Eventos de Experience XDM:

1. AEM Añadir al carro ()
2. AEM Ver página ()
3. AEM Ver producto ()
4. AEM Solicitud de búsqueda enviada ()
5. AEM Respuesta de búsqueda recibida ()

Cuándo Componentes de Peregrine AEM se reutilizan en el proyecto de comercio de la:

Eventos de Experience XDM:

1. Eliminar del carro
2. Abrir carro
3. Ver carro
4. Compra instantánea
5. Iniciar cierre de compra
6. Finalizar pago y envío

Eventos XDM de perfil:

1. Iniciar sesión
2. Crear cuenta
3. Editar cuenta

Recursos adicionales

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

• PWA Studio
• información general sobre el conector del Experience Platform
• Eventos del conector del Experience Platform
• Información general de Adobe Experience Platform

Recursos de Business.Adobe.com