AEM-CIF-komponenter och integrering med Adobe Experience Platform

The Commerce Integration Framework (CIF) grundkomponenterna ger smidig integration med Adobe Experience Platform att vidarebefordra butikshändelser och deras data från interaktioner på klientsidan, som lägg till i kundvagn.

The AEM CIF-kärnkomponenter project innehåller ett JavaScript-bibliotek som kallas Adobe Experience Platform Connector for Adobe Commerce för att samla in händelsedata från din 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 en serie teknologier som gör att ni kan samla in kundupplevelsedata från källor på kundsidan.

Skicka addToCart händelsedata till Experience Platform

Följande steg visar hur du skickar addToCart händelsedata från AEM produktsidor till Experience Platform med CIF - Experience Platform Connector. Med webbläsartillägget Adobe Experience Platform Debugger kan du testa och granska skickade data.

Förutsättningar

Du måste använda en lokal utvecklingsmiljö för att slutföra den här demon. 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 måste även ha tillgång till Adobe Experience Platform och behörigheter för att skapa schema, datauppsättning och datastreams för datainsamling. Mer information finns i Behörighetshantering.

as a Cloud Service inställningar för AEM

Att ha en fungerande AEM Commerce as a Cloud Service lokal miljö med nödvändig kod och konfiguration, utför följande steg.

Lokal installation

Följ Lokal installation steg för att ha en fungerande AEM as a Cloud Service Commerce-miljö.

Projektinställningar

Följ AEM Project Archetype steg för att skapa ett helt nytt AEM Commerce-projekt (CIF).

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

$ mvn clean install -PautoInstallSinglePackage

Lokalt distribuerad My Demo StoreFront e-handelswebbplatsen med standardkod och standardinnehåll ser ut så här:

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 måste du installera nyckeln npm i ui.frontend modulen i AEM Commerce-projektet.

Navigera till 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

Konfigurera Maven för användning --force argument

Som en del av byggprocessen i Maven har npm-installationen gjorts rent (med npm ci) aktiveras. Detta kräver även --force argument.

Navigera till projektets POM-rotfil pom.xml och hitta <id>npm ci</id> körningsblock. 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 standard .babelrc filrelativt konfigurationsfilformat till babel.config.js format. Detta är ett projektövergripande konfigurationsformat som gör att plugin-program och förinställningar kan användas i node_module med större kontroll.

1. Navigera till ui.frontend och ta bort befintlig .babelrc -fil.

2. Skapa en babel.config.js som använder peregrine förinställning.

   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

Så här transplanterar du JavaScript-filer med hjälp av en babel-inläsare (babel-loader) och webbpaket måste du ändra webpack.common.js -fil.

Navigera till ui.frontend och uppdatera webpack.common.js filen så att följande regel finns i module egenskapsvärde:

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

Konfigurera Apollo-klient

The Apollo Client 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.

För InMemoryCache för att arbeta effektivt behöver du en possibleTypes.js -fil. Information om hur du skapar den här filen finns i Generera möjliga typer automatiskt. Se även PWA Studio referensimplementering och ett exempel på en possibleTypes.js -fil.

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

2. Uppdatera webpack.common.js fil DefinePlugin för att ersätta de statiska variabler som krävs under byggtiden.

   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 kärnkomponenterna Peregrine och CIF

Om du vill initiera de React-baserade Premiere- och CIF-kärnkomponenterna skapar du den konfiguration och de JavaScript-filer som krävs.

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

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

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

   VIKTIGT

   Även om du redan är bekant med config.js fil från AEM - CIF Venia Project måste du göra några ändringar i den här filen. Börja med att granska ATT kommentarer. Sedan, i eventsCollector -egenskap, hitta eventsCollector > aed -objektet och uppdatera orgId och datastreamId till rätt värden. Läs mer.

3. Skapa en App.js 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.

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

   The 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 här.

Bygg och distribuera det uppdaterade AEM projektet

För att se till att ovanstående paket-installation, kod- 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

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

Skapa schema med fältgrupp i 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.

1. Navigera till Adobe Experience Platform startsida för produkten. Till exempel, https://experience.adobe.com/#/@YOUR-ORG-NAME/sname:prod/platform/home.

2. Leta reda på Scheman i det vänstra navigeringsavsnittet klickar du på Skapa schema i det övre högra avsnittet och väljer XDM ExperienceEvent.

   

3. Namnge schemat med Schemaegenskaper > Visningsnamn fält och lägg till fältgrupper med Disposition > Fältgrupper > Lägg till -knappen.

   

