AEM-CIF kärnkomponenter och integrering med Adobe Experience Platform aem-cif-aep-integration
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ändarbeteenden 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 send-addtocart-to-aep
Följande steg visar hur du skickar addToCart
händelsedata 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.
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 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 aem-setup
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 så att du kan ha en fungerande AEM Commerce as a Cloud Service-miljö.
Projektinställningar
Följ AEM Project Archettype så att ni kan skapa ett helt nytt projekt AEM Commerce (CIF).
My Demo Storefront
Du kan dock välja ett eget projektnamn.
Skapa och distribuera det skapade AEM Commerce-projektet till den lokala AEM SDK 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
Installera nyckeln om du vill samla in och skicka händelsedata från kategori- och produktsidorna för den här AEM Commerce-webbplatsen 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
--force
argument krävs ibland som PWA Studio är begränsat med peer-beroenden som stöds. Vanligtvis bör detta inte orsaka några problem.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.
-
Navigera till
ui.frontend
och ta bort befintlig.babelrc
-fil. -
Skapa en
babel.config.js
filen som använderperegrine
förinställning.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; }
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 webpack, redigera webpack.common.js
-fil.
Navigera till ui.frontend
och uppdatera webpack.common.js
så att du kan ha följande regel 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å possibleTypes.js
-fil.
-
Navigera till
ui.frontend
och spara filen som./src/main/possibleTypes.js
-
Uppdatera
webpack.common.js
filDefinePlugin
så att du kan ersätta de statiska variablerna som krävs under byggtiden.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 }) ]
Initiera Peregrine och CIF kärnkomponenter
Om du vill initiera den Reaktionsbaserade Premiere och CIF kärnkomponenter skapar du de konfigurations- och JavaScript-filer som behövs.
-
Navigera till
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 // 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 Även om du kanske 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 alla GÖRA kommentarer. Sedan, ieventsCollector
-egenskap, hittaeventsCollector > aep
-objektet och uppdateraorgId
ochdatastreamId
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 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 ); };
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 aep-setup
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.
-
I webbläsaren går du till Adobe Experience Platform startsida för produkten. Till exempel: https://experience.adobe.com/#/@YOUR-ORG-NAME/sname:prod/platform/home.
-
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.
-
Namnge schemat med Schemaegenskaper > Visningsnamn fält och lägg till fältgrupper med Disposition > Fältgrupper > Lägg till -knappen.
-
I Lägg till fältgrupper dialogruta, söka efter
Commerce
vä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).
-
I webbläsaren går du till Adobe Experience Platform startsida för produkten. Till exempel: https://experience.adobe.com/#/@YOUR-ORG-NAME/sname:prod/platform/home.
-
Leta reda på Datauppsättningar i det vänstra navigeringsavsnittet och klicka på Skapa datauppsättning i det övre högra avsnittet.
-
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.
-
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 en dataström i Experience Platform.
-
I webbläsaren går du till Adobe Experience Platform startsida för produkten. Till exempel: https://experience.adobe.com/#/@YOUR-ORG-NAME/sname:prod/platform/home.
-
Leta reda på Datastreams i det vänstra navigeringsavsnittet och klicka på Ny datastream i det övre högra avsnittet.
-
Namnge ditt datastream med Namn obligatoriskt fält. Under Händelseschema markerar du det skapade schemat och klickar på Spara.
-
Öppna det skapade dataströmmen och klicka på Lägg till tjänst.
-
Under Tjänst fält, 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 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 datauppspelningsinformationen och orgId
i det övre högra hörnet av Profilbild > Kontoinformation > Användarinformation modal.
-
I AEM Commerce-projekt
ui.frontend
modul, uppdateraconfig.js
-filen ocheventsCollector > aep
objektegenskaper. -
Skapa och distribuera det uppdaterade AEM Commerce-projektet
Utlösare addToCart
händelse och verifiera datainsamling event-trigger-verify
Ovanstående steg avslutar installationen av AEM Commerce och Experience Platform. Nu kan du aktivera en addToCart
händelsen och verifiera datainsamling med Google Chrome-tillägget Snowplow Inspector och datauppsättning 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.
-
På sidan Platser väljer du My Demo StoreFront > us > en sida och klicka Redigera i det övre åtgärdsfältet.
-
Klicka på i det övre åtgärdsfältet Visa som publicerad klickar du sedan på valfri kategori i butikens navigering.
-
Klicka på ett önskat produktkort i Produktsida väljer färg, storlek för att aktivera Lägg i kundvagnen -knappen.
-
Öppna Snowplow Inspector tillägg från webbläsarens tilläggspanel och välj Experience Platform Wed SDK till vänster.
-
Å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.
-
I användargränssnittet för Experience Platform går du till Datamängder > My Demo StoreFront, under Datauppsättningsaktivitet -fliken. If Mätvärden och diagram är aktiverat visas händelsedatatillstånd.
Implementeringsinformation implementation-details
The CIF Experience Platform Connector är byggd ovanpå Dataanslutning för 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 CIF Experience Platform Connector för smidig integrering med Experience Platform.
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 Peregringskomponenter återanvänds i AEM Commerce-projektet:
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: