Dokumentation AEM as a Cloud Service Användarhandbok

AEM-CIF kärnkomponenter och integrering med Adobe Experience Platform aem-cif-aep-integration

Last update: Thu Aug 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Ämnen:
Commerce Integration Framework

Skapat för:

Nybörjare
Utvecklare

Kärnkomponenterna Commerce integration framework (CIF) är smidigt integrerade med Adobe Experience Platform för att vidarebefordra butikshändelser och deras data från interaktioner på klientsidan, som lägg till i kundvagnen.

Projektet AEM Core Components innehåller ett JavaScript-bibliotek med namnet Adobe Experience Platform Connector för Adobe Commerce som samlar in händelsedata från Commerce Store. Dessa händelsedata skickas till Experience Platform där de används i andra Adobe Experience Cloud-produkter, som Adobe Analytics och Adobe Target, för att skapa en helhetsprofil som täcker en kundresa. Genom att ansluta Commerce-data till andra produkter i Adobe Experience Cloud kan ni utföra uppgifter som att analysera användarbeteende på er webbplats, utföra AB-tester och skapa personaliserade kampanjer.

Läs mer om Experience Platform datainsamling med tekniker som gör att du kan samla in kundupplevelsedata från källor på klientsidan.

Skicka händelsedata för `addToCart` till Experience Platform send-addtocart-to-aep

I följande steg visas hur du skickar händelsedata för addToCart från AEM produktsidor till Experience Platform med hjälp av CIF-Experience Platform-kopplingen. Genom att använda webbläsartillägget Adobe Experience Platform Debugger kan du testa och granska skickade data.

Granska addToCart-händelsedata i Adobe Experience Platform Debugger

Förutsättningar prerequisites

Använd en lokal utvecklingsmiljö för att slutföra denna demo. Detta inkluderar en instans av AEM som körs och som är konfigurerad och ansluten till en Adobe Commerce-instans. Granska kraven och stegen för konfigurera lokal utveckling med AEM as a Cloud Service SDK.

Du behöver även åtkomst till Adobe Experience Platform och behörigheter för att skapa schema, datamängd och datastreams för datainsamling. Mer information finns i Behörighetshantering.

AEM Commerce as a Cloud Service aem-setup

Om du vill ha en fungerande AEM Commerce as a Cloud Service lokal miljö med den kod och konfiguration som krävs utför du följande steg.

Lokal installation

Följ stegen för Lokal konfiguration så att du kan ha en fungerande AEM Commerce as a Cloud Service-miljö.

Projektinställningar

Följ stegen för AEM Project Archetype så att du kan skapa ett helt nytt AEM Commerce (CIF)-projekt.

TIP

I följande exempel har det AEM Commerce-projektet namnet: My Demo Storefront, men du kan välja ett eget projektnamn.

AEM Commerce Project

Skapa och distribuera det skapade AEM Commerce-projektet till det lokala AEM SDK genom att köra följande kommando från projektets rotkatalog.

$ mvn clean install -PautoInstallSinglePackage

Den lokalt distribuerade e-handelswebbplatsen My Demo StoreFront med standardkod och standardinnehåll ser ut så här:

Standard AEM Commerce Site

Installera anslutningsberoenden för Premiere och CIF-AEP

Om du vill samla in och skicka händelsedata från kategori- och produktsidorna på den här AEM Commerce-webbplatsen installerar du nyckelpaketen npm i modulen ui.frontend i AEM Commerce-projekt.

Navigera till modulen ui.frontend och installera de nödvändiga paketen genom att köra följande kommandon från kommandoraden.

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

Argumentet --force krävs ibland eftersom PWA Studio är begränsat med peer-beroenden som stöds. Vanligtvis bör detta inte orsaka några problem.

Konfigurera Maven att använda argumentet `--force`

Som en del av byggprocessen för Maven utlöses den rena nPM-installationen (med npm ci). Detta kräver också argumentet --force.

Navigera till projektets POM-rotfil pom.xml och leta upp körningsblocket <id>npm ci</id>. Uppdatera blocket så att det ser ut så här:

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

Ändra konfigurationsformat för Label

Växla från standardfilformatet .babelrc relativt konfigurationsfilformat till formatet babel.config.js. Det här är ett projektövergripande konfigurationsformat och gör att plugin-program och förinställningar kan användas på node_module med större kontroll.

Navigera till modulen ui.frontend och ta bort den befintliga .babelrc-filen.

Skapa en babel.config.js-fil som använder förinställningen 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;
}

Konfigurera webbpaket för användning av babel

Redigera filen webpack.common.js om du vill transpilera JavaScript-filerna med Babel-inläsaren (babel-loader) och webbpaketet.

Navigera till modulen ui.frontend och uppdatera filen webpack.common.js så att du kan ha följande regel inuti egenskapsvärdet module:

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

Konfigurera Apollo-klient

Apollo-klienten används för att hantera både lokala data och fjärrdata med GraphQL. Resultaten av GraphQL-frågor lagras också i en lokal, normaliserad cache i minnet.

