AEM-CIF コアコンポーネントとAdobe Experience Platformの統合

このコマース統合フレームワーク (CIF) コアコンポーネントは、 Adobe Experience Platform ストアフロントイベントとそのデータを、次のようなクライアント側の操作から転送するには： 買い物かごに追加.

この AEM CIF コアコンポーネントプロジェクトは、 Adobe Commerce用Adobe Experience Platform Connector Commerce ストアフロントからイベントデータを収集します。このイベントデータはExperience Platformに送信され、Adobe AnalyticsやAdobe Targetなどの他のAdobe Experience Cloud製品で使用されて、カスタマージャーニーに対応する 360 度のプロファイルを作成します。コマースデータをAdobe Experience Cloud内の他の製品に接続することで、サイトでのユーザー行動の分析、AB テストの実行、パーソナライズされたキャンペーンの作成などのタスクを実行できます。

詳しくは、 Experience Platformデータ収集クライアント側のソースから顧客体験データを収集できるテクノロジーのスイート。

送信 `addToCart` イベントデータからExperience Platform

次の手順で、 addToCart イベントデータをAEMレンダリングした製品ページから CIF -Experience Platformコネクタを使用したExperience Platformに送信します。 Adobe Experience Platform Debugger ブラウザー拡張機能を使用して、送信されたデータをテストし、確認できます。

Adobe Experience Platform Debugger での addToCart イベントデータの確認

前提条件

このデモを完了するには、ローカル開発環境を使用する必要があります。これには、Adobe Commerce に設定および接続された AEM の実行インスタンスが含まれます。AEM as Cloud Service SDK を使用してローカル開発をセットアップするための要件と手順を確認します。

また、 Adobe Experience Platform データ収集用のスキーマ、データセット、データストリームを作成する権限と権限。詳しくは、権限管理.

AEM Commerceas a Cloud Service設定

作業を行うには AEM Commerceas a Cloud Service 必要なコードと設定を含むローカル環境で、次の手順を実行します。

ローカル設定

フォロー：ローカル設定動作するAEM Commerceas a Cloud Serviceの環境を作成する手順です。

プロジェクト設定

フォロー： AEM Project Archetype 新しいAEM Commerce(CIF) プロジェクトを作成する手順です。

ヒント

次の例では、AEM Commerce プロジェクトの名前はです。 My Demo Storefrontただし、独自のプロジェクト名を選択することもできます。

AEM Commerce Project

新しく作成したAEM Commerce プロジェクトをビルドし、プロジェクトのルートディレクトリから次のコマンドを実行して、ローカルのAEM SDK にデプロイします。

$ mvn clean install -PautoInstallSinglePackage

ローカルにデプロイされた My Demo StoreFront デフォルトのコードとコンテンツを含むコマースサイトは、次のようになります。

デフォルトのAEM Commerce サイト

Peregrine および CIF-AEP コネクタの依存関係のインストール

この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 は、サポートされているピアの依存関係に対して制限を受けます。通常は、これによって問題が発生することはありません。

