AEM-CIF核心组件与Adobe Experience Platform集成

商务集成框架(CIF) 核心组件提供无缝集成, Adobe Experience Platform 从客户端交互(如 添加到购物车.

AEM CIF核心组件 项目提供了一个名为 Adobe Experience Platform connector for Adobe Commerce 从商务店面收集事件数据。 该事件数据会发送到用于其他Adobe Experience Cloud产品(如Adobe Analytics和Adobe Target)的Experience Platform,以构建涵盖客户旅程的360度用户档案。 通过将商务数据连接到Adobe Experience Cloud中的其他产品,您可以执行诸如分析网站上的用户行为、执行AB测试和创建个性化促销活动等任务。

进一步了解 Experience Platform数据收集 一套技术,允许您从客户端源收集客户体验数据。

发送 addToCart 要Experience Platform的事件数据

以下步骤显示如何发送 addToCart 使用CIF -AEM连接器将事件数据从呈现的产品页面Experience Platform发送到Experience Platform。 使用Adobe Experience Platform Debugger浏览器扩展,您可以测试和查看提交的数据。

在Adobe Experience Platform Debugger中查看addToCart事件数据

前提条件

您必须使用本地开发环境来完成此演示。 这包括已配置并连接到Adobe Commerce实例的AEM运行实例。 查看 使用AEMas a Cloud ServiceSDK设置本地开发.

您还需要访问 Adobe Experience Platform 以及创建用于数据收集的架构、数据集和数据流的权限。 有关更多信息,请参阅 权限管理.

AEM Commerceas a Cloud Service设置

要工作 AEM Commerceas a Cloud Service 本地环境中包含必需的代码和配置,请完成以下步骤。

本地设置

关注 本地设置 有效的AEM Commerceas a Cloud Service环境的步骤。

项目设置

关注 AEM项目原型 创建全新AEM Commerce(CIF)项目的步骤。

小贴士

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

AEM Commerce Project

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

$ mvn clean install -PautoInstallSinglePackage

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

默认AEM商务网站

安装Peregrine和CIF-AEP连接器依赖项

要从此AEM Commerce网站的类别和产品页面收集和发送事件数据,您需要安装密钥 npm 包到 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
重要

--force 参数有时是必需的,如 PWA Studio 对支持的对等依赖关系存在限制。 通常,这不应导致任何问题。

配置Maven以使用 --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>

更改Babel配置格式

从默认值切换 .babelrc 文件相对配置文件格式 babel.config.js 格式。 这是一种项目范围的配置格式,允许将插件和预设应用于 node_module 控制力更强。

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

  2. 创建 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;
    }
    

配置WebPack以使用Babel

使用Babel加载器(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 文件。

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

  2. 更新 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
        })
    ]
    

初始化Peregrine和CIF核心组件

要初始化基于React的Peregrine和CIF核心组件,请创建所需的配置和JavaScript文件。

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

  2. 创建 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
            }
        }
    };
    
    重要

    虽然您已经熟悉 config.js 文件来源 AEM指南 — CIF Venia项目,则需要对此文件进行一些更改。 首先,查看任意 TODO 注释。 然后,在 eventsCollector 属性,查找 eventsCollector > aed 对象和更新 orgIddatastreamId 属性到正确的值。 了解更多

  3. 创建 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 Context,该环境:

    • 加载commerce-events-sdk和commerce-events-collector库,
    • 使用给定的配置初始化它们,以用于Experience Platform和/或ACDS
    • 订阅来自Peregrine的所有事件,并将其转发到事件SDK

    您可以查看 EventCollectorContext 此处.

构建和部署更新的AEM项目

要确保上述包安装、代码和配置更改正确无误,请使用以下Maven命令重新构建和部署更新的AEM Commerce项目: $ mvn clean install -PautoInstallSinglePackage.

Experience Platform设置

要接收和存储来自AEM Commerce页面(如类别和产品)的事件数据,请完成以下步骤:

可用性

确保您是正确的 产品配置文件Adobe Experience PlatformAdobe Experience Platform数据收集. 如有需要,请与系统管理员合作以创建、更新或分配 产品配置文件Admin Console.