Du behöver en possibleTypes.js-fil för att InMemoryCache ska fungera effektivt. Mer information om hur du skapar den här filen finns i Generera possibleTypes automatiskt. Se även referensimplementeringen PWA Studio och ett exempel på en possibleTypes.js-fil.

Navigera till modulen ui.frontend och spara filen som ./src/main/possibleTypes.js

Uppdatera DefinePlugin-avsnittet för filen webpack.common.js så att du kan ersätta de statiska variablerna som krävs under byggtiden.

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

Initiera Peregrine och CIF kärnkomponenter

Skapa den konfiguration och de JavaScript-filer som krävs för att initiera den React-baserade Premiere och CIF kärnkomponenter.

Navigera till modulen ui.frontend och skapa följande mapp: src/main/webpack/components/commerce/App

Skapa en config.js-fil med följande innehåll:

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
Du kanske redan känner till filen `config.js` från AEM Guides - CIF Venia Project, men du måste göra några ändringar i filen. Granska först eventuella TODO-kommentarer. I egenskapen `eventsCollector` kan du sedan hitta objektet `eventsCollector > aep` och uppdatera egenskaperna `orgId` och `datastreamId` till rätt värden. Läs mer.

Skapa en App.js-fil med följande innehåll. Den här filen liknar en vanlig React-startpunktsfil och innehåller React- och anpassade kopplingar samt React Context-användning som underlättar integreringen mellan 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 exporterar React-kontexten som:

läser in biblioteket commerce-events-sdk och commerce-events-collector,
initierar dem med en viss konfiguration för Experience Platform och/eller ACDS
prenumererar på alla händelser från Premiere och vidarebefordrar dem till SDK:n

Du kan granska implementeringsinformationen för EventCollectorContext. Se aem-core-cif-components i GitHub.

Bygg och distribuera det uppdaterade AEM projektet

För att se till att ovanstående paketinstallation, kodändringar och konfigurationsändringar är korrekta återskapar och distribuerar du det uppdaterade AEM Commerce-projektet med följande Maven-kommando: $ mvn clean install -PautoInstallSinglePackage.

Inställningar för Experience Platform aep-setup

Så här tar du emot och lagrar händelsedata från de AEM Commerce-sidorna, t.ex. kategori och produkt:

AVAILABILITY

Kontrollera att du ingår i rätt produktprofiler under Adobe Experience Platform och Adobe Experience Platform datainsamling. Om det behövs kan du samarbeta med systemadministratören för att skapa, uppdatera eller tilldela produktprofiler under Admin Console.

Skapa schema med fältgruppen Commerce

Om du vill definiera strukturen för e-handelshändelsedata måste du skapa ett XDM-schema (Experience Data Model). Ett schema är en uppsättning regler som representerar och validerar datastrukturen och dataformatet.

Gå till startsidan för Adobe Experience Platform-produkten i webbläsaren. Exempel: https://experience.adobe.com/#/@YOUR-ORG-NAME/sname:prod/platform/home.
Leta upp menyn Scheman i det vänstra navigeringsavsnittet, klicka på knappen Skapa schema i det övre högra avsnittet och välj XDM ExperienceEvent.
Namnge schemat med hjälp av fältet Schemaegenskaper > Visningsnamn och lägg till fältgrupper med knappen Disposition > Fältgrupper > Lägg till.
I dialogrutan Lägg till fältgrupper söker du efter Commerce, markerar kryssrutan Commerce Details och klickar på Add Field groups.

TIP

Mer information finns i Grunderna för schemakomposition.

Skapa datauppsättning

Om du vill lagra händelsedata måste du skapa en datauppsättning som överensstämmer med schemadefinitionen. En datauppsättning är en lagrings- och hanteringskonstruktion för en datamängd, vanligtvis en tabell som innehåller ett schema (kolumner) och fält (rader).

Gå till startsidan för Adobe Experience Platform-produkten i webbläsaren. Exempel: https://experience.adobe.com/#/@YOUR-ORG-NAME/sname:prod/platform/home.
Leta reda på menyn Datauppsättningar i det vänstra navigeringsavsnittet och klicka på knappen Skapa datauppsättning i det övre högra avsnittet.
På den nya sidan väljer du Skapa datauppsättning från schemakort.

På den nya sidan söker och väljer det schema du skapade i föregående steg och klickar på knappen Nästa.
Namnge datauppsättningen med hjälp av fältet Konfigurera datauppsättning > Namn och klicka på knappen Slutför .

TIP

Mer information finns i Översikt över datauppsättningar.

Skapa dataström

Följ de här stegen för att skapa en dataström i Experience Platform.

Gå till startsidan för Adobe Experience Platform-produkten i webbläsaren. Exempel: https://experience.adobe.com/#/@YOUR-ORG-NAME/sname:prod/platform/home.
Leta reda på menyn Datastreams i det vänstra navigeringsavsnittet och klicka på knappen Ny datastream i det övre högra avsnittet.
Namnge ditt datastream med det obligatoriska fältet Namn. Under fältet Händelseschema markerar du det skapade schemat och klickar på Spara.
Öppna den skapade dataströmmen och klicka på Lägg till tjänst.
Under fältet Tjänst väljer du alternativet Adobe Experience Platform . Under fältet Händelsedatauppsättning markerar du datauppsättningsnamnet från föregående steg och klickar på Spara.

