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.
addToCart
datos de evento para el Experience PlatformLos 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 CIF mediante el conector de Experience Platform de la interfaz de usuario de. Con la extensión del explorador de Adobe Experience Platform Debugger, puede probar y revisar los datos enviados.
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.
Para tener un AEM Commerce as a Cloud Service entorno local con el código y la configuración necesarios, complete los siguientes pasos.
Siga las Configuración local AEM Pasos para tener un entorno as a Cloud Service de Commerce en funcionamiento.
Siga las AEM Tipo de archivo del proyecto AEM CIF Pasos para crear un nuevo proyecto de comercio de la ().
AEM En el ejemplo siguiente, el nombre del proyecto de comercio de es: My Demo Storefront
Sin embargo, puede elegir su propio nombre de proyecto.
AEM AEM Cree e implemente el proyecto de Commerce creado en el SDK de la local 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:
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
El --force
se requiere a veces como PWA Studio es restrictivo con las dependencias del mismo nivel admitidas. Normalmente, esto no debería causar ningún problema.
--force
discusiónComo 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 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 mayor control.
Vaya a ui.frontend
y elimine el existente .babelrc
archivo.
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;
}
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'
}
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.
Vaya a ui.frontend
y guarde el archivo como ./src/main/possibleTypes.js
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
})
]
CIF Para inicializar los componentes principales y de Peregrine basados en React, cree la configuración y los archivos JavaScript necesarios.
Vaya a ui.frontend
y cree la siguiente carpeta: src/main/webpack/components/commerce/App
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: {
eventForwarding: {
commerce: true,
aep: false,
}
}
};
Aunque es posible que ya esté familiarizado con el config.js
archivo de AEM CIF Guias de viaje en Venia - Proyecto Venia 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.
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 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
);
};
El EventCollectorContext
exporta el contexto de React que:
Puede revisar los detalles de implementación de EventCollectorContext
aquí.
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
.
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:
Asegúrese de que forma parte de la Perfiles de producto bajo 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 el Admin Console.
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 Adobe Experience Platform Página de inicio del producto. Por ejemplo, https://experience.adobe.com/#/@YOUR-ORG-NAME/sname:prod/platform/home.
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.
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.
En el Agregar grupos de campos diálogo, buscar Commerce
, seleccione la Detalles de comercio y haga clic en Agregar grupos de campos.
Consulte la Conceptos básicos de composición de esquemas para obtener más información.
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 Adobe Experience Platform Página de inicio del producto. Por ejemplo, https://experience.adobe.com/#/@YOUR-ORG-NAME/sname:prod/platform/home.
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.
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.
Asigne un nombre al conjunto de datos mediante Configurar conjunto de datos > Nombre y haga clic en el Finalizar botón.
Consulte la Información general sobre conjuntos de datos para obtener más información.
Complete los siguientes pasos para crear una secuencia de datos en el Experience Platform.
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.
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.
Asigne un nombre a la secuencia de datos mediante Nombre campo obligatorio. En el Esquema de evento , seleccione el esquema creado y haga clic en Guardar.
Abra la secuencia de datos creada y haga clic en Añadir servicio.
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.
Consulte la Resumen de flujo de datos para obtener más información.
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.
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.
AEM Cree e implemente el proyecto actualizado de Commerce
addToCart
y verificar la recopilación de datosAEM Los pasos anteriores completan la configuración de comercio y Experience Platform de la. Ahora puede almacenar en déclencheur una addToCart
y compruebe la recopilación de datos con el evento Inspector quitanieves y 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.
En la página Sitios, seleccione Mi tienda de demostraciónFront > us > es y haga clic en Editar en la barra de acciones superior.
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.
Haga clic en cualquier tarjeta de producto preferida de Página de productos, luego seleccione color, tamaño para habilitar el Añadir al carro botón.
Abra el Inspector quitanieves en el panel de extensiones del explorador y seleccione. SDK de Experience Platform Wed en el carril izquierdo.
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.
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.
El CIF Conector del Experience Platform de se basa en el Conexión de datos 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 CIF Conector del Experience Platform de para integrarse perfectamente con Experience Platform.
A partir de ahora, se admiten los siguientes eventos:
Eventos de Experience XDM:
Cuándo Componentes de Peregrine AEM se reutilizan en el proyecto de comercio de la:
Eventos de Experience XDM:
Eventos XDM de perfil:
Para obtener más información, consulte los siguientes recursos: