Documentazione AEM as a Cloud Service Guida utente

Componenti core AEM-CIF e integrazione con Adobe Experience Platform aem-cif-aep-integration

Last update: Tue Mar 12 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Argomenti:
Commerce Integration Framework

Creato per:

Beginner
Developer

Il Commerce integration framework (CIF) I componenti core forniscono un’integrazione perfetta con Adobe Experience Platform per inoltrare gli eventi storefront e i relativi dati da interazioni lato client, ad esempio aggiungi al carrello.

Il Componenti core dell’CIF dell’AEM Il progetto fornisce una libreria JavaScript denominata Connettore Adobe Experience Platform per Adobe Commerce per raccogliere i dati dell’evento dalla vetrina Commerce. I dati dell’evento vengono inviati all’Experience Platform in cui vengono utilizzati in altri prodotti Adobe Experience Cloud, come Adobe Analytics e Adobe Target, per creare un profilo a 360 gradi che copre un percorso di clienti. Collegando i dati di Commerce ad altri prodotti in Adobe Experience Cloud, puoi eseguire attività come analizzare il comportamento degli utenti sul tuo sito, eseguire test AB e creare campagne personalizzate.

Ulteriori informazioni su Raccolta dati di Experienci Platform una suite di tecnologie che consente di raccogliere i dati sull’esperienza del cliente da origini lato client.

Invia `addToCart` dati evento da Experience Platform send-addtocart-to-aep

I passaggi seguenti mostrano come inviare addToCart dati evento dalle pagine di prodotti sottoposte a rendering AEM all’Experience Platform utilizzando il connettore CIF - Experience Platform. Utilizzando l’estensione del browser Adobi Experience Platform Debugger, puoi verificare e rivedere i dati inviati.

Rivedi i dati dell’evento addToCart in Adobe Experience Platform Debugger

Prerequisiti prerequisites

Utilizza un ambiente di sviluppo locale per completare questa demo. Ciò include un’istanza in esecuzione dell’AEM configurata e connessa a un’istanza Adobe Commerce. Rivedi i requisiti e i passaggi per configurazione dello sviluppo locale con SDK di AEM as a Cloud Service.

È inoltre necessario accedere a Adobe Experience Platform e le autorizzazioni per creare schemi, set di dati e flussi di dati per la raccolta dati. Per ulteriori informazioni, consulta Gestione delle autorizzazioni.

Configurazione as a Cloud Service per Commerce AEM aem-setup

Per avere un lavoro AEM Commerce as a Cloud Service nell’ambiente locale con il codice e la configurazione necessari, completa i passaggi seguenti.

Configurazione locale

Segui le Configurazione locale per poter disporre di un ambiente as a Cloud Service per l’AEM Commerce funzionante.

Configurazione del progetto

Segui le Archetipo progetto AEM per creare un nuovo progetto AEM Commerce (CIF).

TIP

Nell’esempio seguente, il progetto Commerce dell’AEM è denominato: My Demo StorefrontTuttavia, puoi scegliere il nome del tuo progetto.

Progetto Commerce AEM

Crea e distribuisci il progetto AEM Commerce creato nell’SDK AEM locale eseguendo il seguente comando dalla directory principale del progetto.

$ mvn clean install -PautoInstallSinglePackage

Il implementato localmente My Demo StoreFront il sito commerce con codice e contenuto predefiniti si presenta come segue:

Sito AEM Commerce predefinito

Installare le dipendenze dei connettori Peregrine e CIF-AEP

Per raccogliere e inviare i dati dell’evento dalle pagine delle categorie e dei prodotti di questo sito AEM Commerce, installa la chiave npm pacchetti in ui.frontend modulo del progetto AEM Commerce.

Accedi a ui.frontend e installare i pacchetti richiesti eseguendo i seguenti comandi dalla riga di comando.

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

Il --force è richiesto a volte come PWA Studi è restrittivo con le dipendenze dei peer supportate. Di solito, questo non dovrebbe causare alcun problema.