使用商务字段组创建架构

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

  1. 在浏览器中,导航到 Adobe Experience Platform 产品主页。 例如:https://experience.adobe.com/#/@YOUR-ORG-NAME/sname:prod/platform/home

  2. 找到 模式 菜单,单击 创建架构 按钮,然后选择 XDM ExperienceEvent.

    AEP创建架构

  3. 使用命名架构 架构属性>显示名称 字段,然后使用 合成>字段组>添加 按钮。

    AEP架构定义

  4. 添加字段组 对话框,搜索 Commerce,选择 商务详细信息 复选框,然后单击 添加字段组.

    AEP架构定义

小贴士

请参阅 架构组合的基础知识 以了解更多信息。

创建数据集

要存储事件数据,必须创建一个符合架构定义的数据集。 数据集是用于数据集合(通常是表)的存储和管理结构,其中包含架构(列)和字段(行)。

  1. 在浏览器中,导航到 Adobe Experience Platform 产品主页。 例如:https://experience.adobe.com/#/@YOUR-ORG-NAME/sname:prod/platform/home

  2. 找到 数据集 菜单,然后单击 创建数据集 按钮。

    AEP创建数据集

  3. 在新页面上,选择 从架构创建数据集 卡。

    AEP创建数据集架构选项

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

    AEP创建数据集选择架构

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

    AEP创建数据集名称

小贴士

请参阅 数据集概述 以了解更多信息。

创建数据流

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

  1. 在浏览器中,导航到 Adobe Experience Platform 产品主页。 例如:https://experience.adobe.com/#/@YOUR-ORG-NAME/sname:prod/platform/home

  2. 找到 数据流 菜单,然后单击 新数据流 按钮。

    AEP创建数据流

  3. 使用命名您的数据流 名称 必填字段。 在 事件架构 字段,选择新创建的架构并单击 保存.

    AEP定义数据流

  4. 打开新创建的数据流,然后单击 添加服务.

    AEP Datastreams添加服务

  5. 服务 字段,选择 Adobe Experience Platform 选项。 在 事件数据集 字段中,选择数据集名称并单击 保存.

    AEP Datastreams添加服务详细信息

小贴士

请参阅 数据流概述 以了解更多信息。

将数据流值添加到AEM Commerce配置中

完成上述Experience Platform设置后,您应该 datastreamId 在数据流详细信息的左边栏和 orgId 的右上角 个人资料图片>帐户信息>用户信息 模式窗口。

AEP数据流ID

  1. 在AEM Commerce项目的 ui.frontend 模块,更新 config.js 文件,特别是 eventsCollector > aep 对象属性。

  2. 构建和部署更新的AEM Commerce项目

触发器 addToCart 事件和验证数据收集

上述步骤将完成AEM Commerce和Experience Platform设置。 您现在可以触发 addToCart 事件,并使用Experience Platform调试器和数据集验证数据收集 量度和图表 在产品UI中进行切换。

要触发该事件,您可以使用AEM作者或本地设置中的发布服务。 在本例中,请通过登录到您的帐户来使用AEM作者。

  1. 从站点页面中,选择 我的Demo StoreFront >我们> en 页面,单击 编辑 中。

  2. 在顶部操作栏中,单击 查看已发布的项目,然后在店面的导航中单击任何首选类别。

  3. 单击 产品页面,然后选择 颜色、大小 启用 添加到购物车 按钮。

  4. 打开 Adobe Experience Platform Debugger 扩展,然后选择 Experience PlatformWed SDK 中。

    AEP Debugger

  5. 返回到 产品页面 单击 添加到购物车 按钮。 这会向Experience Platform发送数据。 的 Adobe Experience Platform Debugger 扩展会显示事件详细信息。

    AEP Debugger添加到购物车事件数据

  6. 在Experience Platform产品UI中,导航到 数据集> My Demo StoreFront,在 数据集活动 选项卡。 如果 量度和图表 切换启用后,将显示事件数据统计资料。

    Experience Platform数据集数据统计资料

实施详细信息

CIFExperience Platform连接器 构建于 Experience PlatformConnector for Adobe Commerce,这是 PWA Studio 项目。

利用PWA Studio项目,可创建由Adobe Commerce或Magento Open Source提供支持的Progressive Web Application(PWA)店面。 该项目还包含一个名为 佩雷格林 用于向可视化组件添加逻辑。 的 佩雷格林图书馆 还提供了 Experience Platform连接器 与Experience Platform无缝集成。

支持的事件

目前,支持以下事件:

体验XDM事件:

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

When Peregrine组件 在AEM Commerce项目中重复使用:

体验XDM事件:

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

配置文件XDM事件:

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

其他资源

有关更多信息,请参阅以下资源:

在此页面上