4. I Lägg till fältgrupper dialogruta, söka efter Commerceväljer du Handelsinformation och klicka Lägg till fältgrupper.

   

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

1. Navigera till Adobe Experience Platform startsida för produkten. Till exempel, https://experience.adobe.com/#/@YOUR-ORG-NAME/sname:prod/platform/home.

2. Leta reda på Datauppsättningar i det vänstra navigeringsavsnittet och klicka på Skapa datauppsättning i det övre högra avsnittet.

   

3. På den nya sidan väljer du Skapa datauppsättning från schema kort.

   

• På den nya sidan sök och markera schemat som du skapade i föregående steg och klicka på Nästa -knappen.

  

1. Namnge datauppsättningen med Konfigurera datauppsättning > Namn och klicka på Slutför -knappen.

   

Skapa dataström

Följ de här stegen för att skapa ett datastream i Experience Platform.

1. Navigera till Adobe Experience Platform startsida för produkten. Till exempel, https://experience.adobe.com/#/@YOUR-ORG-NAME/sname:prod/platform/home.

2. Leta reda på Datastreams i det vänstra navigeringsavsnittet och klicka på Ny datastream i det övre högra avsnittet.

   

3. Namnge ditt datastream med Namn obligatoriskt fält. Under Händelseschema markerar du det nyligen skapade schemat och klickar på Spara.

   

4. Öppna den nya dataströmmen och klicka på Lägg till tjänst.

   

5. Under Tjänst välj Adobe Experience Platform alternativ. Under Händelsedatauppsättning markerar du datauppsättningsnamnet från föregående steg och klickar på Spara.

   

Lägg till datastream-värde i AEM Commerce-konfiguration

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

1. I AEM Commerce-projekt ui.frontend modul, uppdatera config.js -filen och eventsCollector > aep objektegenskaper.

2. Bygg och distribuera det uppdaterade AEM Commerce-projektet

Utlösare addToCart händelse och verifiera datainsamling

Ovanstående steg avslutar installationen av AEM Commerce och Experience Platform. Nu kan du aktivera en addToCart händelse och verifiera datainsamling med Experience Platform-felsökaren och datauppsättningen Mätvärden och diagram 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.

1. På sidan Platser väljer du My Demo StoreFront > us > en sida och klicka Redigera i det övre åtgärdsfältet.

2. Klicka på i det övre åtgärdsfältet Visa som publicerad klickar du sedan på valfri kategori i butikens navigering.

3. Klicka på ett valfritt produktkort i Produktsida väljer färg, storlek för att aktivera Lägg i kundvagnen -knappen.

4. Öppna Adobe Experience Platform Debugger tillägg från webbläsarens tilläggspanel och välj Experience Platform Wed SDK till vänster.

   

5. Återgå till Produktsida och klicka Lägg i kundvagnen -knappen. Detta skickar data till Experience Platform. The Adobe Experience Platform Debugger tillägget visar händelseinformation.

   

6. I användargränssnittet för Experience Platform går du till Datamängder > My Demo StoreFront, under Datauppsättningsaktivitet -fliken. Om Mätvärden och diagram växlingsknappen är aktiverad visas händelsedatatillstånd.

   

Implementeringsinformation

The CIF Experience Platform Connector är byggd ovanpå Experience Platform Connector for Adobe Commerce, som ingår i PWA Studio projekt.

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 som kallas Peregrin för att lägga till logik i visuella komponenter. The Bibliotek för pärmar innehåller även anpassade React-kopplingar som används av Experience Platform Connector för smidig integrering med Experience Platform.

Händelser som stöds

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

Upplev XDM-händelser:

1. Lägg i kundvagnen (AEM)
2. Visa sida (AEM)
3. Visa produkt (AEM)
4. Skickad sökbegäran (AEM)
5. Söklösningen togs emot (AEM)

När Peregringskomponenter återanvänds i AEM Commerce-projektet:

Upplev XDM-händelser:

1. Ta bort från kundvagnen
2. Open Cart
3. Visa kundvagn
4. Direktköp
5. Starta utcheckning
6. Fullständig utcheckning

Profil-XDM-händelser:

1. Logga in
2. Skapa konto
3. Redigera konto

Ytterligare resurser

Mer information finns i följande resurser:

• PWA Studio
• Experience Platform-anslutning - översikt
• Experience Platform Connector Events
• Adobe Experience Platform - översikt

Resurser för Business.Adobe.com