Configurare Maven per l’utilizzo `--force` argomento

Come parte del processo di build Maven, il npm clean install (con npm ci) viene attivato. Ciò richiede anche --force argomento.

Passa al file POM principale del progetto pom.xml e individuare <id>npm ci</id> blocco di esecuzione. Aggiorna il blocco come segue:

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

Cambia il formato di configurazione di Babel

Passa dal valore predefinito .babelrc file configurazione relativa formato file a babel.config.js formato. Si tratta di un formato di configurazione per l’intero progetto e consente di applicare i plug-in e i predefiniti al node_module con un maggiore controllo.

Accedi a ui.frontend ed eliminare il .babelrc file.

Creare un babel.config.js file che utilizza peregrine predefinito.

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

Configurare il webpack per l'utilizzo di Babel

Per eseguire la transpilazione dei file JavaScript mediante Babel loader (babel-loader) e webpack, modifica il webpack.common.js file.

Accedi a ui.frontend e aggiorna il webpack.common.js in modo da poter disporre della seguente regola all'interno del module valore proprietà:

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

Configura client Apollo

Il Client Apollo viene utilizzato per gestire dati locali e remoti con GraphQL. Memorizza inoltre i risultati delle query GraphQL in una cache locale normalizzata in memoria.

Per InMemoryCache per funzionare in modo efficace, è necessario possibleTypes.js file. Per generare questo file, vedi Generazione automatica di possibleTypes. Inoltre, consulta Implementazione di riferimento PWA Studi e un esempio di possibleTypes.js file.

Accedi a ui.frontend e salva il file con nome ./src/main/possibleTypes.js

Aggiornare il webpack.common.js del file DefinePlugin in modo da poter sostituire le variabili statiche richieste durante la generazione.

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
    })
]

Inizializzare i componenti core Peregrine e CIF

Per inizializzare i componenti core Peregrine e CIF basati su React, crea la configurazione e i file JavaScript richiesti.

Accedi a ui.frontend e crea la seguente cartella: src/main/webpack/components/commerce/App

Creare un config.js file con il seguente contenuto:

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
IMPORTANT
Anche se forse conosci già le `config.js` file da Guide AEM - Progetto CIF Venia, è necessario apportare alcune modifiche a questo file. Prima di tutto, rivedi qualsiasi ATTIVITÀ commenti. Quindi, all’interno del `eventsCollector` , trova il `eventsCollector > aep` e aggiornare `orgId` e `datastreamId` ai valori corretti. Ulteriori informazioni.

Creare un App.js file con il seguente contenuto. Questo file è simile a un tipico file del punto di avvio dell’applicazione React e contiene gli hook React e personalizzati e l’utilizzo di React Context per facilitare l’integrazione con 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
    );
};

Il EventCollectorContext esporta il contesto React che:

carica la libreria commerce-events-sdk e commerce-events-collector,
li inizializza con una determinata configurazione, ad Experience Platform e/o ACDS
si abbona a tutti gli eventi da Peregrine e li inoltra all’SDK degli eventi

Puoi rivedere i dettagli di implementazione di EventCollectorContext qui.

Creare e distribuire il progetto AEM aggiornato

Per verificare che le modifiche di installazione, codice e configurazione del pacchetto di cui sopra siano corrette, ricompila e distribuisci il progetto Commerce dell’AEM aggiornato utilizzando il seguente comando Maven: $ mvn clean install -PautoInstallSinglePackage.

Configurazione Experience Platform aep-setup

La procedura seguente illustra come ricevere e memorizzare i dati dell’evento provenienti dalle pagine di AEM Commerce, ad esempio categoria e prodotto:

AVAILABILITY

Assicurati di fare parte della Profili di prodotto in Adobe Experience Platform e Raccolta dati di Adobe Experience Platform. Se necessario, rivolgiti all’amministratore di sistema per creare, aggiornare o assegnare Profili di prodotto sotto Admin Console.

Crea schema con gruppo di campi Commerce

