此 Commerce integration framework(CIF) 核心组件提供与 Adobe Experience Platform 通过客户端交互(例如 添加到购物车.
此 AEM CIF核心组件 项目提供了一个名为的JavaScript库 适用于Adobe Commerce的Adobe Experience Platform连接器 以从Commerce店面收集事件数据。 该事件数据会被发送到Experience Platform,并在其他Adobe Experience Cloud产品(如Adobe Analytics和Adobe Target)中使用,以构建涵盖客户历程的360度个人资料。 通过将Commerce数据连接到Adobe Experience Cloud中的其他产品,您可以执行分析网站上的用户行为、执行AB测试以及创建个性化营销活动等任务。
了解关于 Experience Platform数据收集 一系列允许您从客户端来源收集客户体验数据的技术。
addToCart
要Experience Platform的事件数据以下步骤显示如何发送 addToCart
使用CIF — 事件连接器将AEM渲染的产品Experience Platform中的事件数据发送到Experience Platform。 通过使用Adobe Experience Platform Debugger浏览器扩展,您可以测试和查看提交的数据。
您必须使用本地开发环境才能完成此演示。 这包括正在运行的AEM实例,该实例已配置并连接到Adobe Commerce实例。 查看的要求和步骤 使用AEMas a Cloud ServiceSDK设置本地开发.
您还需要访问 Adobe Experience Platform 和创建用于数据收集的模式、数据集和数据流的权限。 有关更多信息,请参阅 权限管理.
让一个工作 AEM Commerceas a Cloud Service 本地环境中具有必需的代码和配置,请完成以下步骤。
请遵循 本地设置 获得一个有效的AEM Commerceas 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 clean install(使用 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;
}
使用Babel加载器传输JavaScript文件(babel-loader
)和webpack,您需要修改 webpack.common.js
文件。
导航至 ui.frontend
模块并更新 webpack.common.js
文件,以便在内部 module
属性值:
{
test: /\.jsx?$/,
exclude: /node_modules\/(?!@magento\/)/,
loader: 'babel-loader'
}
此 Apollo客户端 用于通过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应用程序起点文件,包含React和自定义挂接以及React Context用法,可促进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
);
};
此 EventCollectorContext
导出React上下文,其中:
您可以查看以下项目的实施详细信息: EventCollectorContext
此处.
要确保上述软件包安装、代码和配置更改正确,请使用以下Maven命令重新构建和部署更新后的AEM Commerce项目: $ mvn clean install -PautoInstallSinglePackage
.
要接收并存储来自AEM Commerce页面(如类别和产品)的事件数据,请完成以下步骤:
确保您属于正确的组 产品配置文件 下 Adobe Experience Platform 和 Adobe Experience Platform数据收集. 如果需要,请与系统管理员合作以创建、更新或分配 产品配置文件 在 Admin Console.
要定义商务事件数据的结构,您必须创建体验数据模型(XDM)架构。 架构是一组规则,用于表示和验证数据的结构和格式。
在浏览器中,导航到 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 author。
从“站点”页面中,选择 我的演示StoreFront >我们> en 页面并单击 编辑 在顶部操作栏中。
在顶部操作栏中,单击 查看已发布的项目,然后单击店面导航中的任意首选类别。
单击中的任意首选产品卡 产品页面,然后选择 颜色,大小 以启用 添加到购物车 按钮。
打开 Adobe Experience Platform Debugger 扩展选项,然后选择 Experience Platform周三SDK 在左边栏中。
返回到 产品页面 并单击 添加到购物车 按钮。 这会向Experience Platform发送数据。 此 Adobe Experience Platform Debugger 扩展会显示事件详细信息。
在Experience Platform产品UI中,导航到 数据集>我的演示StoreFront,位于 数据集活动 选项卡。 如果 量度和图形 启用切换后,将显示事件数据统计信息。
此 CIFExperience Platform连接器 构建在 适用于Adobe Commerce的Experience Platform连接器,它是 PWA Studio 项目。
PWA Studio项目允许您创建由Adobe Commerce或Magento Open Source提供支持的Progressive Web Application(PWA)店面。 该项目还包含一个名为的组件库 佩雷格兰 用于向可视化组件添加逻辑。 此 Peregrin库 还提供了由使用的自定义React挂钩 Experience Platform连接器 与Experience Platform无缝集成。
截至目前,支持以下事件:
体验XDM事件:
时间 Peregrine组件 在AEM Commerce项目中重用:
体验XDM事件:
配置文件XDM事件:
有关更多信息,请参阅以下资源: