다음 CIF(Commerce Integration Framework) 핵심 구성 요소는 원활한 통합을 제공합니다 Adobe Experience Platform storefront 이벤트 및 해당 데이터를 장바구니에 추가.
다음 AEM CIF 코어 구성 요소 프로젝트는 Adobe Commerce용 Adobe Experience Platform 커넥터 commerce storefront에서 이벤트 데이터를 수집하기 위해 이 이벤트 데이터는 고객 여정을 포함하는 360도 프로필을 빌드하기 위해 Adobe Analytics 및 Adobe Target과 같은 다른 Adobe Experience Cloud 제품에서 사용되는 Experience Platform으로 전송됩니다. 상거래 데이터를 Adobe Experience Cloud의 다른 제품에 연결하여 사이트에서 사용자 행동을 분석하고 AB 테스트를 수행하고 개인화된 캠페인을 만드는 등의 작업을 수행할 수 있습니다.
추가 정보 Experience Platform 데이터 수집 클라이언트측 소스에서 고객 경험 데이터를 수집할 수 있는 기술 세트.
addToCart
이벤트 데이터를 Experience Platform다음 단계는 addToCart
AEM이 렌더링한 제품 페이지의 이벤트 데이터를 CIF - Experience Platform 커넥터를 사용하여 Experience Platform에 보냅니다. Adobe Experience Platform Debugger 브라우저 확장 프로그램을 사용하여 제출된 데이터를 테스트하고 검토할 수 있습니다.
이 데모를 완료하려면 로컬 개발 환경을 사용해야 합니다. 여기에는 Adobe Commerce 인스턴스에 구성 및 연결된 AEM의 실행 인스턴스가 포함됩니다. 다음 요구 사항 및 단계를 검토하십시오 AEM as a Cloud Service SDK를 사용하여 로컬 개발 설정.
또한 Adobe Experience Platform 및 데이터 수집을 위한 스키마, 데이터 세트 및 데이터 세트를 만들 수 있는 권한. 자세한 내용은 권한 관리.
일을 하다 AEM Commerce as a Cloud Service 필요한 코드 및 구성을 사용하여 로컬 환경에서 다음 단계를 완료하십시오.
다음을 수행합니다 로컬 설정 작업 AEM Commerce as a Cloud Service 환경을 사용하는 절차.
다음을 수행합니다 AEM 프로젝트 원형 새 AEM Commerce(CIF) 프로젝트를 만드는 절차.
다음 예에서는 AEM Commerce 프로젝트의 이름이 지정됩니다. My Demo Storefront
그러나 고유한 프로젝트 이름을 선택할 수 있습니다.
프로젝트의 루트 디렉토리에서 다음 명령을 실행하여 새로 만든 AEM Commerce 프로젝트를 로컬 AEM SDK에 빌드하고 배포합니다.
$ mvn clean install -PautoInstallSinglePackage
로컬로 배포되는 My Demo StoreFront
기본 코드와 콘텐츠가 있는 상거래 사이트는 다음과 같습니다.
이 AEM Commerce 사이트의 카테고리 및 제품 페이지에서 이벤트 데이터를 수집하고 전송하려면 키를 설치해야 합니다 npm
패키지 ui.frontend
AEM Commerce 프로젝트의 모듈입니다.
로 이동합니다 ui.frontend
명령줄에서 다음 명령을 실행하여 필요한 패키지를 설치하고 설치합니다.
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
인수는 경우에 따라 필수입니다. PWA Studio 는 지원되는 피어 종속성으로 제한됩니다. 일반적으로 이로 인해 문제가 발생하지 않습니다.
--force
인수Maven 빌드 프로세스의 일부로 npm 정리 설치(사용 npm ci
)가 트리거됩니다. 이 작업을 수행하려면 --force
변합니다.
프로젝트의 루트 POM 파일로 이동합니다 pom.xml
그리고 <id>npm ci</id>
실행 블록. 블록을 다음과 같이 업데이트합니다.
<execution>
<id>npm ci</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>ci --force</arguments>
</configuration>
</execution>
기본값에서 전환 .babelrc
파일 상대 구성 파일 형식 babel.config.js
형식 지정 이 형식은 프로젝트 전체에서 구성 형식이며 node_module
더 강력한 제어
로 이동합니다 ui.frontend
모듈 및 기존 .babelrc
파일.
만들기 babel.config.js
를 사용하는 파일 peregrine
사전 설정.
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;
}
Barel 로더를 사용하여 JavaScript 파일을 전달하려면babel-loader
) 및 webpack을 사용하려면 을 수정해야 합니다 webpack.common.js
파일.
로 이동합니다 ui.frontend
모듈 및 업데이트 webpack.common.js
파일에 다음 규칙을 넣을 수 있습니다. module
속성 값:
{
test: /\.jsx?$/,
exclude: /node_modules\/(?!@magento\/)/,
loader: 'babel-loader'
}
다음 아폴로 클라이언트 GraphQL을 사용하여 로컬 및 원격 데이터를 모두 관리하는 데 사용됩니다. 또한 GraphQL 쿼리 결과를 로컬에서 정규화된 인메모리 캐시에 저장합니다.
대상 InMemoryCache
효과적으로 작업하려면 possibleTypes.js
파일. 이 파일을 생성하려면 가능한 유형 자동 생성. 또한 PWA Studio 참조 구현 그리고 possibleTypes.js
파일.
로 이동합니다 ui.frontend
모듈 및 다른 이름으로 파일 저장 ./src/main/possibleTypes.js
업데이트 webpack.common.js
파일 DefinePlugin
섹션을 참조하십시오.
const { DefinePlugin } = require('webpack');
const { POSSIBLE_TYPES } = require('./src/main/possibleTypes');
...
plugins: [
...
new DefinePlugin({
'process.env.USE_STORE_CODE_IN_URL': false,
POSSIBLE_TYPES
})
]
React 기반 Peregrine 및 CIF 핵심 구성 요소를 초기화하려면 필요한 구성 및 JavaScript 파일을 만듭니다.
로 이동합니다 ui.frontend
모듈 및 다음 폴더를 만듭니다. src/main/webpack/components/commerce/App
만들기 config.js
다음 컨텐츠가 있는 파일:
// 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
}
}
};
만들기 App.js
다음 컨텐츠가 있는 파일입니다. 이 파일은 일반적인 React 애플리케이션 시작 지점 파일과 유사하며 Experience Platform 통합을 용이하게 하기 위해 React 및 사용자 정의 후크와 React Context 사용을 포함합니다.
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
);
};
다음 EventCollectorContext
는 다음과 같은 React Context를 내보냅니다.
의 구현 세부 사항을 검토할 수 있습니다 EventCollectorContext
여기.
위의 패키지 설치, 코드 및 구성 변경 사항이 올바른지 확인하려면 다음 Maven 명령을 사용하여 업데이트된 AEM Commerce 프로젝트를 다시 빌드하고 배포합니다. $ mvn clean install -PautoInstallSinglePackage
.
카테고리 및 제품과 같은 AEM Commerce 페이지에서 오는 이벤트 데이터를 받고 저장하려면 다음 단계를 완료하십시오.
자신이 올바른 구성원인지 확인합니다 제품 프로필 아래에 Adobe Experience Platform 및 Adobe Experience Platform 데이터 수집. 필요한 경우 시스템 관리자에게 문의하여 생성, 업데이트 또는 할당합니다 제품 프로필 아래에 Admin Console.
상거래 이벤트 데이터의 구조를 정의하려면 XDM(Experience Data Model) 스키마를 만들어야 합니다. 스키마는 데이터의 구조와 형식을 나타내고 유효성을 검사하는 규칙 세트입니다.
브라우저에서 Adobe Experience Platform 제품 홈 페이지. (예: https://experience.adobe.com/#/@YOUR-ORG-NAME/sname:prod/platform/home)
을(를) 찾습니다 스키마 왼쪽 탐색 섹션의 메뉴에서 스키마 만들기 오른쪽 상단 섹션에서 버튼을 클릭하고 XDM ExperienceEvent.
를 사용하여 스키마의 이름을 지정합니다. 스키마 속성 > 표시 이름 필드를 작성하고 컴포지션 > 필드 그룹 > 추가 버튼을 클릭합니다.
에서 필드 그룹 추가 대화 상자, 검색 Commerce
에서 을(를) 선택합니다. 상거래 세부 사항 확인란을 선택하고 필드 그룹 추가.
자세한 내용은 스키마 작성 기본 사항 추가 정보.
이벤트 데이터를 저장하려면 스키마 정의를 준수하는 데이터 세트를 만들어야 합니다. 데이터 집합은 스키마(열) 및 필드(행)를 포함하는 데이터 수집을 위한 저장소 및 관리 구성입니다.
브라우저에서 Adobe Experience Platform 제품 홈 페이지. (예: https://experience.adobe.com/#/@YOUR-ORG-NAME/sname:prod/platform/home)
을(를) 찾습니다 데이터 세트 왼쪽 탐색 섹션의 메뉴를 클릭하고 데이터 집합 만들기 오른쪽 위 섹션의 단추.
새 페이지에서 스키마에서 데이터 집합 만들기 카드.
새 페이지에서 검색 및 선택 이전 단계에서 만든 스키마를 클릭하고 다음 버튼을 클릭합니다.
를 사용하여 데이터 세트에 이름을 지정합니다. 데이터 집합 구성 > 이름 필드를 클릭하고 완료 버튼을 클릭합니다.
자세한 내용은 데이터 세트 개요 추가 정보.
다음 단계를 완료하여 Experience Platform에 데이터 스트림을 만듭니다.
브라우저에서 Adobe Experience Platform 제품 홈 페이지. (예: https://experience.adobe.com/#/@YOUR-ORG-NAME/sname:prod/platform/home)
을(를) 찾습니다 데이터 스트림 왼쪽 탐색 섹션의 메뉴를 클릭하고 새 데이터 스트림 오른쪽 위 섹션의 단추.
다음 아이콘을 사용하여 데이터 스트림에 이름을 지정합니다. 이름 필수 필드입니다. 아래에 이벤트 스키마 필드에서 새로 만든 스키마를 선택하고 저장.
새로 만든 데이터 스트림을 열고 서비스 추가.
아래에 서비스 필드에서 Adobe Experience Platform 선택 사항입니다. 아래 이벤트 데이터 세트 필드에서 이전 단계에서 데이터 세트 이름을 선택하고 를 클릭합니다. 저장.
자세한 내용은 데이터 스트림 개요 추가 정보.
위의 Experience Platform 설정을 완료한 후에는 datastreamId
데이터 스트림 세부 사항 및 orgId
의 오른쪽 상단 모서리에서 프로필 사진 > 계정 정보 > 사용자 정보 모달.
AEM Commerce 프로젝트의 ui.frontend
모듈, 업데이트 config.js
파일 및 특히 eventsCollector > aep
개체 등록 정보입니다.
업데이트된 AEM Commerce 프로젝트를 빌드 및 배포합니다.
addToCart
이벤트 및 데이터 수집 확인위의 단계는 AEM Commerce 및 Experience Platform 설정을 완료합니다. 이제 을(를) 트리거할 수 있습니다 addToCart
이벤트 및 Experience Platform 디버거 및 데이터 세트를 사용하여 데이터 수집 확인 지표 및 그래프 제품 UI에서 전환합니다.
이벤트를 트리거하려면 로컬 설정에서 AEM 작성자 또는 게시 서비스를 사용할 수 있습니다. 이 예제에서는 계정에 로그인하여 AEM 작성자를 사용합니다.
사이트 페이지에서 내 Demo StoreFront > us > en 페이지를 클릭하고 편집 를 클릭합니다.
맨 위 작업 표시줄에서 게시됨으로 보기를 클릭한 다음 저장소 탐색에서 원하는 카테고리를 클릭합니다.
기본 설정 제품 카드를 클릭합니다. 제품 페이지를 선택하고 을 선택합니다. 색상, 크기 를 장바구니에 추가 버튼을 클릭합니다.
를 엽니다. Adobe Experience Platform Debugger 브라우저의 확장 패널에서 확장을 선택하고 Experience Platform 수 SDK 왼쪽 레일에 있습니다.
로 돌아갑니다. 제품 페이지 을(를) 클릭합니다. 장바구니에 추가 버튼을 클릭합니다. 이렇게 하면 데이터가 Experience Platform으로 전송됩니다. 다음 Adobe Experience Platform Debugger 확장은 이벤트 세부 사항을 보여줍니다.
Experience Platform 제품 UI 내에서 데이터 세트 > 내 데모 StoreFront아래에 있는 데이터 집합 활동 탭. 만약 지표 및 그래프 토글이 활성화되면 이벤트 데이터 통계가 표시됩니다.
다음 CIF Experience Platform 커넥터 이(가) Adobe Commerce용 Experience Platform 커넥터: 의 일부 PWA Studio 프로젝트.
PWA Studio 프로젝트를 사용하면 Adobe Commerce 또는 Magento Open Source에서 제공하는 Progressive Web Application(PWA) 저장소를 만들 수 있습니다. 프로젝트에는 다음과 같은 구성 요소 라이브러리가 포함되어 있습니다. 페레그린 시각적 구성 요소에 논리를 추가합니다. 다음 페레그린 도서관 또한, Experience Platform 커넥터 을 추가하여 Experience Platform과 원활하게 통합할 수 있습니다.
현재 다음 이벤트가 지원됩니다.
Experience XDM 이벤트:
When 페레그린 구성 요소 AEM Commerce 프로젝트에서 재사용됩니다.
Experience XDM 이벤트:
프로필 XDM 이벤트:
자세한 내용은 다음 리소스를 참조하십시오.