Per definire la struttura per i dati dell’evento Commerce, devi creare uno schema Experience Data Model (XDM). Uno schema è un insieme di regole che rappresentano e convalidano la struttura e il formato dei dati.

Nel browser, passa a Adobe Experience Platform home page del prodotto. Esempio: https://experience.adobe.com/#/@YOUR-ORG-NAME/sname:prod/platform/home.
Individua il Schemi nella sezione di navigazione a sinistra, fai clic sul pulsante Crea schema nella sezione in alto a destra e seleziona XDM ExperienceEvent.
Denomina lo schema utilizzando Proprietà schema > Nome visualizzato e aggiungere gruppi di campi utilizzando Composizione > Gruppi di campi > Aggiungi pulsante.
In Aggiungi gruppi di campi finestra di dialogo, cerca Commerce, seleziona la Dettagli Commerce e fai clic su Aggiungi gruppi di campi.

TIP

Consulta la Nozioni di base sulla composizione dello schema per ulteriori informazioni.

Crea set di dati

Per memorizzare i dati dell’evento, è necessario creare un set di dati conforme alla definizione dello schema. Un set di dati è un costrutto di archiviazione e gestione per una raccolta di dati, in genere una tabella, che contiene uno schema (colonne) e dei campi (righe).

Nel browser, passa a Adobe Experience Platform home page del prodotto. Esempio: https://experience.adobe.com/#/@YOUR-ORG-NAME/sname:prod/platform/home.
Individua il Set di dati nella sezione di navigazione a sinistra e fai clic sul pulsante Crea set di dati nella sezione in alto a destra.
Nella nuova pagina, seleziona Crea set di dati dallo schema Card.

Nella nuova pagina, cerca e seleziona dello schema creato nel passaggio precedente, quindi fare clic sul pulsante Successivo pulsante.
Denomina il set di dati utilizzando Configura set di dati > Nome e fare clic sul pulsante Fine pulsante.

TIP

Consulta la Panoramica sui set di dati per ulteriori informazioni.

Crea stream di dati

Completa i passaggi seguenti per creare uno stream di dati nell’Experience Platform.

Nel browser, passa a Adobe Experience Platform home page del prodotto. Esempio: https://experience.adobe.com/#/@YOUR-ORG-NAME/sname:prod/platform/home.
Individua il Flussi di dati nella sezione di navigazione a sinistra e fai clic sul pulsante Nuovo flusso di dati nella sezione in alto a destra.
Denomina lo stream di dati utilizzando Nome campo obbligatorio. Sotto Schema Evento , seleziona lo schema creato e fai clic su Salva.
Apri lo stream di dati creato e fai clic su Aggiungi servizio.
Sotto Servizio , selezionare il campo Adobe Experience Platform opzione. Sotto Set di dati evento , seleziona il nome del set di dati dal passaggio precedente e fai clic su Salva.

TIP

Consulta la Panoramica sullo stream di dati per ulteriori informazioni.

Aggiungere valore dello stream di dati nella configurazione Commerce dell’AEM add-aep-values-to-aem

Dopo aver completato la configurazione di Experience Platform, datastreamId nella barra a sinistra dei dettagli dello stream di dati e orgId nell'angolo in alto a destra del Immagine profilo > Informazioni account > Informazioni utente modale.

ID flussi di dati AEP

Nel progetto Commerce dell’AEM ui.frontend , aggiorna il config.js e in particolare eventsCollector > aep proprietà oggetto.
Creare e distribuire il progetto Commerce dell’AEM aggiornato

Trigger `addToCart` raccolta dati evento e verifica event-trigger-verify

I passaggi precedenti completano la configurazione di AEM Commerce ed Experience Platform. Ora puoi attivare un’ addToCart Evento e verifica della raccolta dati tramite l’estensione Google Chrome Ispettore Snowplow e set di dati Metriche e grafici nell’interfaccia utente del prodotto.