TIP

Mer information finns i Datastream-översikten.

Lägg till datastream-värde i AEM Commerce-konfiguration add-aep-values-to-aem

När du är klar med konfigurationen ovan för Experience Platform bör du ha datastreamId i den vänstra listen i dataströmsinformationen och orgId i det övre högra hörnet av profilbilden > Kontoinformation > Användarinformation modal.

AEP-datastreams-ID

Uppdatera config.js-filen och eventsCollector > aep -objektegenskaperna i AEM Commerce-projektmodulen ui.frontend.
Bygg och driftsätt det uppdaterade AEM Commerce-projektet

Utlös händelsen `addToCart` och verifiera datainsamling event-trigger-verify

Ovanstående steg avslutar installationen av AEM Commerce och Experience Platform. Nu kan du utlösa en addToCart-händelse och verifiera datainsamling med Google Chrome-tillägget Snöpflödesinspektören och datamängden Metrisk och grafer växlar i produktgränssnittet.

Om du vill utlösa händelsen kan du använda AEM författare eller publiceringstjänsten från din lokala konfiguration. I det här exemplet använder du AEM författare genom att logga in på ditt konto.

Välj sidan My Demo StoreFront > us > en på sidan Sites och klicka på Edit i det övre åtgärdsfältet.
Klicka på Visa som publicerad i det övre åtgärdsfältet och klicka sedan på en önskad kategori i butikens navigering.
Klicka på ett önskat produktkort på produktsidan och välj sedan färg, storlek för att aktivera knappen Lägg till i kundvagnen.
Öppna tillägget Snowplow Inspector från webbläsarens tilläggspanel och välj Experience Platform Wed SDK i den vänstra listen.
Gå tillbaka till produktsidan och klicka på Lägg till i kundvagnen. Detta skickar data till Experience Platform. Tillägget Adobe Experience Platform Debugger visar information om händelsen.
Gå till Datauppsättningar > My Demo StoreFront på fliken Datauppsättningsaktivitet i produktgränssnittet för Experience Platform. Om Mått och diagram är aktiverade visas händelsedatastatistik.

Implementeringsinformation implementation-details

CIF Experience Platform Connector byggs ovanpå dataanslutningen för Adobe Commerce, som ingår i PWA Studio -projektet.

Med PWA Studio-projektet kan du skapa Progressive Web Application (PWA) butiker med Adobe Commerce eller Magento Open Source. Projektet innehåller också ett komponentbibliotek med namnet Premiere som du kan använda för att lägga till logik i visuella komponenter. Peregrin-biblioteket innehåller även anpassade React-kopplingar som används av CIF Experience Platform Connector för att integreras med Experience Platform utan skarvar.

Händelser som stöds supported-events

Från och med nu stöds följande händelser:

Upplev XDM-händelser:

Lägg i kundvagnen (AEM)
Visa sida (AEM)
Visa produkt (AEM)
Skickad sökbegäran (AEM)
Söklösningen togs emot (AEM)

När Premiere-komponenter återanvänds i AEM Commerce-projekt:

Upplev XDM-händelser:

Ta bort från kundvagnen
Open Cart
Visa kundvagn
Omedelbart köp
Starta utcheckning
Fullständig utcheckning

Profil-XDM-händelser:

Logga in
Skapa konto
Redigera konto

Ytterligare resurser additional-resources

Mer information finns i följande resurser:

recommendation-more-help

fbcff2a9-b6fe-4574-b04a-21e75df764ab

AEM-CIF kärnkomponenter och integrering med Adobe Experience Platform aem-cif-aep-integration

Skicka händelsedata för addToCart till Experience Platform send-addtocart-to-aep

Förutsättningar prerequisites

AEM Commerce as a Cloud Service aem-setup

Lokal installation

Projektinställningar

Installera anslutningsberoenden för Premiere och CIF-AEP

Konfigurera Maven att använda argumentet --force

Ändra konfigurationsformat för Label

Konfigurera webbpaket för användning av babel

Konfigurera Apollo-klient

Initiera Peregrine och CIF kärnkomponenter

Bygg och distribuera det uppdaterade AEM projektet

Inställningar för Experience Platform aep-setup

Skapa schema med fältgruppen Commerce

Skapa datauppsättning

Skapa dataström

Lägg till datastream-värde i AEM Commerce-konfiguration add-aep-values-to-aem

Utlös händelsen addToCart och verifiera datainsamling event-trigger-verify

Implementeringsinformation implementation-details

Händelser som stöds supported-events

Ytterligare resurser additional-resources

Skicka händelsedata för `addToCart` till Experience Platform send-addtocart-to-aep

Konfigurera Maven att använda argumentet `--force`

Utlös händelsen `addToCart` och verifiera datainsamling event-trigger-verify