AEM-CIF kärnkomponenter och integrering med Adobe Experience Platform

Senaste uppdatering: 2024-01-23
  • Skapat för:
  • Beginner
    Developer

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

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.

Granska händelsedata för addToCart i Adobe Experience Platform Debugger

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 handelsmiljö.

Projektinställningar

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

TIPS

I följande exempel heter AEM Commerce-projektet: My Demo StorefrontDu kan dock välja ett eget projektnamn.

AEM

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:

Standardwebbplats AEM

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
VIKTIGT

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

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

  2. Skapa en babel.config.js filen 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å 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 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.

  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: {
            eventForwarding: {
                acds: true,
                aep: false,
            }
        }
    };
    
    VIKTIGT

    Ä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, i eventsCollector -egenskap, hitta eventsCollector > aep -objektet och uppdatera orgId och datastreamId till rätt värden. Läs mer.

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

    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

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

TILLGÄNGLIGHET

Se till att du är en del av rätt Produktprofiler under Adobe Experience Platform och Adobe Experience Platform Data Collection. 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ä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. 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.

  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.

    Skapa schema för AEP

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

    AEP-schemadefinition

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

    AEP-schemadefinition

TIPS

Se Grunderna för schemakomposition för mer information.

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

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

    Skapa datauppsättningar i AEP

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

    Alternativ för att skapa dataschema i AEP

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

    AEP Skapa datauppsättningar Välj schema

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

    Namn på AEP Skapa datauppsättningar

TIPS

Se Datauppsättningar - översikt för mer information.

Skapa dataström

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

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

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

    AEP Skapa datastreams

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

    AEP Definiera datastreams

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

    AEP-datastreams Add Service

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

    AEP-datastreams Lägg till serviceinformation

TIPS

Se Översikt över datastream för mer information.

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 datauppspelningsinformationen och orgId i det övre högra hörnet av Profilbild > Kontoinformation > Användarinformation modal.

AEP-datastreams-ID

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

  2. Skapa 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ändelsen och verifiera datainsamling med 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.

  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 önskat produktkort i Produktsida väljer färg, storlek för att aktivera Lägg i kundvagnen -knappen.

  4. Öppna Snowplow Inspector 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.

    AEP Debugger Add-To-Cart Event-Data

  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.

    Datauppsättningsstatistik för Experience Platform

Implementeringsinformation

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

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. Omedelbart kö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:

På denna sida