この コマース統合フレームワーク (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 Commerce に設定および接続された AEM の実行インスタンスが含まれます。AEM as Cloud Service SDK を使用してローカル開発をセットアップするための要件と手順を確認します。
また、 Adobe Experience Platform データ収集用のスキーマ、データセット、データストリームを作成する権限と権限。 詳しくは、 権限管理.
作業を行うには AEM Commerceas a Cloud Service 必要なコードと設定を含むローカル環境で、次の手順を実行します。
フォロー: ローカル設定 動作するAEM Commerceas a Cloud Serviceの環境を作成する手順です。
フォロー: AEM Project Archetype 新しい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 ローダ (babel-loader
) や webpack の場合は、 webpack.common.js
ファイル。
次に移動: ui.frontend
モジュールと webpack.common.js
ファイルの module
プロパティ値:
{
test: /\.jsx?$/,
exclude: /node_modules\/(?!@magento\/)/,
loader: 'babel-loader'
}
この 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
})
]
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 Context を書き出します。
以下の EventCollectorContext
ここ.
上記のパッケージのインストール、コードおよび設定の変更が正しいことを確認するには、次の Maven コマンドを使用して、更新されたAEM Commerce プロジェクトを再ビルドし、デプロイします。 $ mvn clean install -PautoInstallSinglePackage
.
カテゴリや製品など、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 オプション。 の下 イベントデータセット フィールドで、前の手順のデータセット名を選択し、 保存.
詳しくは、 データストリームの概要 を参照してください。
上記の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 を使用します。
サイトページから、 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 イベント:
条件 Peregrine コンポーネント は、AEM Commerce プロジェクトで再利用されます。
エクスペリエンス XDM イベント:
プロファイル XDM イベント:
詳しくは、次のリソースを参照してください。