Per attivare l’evento, puoi utilizzare il servizio di creazione AEM o il servizio di pubblicazione dalla configurazione locale. Per questo esempio, utilizza AEM Author effettuando l’accesso al tuo account.

Dalla pagina Sites, seleziona la Il mio store demoFront > us > it pagina e fai clic su Modifica nella barra delle azioni superiore.
Dalla barra delle azioni in alto, fai clic su Visualizza come pubblicato, quindi fai clic su una categoria preferita nella navigazione della vetrina.
Fai clic su una scheda dei prodotti preferiti in Pagina prodotto, quindi seleziona colore, dimensione per attivare Aggiungi al carrello pulsante.
Apri Ispettore Snowplow dal pannello delle estensioni del browser e seleziona Experienci Platform Wed SDK nella barra a sinistra.
Torna a Pagina prodotto e fai clic su Aggiungi al carrello pulsante. In questo modo i dati vengono inviati a Experience Platform. Il Adobe Experience Platform Debugger L'estensione mostra i dettagli dell'evento.
Nell’interfaccia utente di Experienci Platform, passa a Set di dati > Il mio archivio demoFront, sotto il Attività set di dati scheda. Se Metriche e grafici è attivato, vengono visualizzate le statistiche dei dati evento.

Dettagli di implementazione implementation-details

Il Connettore di Experience Platform CIF è basato su Connessione dati per Adobe Commerce, che fa parte del PWA Studi progetto.

Il progetto PWA Studi consente di creare vetrine di Progressive Web Application (PWA) basate su Adobe Commerce o Magento Open Source. Il progetto contiene anche una libreria di componenti denominata Peregrina per aggiungere logica ai componenti visivi. Il Libreria Peregrin fornisce anche gli hook React personalizzati utilizzati da Connettore di Experience Platform CIF integrarsi perfettamente con Experienci Platform.

Eventi supportati supported-events

Al momento, sono supportati i seguenti eventi:

Eventi Experience XDM:

Aggiungi al carrello (AEM)
Visualizza pagina (AEM)
Visualizza prodotto (AEM)
Richiesta di ricerca inviata (AEM)
Risposta di ricerca ricevuta (AEM)

Quando Componenti peregrini sono riutilizzati nel progetto Commerce dell’AEM:

Eventi Experience XDM:

Rimuovi dal carrello
Apri carrello
Visualizza carrello
Acquisto immediato
Avvia estrazione
Completa il checkout

Eventi XDM per profilo:

Accedi
Crea account
Modifica account

Risorse aggiuntive additional-resources

Per ulteriori informazioni, consulta le risorse seguenti:

recommendation-more-help

fbcff2a9-b6fe-4574-b04a-21e75df764ab

Componenti core AEM-CIF e integrazione con Adobe Experience Platform aem-cif-aep-integration

Invia addToCart dati evento da Experience Platform send-addtocart-to-aep

Prerequisiti prerequisites

Configurazione as a Cloud Service per Commerce AEM aem-setup

Configurazione locale

Configurazione del progetto

Installare le dipendenze dei connettori Peregrine e CIF-AEP

Configurare Maven per l’utilizzo --force argomento

Cambia il formato di configurazione di Babel

Configurare il webpack per l'utilizzo di Babel

Configura client Apollo

Inizializzare i componenti core Peregrine e CIF

Creare e distribuire il progetto AEM aggiornato

Configurazione Experience Platform aep-setup

Crea schema con gruppo di campi Commerce

Crea set di dati

Crea stream di dati

Aggiungere valore dello stream di dati nella configurazione Commerce dell’AEM add-aep-values-to-aem

Trigger addToCart raccolta dati evento e verifica event-trigger-verify

Dettagli di implementazione implementation-details

Eventi supportati supported-events

Risorse aggiuntive additional-resources

Invia `addToCart` dati evento da Experience Platform send-addtocart-to-aep

Configurare Maven per l’utilizzo `--force` argomento

Trigger `addToCart` raccolta dati evento e verifica event-trigger-verify