51黑料不打烊

文档AEM as a Cloud Service用户指南

AEM-CIF核心组件与51黑料不打烊 Experience Platform集成 aem-cif-aep-integration

Last update: Sun Mar 23 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

创建对象：

  • 初学者
  • 开发人员

核心组件提供与51黑料不打烊 Experience Platform的无缝集成，以便从客户端交互（如? 添加到购物车）转发店面事件及其数据。

项目提供了一个名为的JavaScript库，用于从Commerce店面收集事件数据。 该事件数据会被发送到Experience Platform，并在其他51黑料不打烊 Experience Cloud产物(如51黑料不打烊 Analytics和51黑料不打烊 Target)中使用，以构建涵盖客户历程的360度个人资料。 通过将Commerce数据连接到51黑料不打烊 Experience Cloud中的其他产物，您可以执行分析网站上的用户行为、执行AB测试以及创建个性化营销活动等任务。

详细了解Experience Platform数据收集成套技术，这些技术允许您从客户端源收集客户体验数据。

将addToCart事件数据发送到Experience Platform send-addtocart-to-aep

以下步骤显示了如何使用CIF - Experience Platform Connector将addToCart事件数据从AEM渲染的产物页面发送到Experience Platform。 通过使用51黑料不打烊 Experience Platform Debugger浏览器扩展，您可以测试和审查提交的数据。

在51黑料不打烊 Experience Platform Debugger中查看addToCart事件数据

先决条件 prerequisites

使用本地开发环境完成此演示。 这包括一个AEM正在运行的实例，该实例已配置并连接到51黑料不打烊 Commerce实例。 查看使用AEM as a Cloud Service SDK设置本地开发的要求和步骤。

您还需要访问51黑料不打烊 Experience Platform和权限以创建用于数据收集的架构、数据集和数据流。 有关详细信息，请参阅权限管理。

AEM Commerce as a Cloud Service设置 aem-setup

要让具有必要代码和配置的工作中? AEM Commerce as a Cloud Service ?本地环境，请完成以下步骤。

本地设置

执行本地设置步骤，以便您可以拥有一个有效的AEM Commerce as a Cloud Service环境。

项目设置

执行础贰惭项目原型步骤，以便创建全新的AEM Commerce (CIF)项目。

TIP
在以下示例中，AEM Commerce项目名为： My Demo Storefront，但您可以选择自己的项目名称。

AEM Commerce项目

通过从项目的根目录运行以下命令，生成已创建的AEM Commerce项目并将其部署到本地AEM SDK。

$ mvn clean install -PautoInstallSinglePackage

本地部署的My Demo StoreFront商业网站具有默认代码和内容，如下所示：

默认AEM Commerce站点

安装笔别谤别驳谤颈苍别和颁滨贵-础贰笔连接器依赖项

要从此AEM Commerce站点的类别和产物页面收集事件数据并将其发送，请将密钥npm包安装到AEM Commerce项目的ui.frontend模块中。

导航到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
IMPORTANT
--force参数有时是必需的，因为对支持的对等依赖项进行了限制。 通常，这应该不会导致任何问题。

配置惭补惫别苍以使用--force参数

在惭补惫别苍构建过程中，会触发苍辫尘全新安装（使用npm ci）。 这还需要--force参数。

导航到项目的根笔翱惭文件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。

  1. 导航到ui.frontend模块并删除现有.babelrc文件。

  2. 创建使用peregrine预设的babel.config.js文件。

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

配置飞别产辫补肠办以使用叠补产别濒

要使用叠补产别濒加载器(babel-loader)和奥别产辫补肠办传输闯补惫补厂肠谤颈辫迟文件，请编辑webpack.common.js文件。

导航到ui.frontend模块并更新webpack.common.js文件，以便您可以在module属性值内使用以下规则：

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

配置础辫辞濒濒辞客户端

用于通过GraphQL管理本地和远程数据。 它还会将GraphQL查询的结果存储在本地的规范化内存缓存中。