を使用するように Maven を設定 `--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>

Babel 構成形式を変更

デフォルトから切り替え .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 を使用するように Webpack を設定

Babel ローダ (babel-loader) や webpack の場合は、 webpack.common.js ファイル。

次に移動： ui.frontend モジュールと webpack.common.js ファイルの module プロパティ値：

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

Apollo クライアントを設定

この Apollo Client は、GraphQLでローカルデータとリモートデータの両方を管理するために使用されます。また、GraphQLクエリの結果は、ローカルの正規化されたメモリ内キャッシュに格納されます。

の場合 InMemoryCache 効果的に働くには、 possibleTypes.js ファイル。このファイルを生成するには、 possibleTypes の自動生成. また、 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
    })
]

Peregrine および CIF コアコンポーネントの初期化

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

重要

既に config.js ファイルから AEMガイド — CIF Venia プロジェクト、このファイルに対していくつかの変更が必要です。まず、任意の TODO コメント。次に、 eventsCollector プロパティを検索するには、 eventsCollector > aed オブジェクトを更新し、 orgId および 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 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 ページからのイベントデータを受け取って保存するには、次の手順を実行します。

利用可能性

自分が正しい 製品プロファイル under Adobe Experience Platform および Adobe Experience Platform Data Collection. 必要に応じて、システム管理者と協力して、作成、更新、割り当てをおこないます 製品プロファイル の下に 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 オプション。の下 イベントデータセット フィールドで、前の手順のデータセット名を選択し、保存.

ヒント

詳しくは、データストリームの概要を参照してください。

AEM Commerce 設定に datastream 値を追加

上記のExperience Platform設定が完了したら、 datastreamId （データストリームの詳細の左側のレール）と orgId の右上隅に プロファイルの画像/アカウント情報/ユーザー情報 モーダルです。

AEP データストリーム ID

AEM Commerce プロジェクトの ui.frontend モジュール、 config.js ファイル、特に eventsCollector > aep オブジェクトのプロパティ。
更新されたAEM Commerce プロジェクトをビルドしてデプロイします。

トリガー `addToCart` イベントとデータ収集の検証

上記の手順は、AEM Commerce とExperience Platformの設定を完了します。これで、トリガーを addToCart イベントを確認し、デバッガーとデータセットを使用してExperience Platform収集を検証します。 指標とグラフ 製品 UI で切り替えます。

イベントをトリガーするには、ローカルセットアップからAEMオーサーまたはパブリッシュサービスを使用します。この例では、アカウントにログインしてAEM author を使用します。

サイトページから、 My Demo StoreFront > us > en ページを開き、「編集上部のアクションバー。
上部のアクションバーで、 公開済みとして表示をクリックし、ストアフロントのナビゲーションから任意のカテゴリをクリックします。
の任意の製品カードをクリックします。 製品紹介ページを選択し、「 色、サイズ 有効にする 買い物かごに追加 」ボタンをクリックします。
を開きます。 Adobe Experience Platform Debugger ブラウザーの拡張機能パネルから「」を選択し、 Experience Platform水型 SDK をクリックします。
に戻る 製品紹介ページ をクリックし、 買い物かごに追加 」ボタンをクリックします。これにより、データがExperience Platformに送信されます。この Adobe Experience Platform Debugger 拡張機能には、イベントの詳細が表示されます。
Experience Platform製品 UI 内で、 データセット/ My Demo StoreFront、 データセットアクティビティ タブをクリックします。この 指標とグラフ 切り替えを有効にすると、イベントデータ統計が表示されます。

実装の詳細

この CIFExperience Platformコネクタは Adobe Commerce用Experience Platformコネクタ( PWA Studio プロジェクト。

PWA Studioプロジェクトを使用すると、Adobe CommerceまたはMagento Open Sourceを利用したProgressive Web Application(PWA) ストアフロントを作成できます。プロジェクトには、という名前のコンポーネントライブラリも含まれています。ペレグリンビジュアルコンポーネントにロジックを追加する場合。この Peregrin ライブラリには、 Experience PlatformコネクタとExperience Platformをシームレスに統合

サポートされているイベント

現時点では、次のイベントがサポートされています。

エクスペリエンス XDM イベント：

買い物かごに追加 (AEM)
ページを表示 (AEM)
製品を表示 (AEM)
送信された検索リクエスト (AEM)
受信した検索応答 (AEM)

条件 Peregrine コンポーネントは、AEM Commerce プロジェクトで再利用されます。

エクスペリエンス XDM イベント：

買い物かごから削除
買い物かごを開く
買い物かごを表示
即時購入
チェックアウトを開始
チェックアウトの完了

プロファイル XDM イベント：

サインイン
アカウントを作成
アカウントを編集

その他のリソース

詳しくは、次のリソースを参照してください。

AEM-CIF コアコンポーネントとAdobe Experience Platformの統合

送信 `addToCart` イベントデータからExperience Platform

前提条件

AEM Commerceas a Cloud Service設定

ローカル設定

プロジェクト設定

Peregrine および CIF-AEP コネクタの依存関係のインストール

を使用するように Maven を設定 `--force` 引数

Babel 構成形式を変更

Babel を使用するように Webpack を設定

Apollo クライアントを設定

Peregrine および CIF コアコンポーネントの初期化

更新されたAEMプロジェクトをビルドしてデプロイします。

Experience Platform設定

コマースフィールドグループを含むスキーマを作成

データセットを作成

データストリームを作成

AEM Commerce 設定に datastream 値を追加

トリガー `addToCart` イベントとデータ収集の検証

実装の詳細

サポートされているイベント

その他のリソース

Business.Adobe.com リソース

このページ

次を表示：

学習

ドキュメント

コミュニティー

サポート

リソース

アドビアカウント

Adobe

AEM-CIF コアコンポーネントとAdobe Experience Platformの統合

送信 addToCart イベントデータからExperience Platform

前提条件

AEM Commerceas a Cloud Service設定

ローカル設定

プロジェクト設定

Peregrine および CIF-AEP コネクタの依存関係のインストール

を使用するように Maven を設定 --force 引数

Babel 構成形式を変更

Babel を使用するように Webpack を設定

Apollo クライアントを設定

Peregrine および CIF コアコンポーネントの初期化

更新されたAEMプロジェクトをビルドしてデプロイします。

Experience Platform設定

コマースフィールドグループを含むスキーマを作成

データセットを作成

データストリームを作成

AEM Commerce 設定に datastream 値を追加

トリガー addToCart イベントとデータ収集の検証

実装の詳細

サポートされているイベント

その他のリソース

Business.Adobe.com リソース

このページ

次を表示：

学習

ドキュメント

コミュニティー

サポート

リソース

アドビアカウント

Adobe

送信 `addToCart` イベントデータからExperience Platform

を使用するように Maven を設定 `--force` 引数

トリガー `addToCart` イベントとデータ収集の検証