---
title: "インタラクティブな体験を展開しましょう"
slug: "run-an-interactive-experience"
abstract: "顧客のやり取りをシミュレートし体験をトリガーするデータ量を送るために、インタラクティブな体験を運営する方法Sitecore Personalize。"
---
# インタラクティブな体験を展開しましょう

インタラクティブな体験を作成した後、顧客のやり取りをシミュレートしたデータをSitecore Personalizeに送信して体験をトリガーすることでテストできます。

[カスタムフィールドを使う高度な体験](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/introduction-to-experiments-in-sitecore-personalize/introduction-to-interactive-experiments-in-sitecore-personalize/create-an-interactive-experiment/using-custom-fields-in-an-interactive-experiment.html "Using custom fields in an interactive experiment")にはこれを推奨します。よりシンプルな体験としては、コードをテストする代わりに[API応答をプレビュー](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/introduction-to-experiences/introduction-to-interactive-experiences/compose-the-api-response-for-an-interactive-experience/test-the-api-response-for-an-interactive-experience.html "Test the API response for an interactive experience")できます。

インタラクティブな体験を運営するためのさまざまな選択肢があります:

-   Engage SDKまたはCloud SDKが提供する機能を利用しています。
-   Personalize REST APIを使ってPOSTリクエストを送信します。
-   Chrome DevToolsコンソールを Boxever.js (レガシー)で使用しています。

## エンゲージSDK

Engage SDKを使っている場合は、Engage.personalize(personalizationData, timeout)関数を使ってインタラクティブな体験を実行できます。この関数は、実行したいライブ体験のfriendlyIdで呼び出さなければなりません。

体験を実行してコンソールに記録する方法の例を紹介します。

import { engage } from "./engage.js";
// ...

const handlePersonalization = async () => {
 const response = await engage.personalize(personalizationData);
 console.log(response);
};

こちらはパーソナライズデータオブジェクトの例です。このオブジェクトにはゲストを識別するためのemail属性やidentifier属性が含まれていません。このパーソナライズデータオブジェクトにはオプションのカスタムフィールドも含まれています。

const personalizationData = {
 channel: "WEB",
 currency: "EUR",
 pointOfSale: "myretailsite/ireland",
 friendlyId: "running\_shoes\_popup\_02",
 // optional attributes:
 params: { key: "value" }
}

## クラウドSDK

クラウドSDKを使っているなら、[personalize](https://doc.sitecore.com/sdk/en/developers/004/cloud-sdk/en/cloud-sdk-personalize-browser-personalize.html)機能を使ってライブSitecore Personalizeのインタラクティブな体験を実行できます。

以下はNext.jsのpersonalize関数の使い方の例です:

"use client";
import { useEffect } from "react";
import { init, personalize } from "@sitecore-cloudsdk/personalize/browser";

export default function Home() {
 // Initialize the module using init()...

 // Run personalization:
 const runPersonalization = async () => {
 const personalizationData = {
 channel: "WEB",
 friendlyId: "running\_shoes\_popup\_02",
 };

 const personalizeRes = await personalize(personalizationData);
 console.log("Ran personalization.", personalizeRes);
 };

 return (
 <div>
 <button onClick={runPersonalization}>run personalization</button>
 </div>
 );
}

## REST API

Personalize REST APIを使ってPOSTリクエストを出すことでインタラクティブな体験を運営できます。

フロー実行リクエストを送信するには、browserId、email、またはidentifiersを使う必要があります。

以下はbrowserIdを使った体験の例です:

curl -X POST '<baseURL>/v2/callFlows' \\
-H 'Accept: application/json' \\
--data-raw '
{
 "clientKey": "abBah8aelipaPeebae7roox2tiexoSee",
 "channel": "WEB",
 "language": "en",
 "currencyCode": "EUR",
 "pointOfSale": "myretailsite/ireland",
 "browserId": "a38b230c-11eb-4cf9-8d5d-274e9f344925",
 "friendlyId": "home\_page\_banner"
}'

## Boxever.js(遺産)

Chrome DevToolsコンソールを使ってJavaScriptを実行でき、インタラクティブな体験をBoxever.jsできます。この方法は、Boxever.jsライブラリがインストールされているウェブサイトからリクエストを実行でき、最小限の設定で済むため一般的に使われています。

こちらはChrome DevToolsを使ってインタラクティブな体験を実行するために使えるJavaScriptの例です:

var flowData = {
 "clientKey": Boxever.client\_key,
 "channel": "WEB",
 "language": "en",
 "currencyCode": "EUR",
 "pointOfSale": Boxever.pointOfSale,
 "browserId": Boxever.getID(),
 "friendlyId": "cos\_\_interactive\_\_custom\_fields" }
Boxever.callFlows(flowData, function(response) {
 console.log(response);
});

ペイロードリクエストにカスタムパラメータを含めるには、keyパラメータをflowDataオブジェクトに追加し、以下のJSON例のようにキー/バリューペアとしてカスタムparamsを追加します。

"params": {
 "loggedInState": "logged in" // example
 "someKey": "someValue" // example
 }