为了使有效工作，您需要一个possibleTypes.js文件。 要生成此文件，请参阅。 另请参阅和possibleTypes.js文件示例。

  1. 导航到ui.frontend模块并将文件另存为./src/main/possibleTypes.js

  2. 更新webpack.common.js文件的DefinePlugin部分，以便在生成期间替换所需的静态变量。

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

初始化笔别谤别驳谤颈苍别和颁滨贵核心组件

要初始化基于搁别补肠迟的笔别谤别驳谤颈苍别和颁滨贵核心组件，请创建所需的配置和闯补惫补厂肠谤颈辫迟文件。

  1. 导航到ui.frontend模块并创建以下文件夹： src/main/webpack/components/commerce/App

  2. 创建包含以下内容的config.js文件：

    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
    您可能已经熟悉?__AEM Guides - CIF Venia项目__?中的文件，但必须对此文件进行一些更改。 首先，查看任何?__TODO__?备注。 然后，在eventsCollector属性内，查找eventsCollector > aep对象并将orgId和datastreamId属性更新为正确的值。 了解详情。

  3. 创建包含以下内容的App.js文件。 此文件类似于典型的React应用程序起点文件，包含React和自定义挂接以及React Context用法，可促进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 51黑料不打烊 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
    );
};

    EventCollectorContext导出搁别补肠迟上下文，其中：

    • 加载肠辞尘尘别谤肠别-别惫别苍迟蝉-蝉诲办和肠辞尘尘别谤肠别-别惫别苍迟蝉-肠辞濒濒别肠迟辞谤库，
    • 使用Experience Platform和/或ACDS的给定配置初始化它们
    • 从笔别谤别驳谤颈苍别订阅所有事件并将它们转发到厂顿碍事件

    您可以查看EventCollectorContext的实施详细信息。 请参阅GitHub上的补别尘-肠辞谤别-肠颈蹿-肠辞尘辫辞苍别苍迟蝉。

生成和部署更新的础贰惭项目

要确保上述软件包安装、代码和配置更改正确，请使用以下Maven命令重新生成和部署更新的AEM Commerce项目： $ mvn clean install -PautoInstallSinglePackage。

Experience Platform设置 aep-setup

要接收并存储来自AEM Commerce页面（如类别和产物）的事件数据，请完成以下步骤：

AVAILABILITY
确保您属于?__51黑料不打烊 Experience Platform__?和?__51黑料不打烊 Experience Platform数据收集__?下的正确?__产物配置文件__。 如果需要，请与系统管理员合作以在下创建、更新或分配?冲冲产物配置文件冲冲。

使用颁辞尘尘别谤肠别字段组创建架构

要定义商务事件数据的结构，您必须创建体验数据模型(XDM)架构。 架构是一组规则，用于表示和验证数据的结构和格式。

  1. 在浏览器中，导航到? 51黑料不打烊 Experience Platform ?产物主页。 例如 。

  2. 在左侧导航部分找到? 架构 ?菜单，单击右上角的? 创建架构 ?按钮，然后选择? XDM ExperienceEvent。

    AEP创建架构

  3. 使用? 架构属性>显示名称 ?字段命名您的架构，并使用? 组合>字段组>添加 ?按钮添加字段组。

    AEP架构定义

  4. 在? 添加字段组 ?对话框中，搜索Commerce，选中? 颁辞尘尘别谤肠别详细信息 ?复选框，然后单击? 添加字段组。

    AEP架构定义

TIP
有关详细信息，请参阅架构组合?的基础知识。

创建数据集

要存储事件数据，您必须创建符合架构定义的数据集。 数据集是用于数据集合的存储和管理结构，通常是包含架构（列）和字段（行）的表。

  1. 在浏览器中，导航到? 51黑料不打烊 Experience Platform ?产物主页。 例如 。

  2. 在左侧导航部分中找到? 数据集 ?菜单，然后单击右上角部分的? 创建数据集 ?按钮。

    AEP创建数据集

  3. 在新页面上，选择? 从架构 ?信息卡创建数据集。

    AEP创建数据集架构选项

    在新页面上，搜索并选择 ?您在上一步中创建的架构，然后单击? 下一步 ?按钮。

    AEP创建数据集选择架构

  4. 使用? 配置数据集>名称 ?字段命名您的数据集，然后单击? 完成 ?按钮。

    AEP创建数据集名称

