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

La variable Commerce Integration Framework (CIF) los componentes principales ofrecen una integración perfecta 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.

La variable Componentes principales del CIF de AEM project proporciona una biblioteca JavaScript llamada Conector de Adobe Experience Platform para Adobe Commerce para recopilar datos de evento de su tienda de Commerce. Los datos de ese 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 el recorrido de un cliente. Al conectar los datos de comercio con otros productos de Adobe Experience Cloud, puede realizar tareas como analizar el comportamiento de los usuarios en el sitio, realizar pruebas A/B y crear campañas personalizadas.

Obtenga más información sobre Recopilación de datos del 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 a Experience Platform

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

Revise los datos de eventos addToCart en Adobe Experience Platform Debugger.

Requisitos previos

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

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

Configuración as a Cloud Service de AEM Commerce

Para tener un trabajo 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 pasos para tener un entorno AEM Commerce as a Cloud Service.

Configuración del proyecto

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

SUGERENCIA

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

Proyecto AEM Commerce

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

$ mvn clean install -PautoInstallSinglePackage

Implementación local My Demo StoreFront sitio de comercio con código y contenido predeterminados tiene el siguiente aspecto:

Sitio AEM comercio predeterminado

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

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

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

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

Configurar Maven para usar --force argumento

Como parte del proceso de compilación de Maven, la instalación de npm clean (utilizando npm ci). Esto también requiere que --force argumento.

Vaya al archivo POM raíz del proyecto pom.xml y busque la variable <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 desde el valor predeterminado .babelrc formato de archivo de configuración relativa de archivo a babel.config.js formato. Este es un formato de configuración para todo el proyecto y permite aplicar los complementos y ajustes preestablecidos al node_module con bueno control.

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

  2. Cree un babel.config.js que utiliza la variable peregrine 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 el webpack para utilizar Babel

Para transformar los archivos JavaScript mediante Babel Loader (babel-loader) y el webpack, debe modificar el webpack.common.js archivo.

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

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

Configurar el cliente Apollo

La variable Cliente Apollo se utiliza para administrar datos locales y remotos con GraphQL. También almacena los resultados de las consultas de GraphQL en una caché local, normalizada y 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 la 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 necesarias 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
        })
    ]
    

Inicializar componentes principales de Peregrine y CIF

Para inicializar los componentes principales Peregrine y CIF basados en React, cree los archivos de configuración y JavaScript necesarios.

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

  2. Cree un config.js 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 del archivo Guías AEM - Proyecto Venia del CIF, hay algunos cambios que debe realizar en este archivo. Primero, revise cualquier TODO comentarios. A continuación, dentro de la variable eventsCollector busque la eventsCollector > aed y actualice la variable orgId y datastreamId propiedades con los valores correctos. Más información.

  3. Cree un App.js con el siguiente contenido. Este archivo se parece a un archivo de punto de inicio de aplicación React típico y contiene vínculos React y personalizados, así como el uso de Contexto React 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
        );
    };
    

    La variable EventCollectorContext exporta el contexto 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 del EventCollectorContext here.

Creación e implementación del proyecto AEM actualizado

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

configuración del Experience Platform

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

DISPONIBILIDAD

Asegúrese de que forma parte de las Perfiles de producto under 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.

Crear esquema con el grupo de campos Comercio

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

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

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

    Crear esquema de AEP

  3. Asigne un nombre al esquema mediante la variable Propiedades del esquema > Mostrar nombre y agregar grupos de campos utilizando la variable Composición > Grupos de campos > Agregar botón.

    Definición de esquema de AEP

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

    Definición de esquema de AEP

SUGERENCIA

Consulte la Aspectos básicos de la composición del esquema para obtener más información.

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 recopilación de datos, normalmente una tabla, que contiene un esquema (columnas) y campos (filas).

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

  2. Busque la variable Conjuntos de datos en la sección de navegación izquierda y haga clic en la Crear conjunto de datos en la sección superior derecha.

    Crear conjuntos de datos de AEP

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

    Opción Crear esquemas de conjuntos de datos de AEP

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

    Esquema de selección de conjuntos de datos de AEP

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

    Nombre de conjuntos de datos de AEP

SUGERENCIA

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

Crear conjunto de datos

Complete los siguientes pasos para crear un Datastream en el Experience Platform.

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

  2. Busque la variable Datastreams en la sección de navegación izquierda y haga clic en la Nuevo conjunto de datos en la sección superior derecha.

    Creación de almacenes de datos de AEP

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

    AEP Define Datastreams

  4. Abra el Datastream recién creado y haga clic en Añadir servicio.

    Servicio AEP Datastreams Add

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

    Detalles del servicio AEP Datastreams Add Service

SUGERENCIA

Consulte la Información general del almacén de datos para obtener más información.

Añadir el valor datastream a AEM configuración de Commerce

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

ID de Datastreams de AEP

  1. En el informe del proyecto AEM Commerce ui.frontend , actualice el config.js y específicamente el eventsCollector > aep propiedades del objeto.

  2. Cree e implemente el proyecto AEM Commerce actualizado

Déclencheur addToCart evento y verificación de la recopilación de datos

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

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

  1. En la página Sitios , seleccione My Demo StoreFront > us > en página y haga clic en Editar en la barra de acciones superior.

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

  3. Haga clic en cualquier tarjeta de producto preferida en la Página de productos y, a continuación, seleccione color, tamaño para habilitar la variable Agregar al carro botón.

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

    AEP Debugger

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

    Datos de eventos del complemento al carro de compras de AEP Debugger

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

    Estadísticas de conjuntos de datos de Experience Platform

Detalles de implementación

La variable Conector del Experience Platform del CIF se crea sobre la variable Experience Platform Connector para Adobe Commerce, que forma parte del PWA Studio proyecto.

El proyecto PWA Studio permite crear tiendas de Progressive Web Application (PWA) con tecnología de Adobe Commerce o Magento Open Source. El proyecto también contiene una biblioteca de componentes llamada Peregrin para añadir lógica a los componentes visuales. La variable Biblioteca pertinente también proporciona los vínculos React personalizados que utiliza el Conector del Experience Platform para integrarlo con Experience Platform sin problemas.

Eventos admitidos

A partir de ahora, se admiten los siguientes eventos:

Eventos XDM de experiencias:

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

When Componentes de Peregrine se vuelven a utilizar en el proyecto AEM Commerce:

Eventos XDM de experiencias:

  1. Eliminar del carro de compras
  2. Abrir carro
  3. Ver carro
  4. Compra instantánea
  5. Iniciar cierre de compra
  6. Completar cierre de compra

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:

En esta página