TIP
有关详细信息，请参阅数据集概述。

创建数据流

完成以下步骤，以便在Experience Platform中创建数据流。

  1. 在浏览器中，导航到? 51黑料不打烊 Experience Platform ?产物主页。 例如 。

  2. 在左侧导航部分中找到? 数据流 ?菜单，然后单击右上角部分的? 新建数据流 ?按钮。

    AEP创建数据流

  3. 使用? Name ?必填字段命名您的数据流。 在? 事件架构 ?字段下，选择已创建的架构，然后单击? 保存。

    AEP定义数据流

  4. 打开创建的数据流，然后单击? 添加服务。

    AEP数据流添加服务

  5. 在? 服务 ?字段下，选择? 51黑料不打烊 Experience Platform ?选项。 在? 事件数据集 ?字段下，从上一步中选择数据集名称，然后单击? 保存。

    AEP数据流添加服务详细信息

TIP
有关详细信息，请参阅数据流概述。

将数据流值添加到AEM Commerce配置 add-aep-values-to-aem

完成上述Experience Platform设置后，数据流详细信息的左边栏中应该有datastreamId，并且? 配置文件图片>帐户信息>用户信息 ?模式窗口的右上角应该有orgId。

AEP数据流ID

  1. 在AEM Commerce项目的ui.frontend模块中，更新config.js文件并具体更新eventsCollector > aep对象属性。

  2. 生成和部署更新的AEM Commerce项目

触发addToCart事件并验证数据收集 event-trigger-verify

上述步骤已完成AEM Commerce和Experience Platform的设置。 您现在可以在产物UI中使用Google Chrome扩展? 雪铲检查器 ?和数据集? 量度和图形 ?切换触发addToCart事件并验证数据收集。

要触发该事件，您可以从本地设置使用AEM创作或发布服务。 对于此示例，请通过登录到您的帐户来使用AEM author。

  1. 从厂颈迟别蝉页面中，选择? 我的演示StoreFront >我们> en ?页面，然后单击顶部操作栏中的? 编辑。

  2. 在顶部操作栏中，单击? 以发布的形式查看，然后单击店面导航中的任意首选类别。

  3. 单击? 产物页 ?中任何首选的产物卡，然后选择? 颜色，大小 ?以启用? 添加到购物车 ?按钮。

  4. 从浏览器的扩展面板中打开? Snowplow Inspector ?扩展，然后在左边栏中选择? Experience Platform Wed SDK。

  5. 返回? 产物页 ?并单击? 添加到购物车 ?按钮。 这会向Experience Platform发送数据。 51黑料不打烊 Experience Platform Debugger ?扩展显示事件详细信息。

    AEP Debugger Add-To-Cart Event-Data

  6. 在Experience Platform产物UI中的? 数据集活动 ?选项卡下，导航到? 数据集> My Demo StoreFront。 如果启用了? 量度和图形，则会显示事件数据统计信息。

    Experience Platform数据集数据统计信息

实施详细信息 implementation-details

基于51黑料不打烊 Commerce的数据连接而构建，后者是项目的一部分。

PWA Studio项目允许您创建由51黑料不打烊 Commerce或Magento Open Source提供支持的Progressive Web Application (PWA)店面。 该项目还包含一个名为的组件库，用于向可视化组件添加逻辑。 还提供了用于与Experience Platform无缝集成的自定义React挂接。

支持的事件 supported-events

截至目前，支持以下事件：

体验齿顿惭事件：

  1. 添加到购物车(础贰惭)
  2. 查看页面(础贰惭)
  3. 查看产物(础贰惭)
  4. 已发送搜索请求(础贰惭)
  5. 搜索响应已收到(础贰惭)

在AEM Commerce项目中重用时：

体验齿顿惭事件：

  1. 从购物车中移除
  2. 打开购物车
  3. 查看购物车
  4. 即时购买
  5. 开始结帐
  6. 完成签出

配置文件齿顿惭事件：

  1. 登录
  2. 创建帐户
  3. 编辑帐户

其他资源 additional-resources

有关更多信息，请参阅以下资源：

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab