Web SDK での Web アプリ内メッセージサポートの設定
アプリ内メッセージとは、Web アプリケーション内のユーザーに送信し、特定の目標地点に導く通知です。
これらの通知は、新機能の促進、特別オファーの提示、ユーザーのオンボーディングの促進など、様々な目的で使用できます。
アプリ内メッセージを使用すると、オーディエンスと効果的に関わり合い、オーディエンスをアプリケーションの重要な側面に導くことができます。
前提条件 prerequisites
Web SDK タグ拡張機能のバージョン extension-version
Web アプリ内メッセージ機能には、Web SDK タグ拡張機能の最新バージョンが必要です。
Web アプリ内メッセージ用の CSP の設定 csp
設定時に Web アプリ内メッセージの場合、CSP に次のディレクティブを含める必要があります。
default-src blob:;
CSP の設定について詳しくは、 専用ドキュメント.
Web SDK タグ拡張機能を使用した Web アプリ内メッセージの設定 tag-extension
詳しくは、 Web SDK タグ拡張機能の設定ページ を参照して、以下で説明する設定の場所を確認してください。
次の条件が満たされた後 インストール済み Web SDK タグ拡張機能を使用する場合は、次の手順に従って Web アプリ内メッセージ用の拡張機能を設定します。
Adobe Analytics の パーソナライズ セクションで、 パーソナライゼーションストレージを有効にする オプション。 このオプションを使用すると、Web SDK は、ページの読み込み時にユーザーに表示されたエクスペリエンスを追跡できます。
Web アプリ内メッセージでは、次の 2 種類のトリガーをサポートしています。
使用するトリガーに応じて Web SDK タグ拡張を設定するには、以下の節を参照してください。
の設定手順 Platform へのデータ送信 トリガー send-data-platform
Web SDK 拡張機能を含むタグプロパティを選択し、 新しいルールの作成 を次の設定で使用します。
-
拡張機能：コア
-
イベントタイプ: 読み込まれたライブラリ（ページ上部）
-
選択 変更を保持 イベント設定を保存します。
次に、作成したルールにアクションを追加する必要があります。
-
Adobe Analytics の Actions セクション、選択 追加.
-
次を使用します。 アクション 設定：
-
拡張: Adobe Experience Platform Web SDK
-
アクションタイプ: イベントを送信
-
-
画面の右側で、 パーソナライズ セクションで、 視覚的なパーソナライゼーションの決定をレンダリング オプション。
-
画面の右側で、 決定コンテキスト 「 」セクションで、 キー/値 アプリ内メッセージの対象として認定されるために、キャンペーン設定で使用したペア。
-
選択 変更を保持 設定を保存します。
次に、新しく作成したルールをタグプロパティライブラリに追加する必要があります。 これをおこなうには、に移動します。 公開フロー をクリックし、以前に作成したルールを選択します。
ライブラリにルールを追加したら、「 」を選択します。 開発用に保存およびビルド.
設定プロセスが完了し、メッセージがユーザーに表示される準備が整いました。
手動設定を使用するためのトリガー手順 manual-trigger
Web SDK 拡張機能を含むタグプロパティを選択し、 新しいルールの作成 を次の設定で使用します。
-
拡張機能：コア
-
イベントタイプ: クリック
-
ページ上の特定の要素のトリガー、および任意の CSS セレクターで識別子を設定します。
次に、作成したルールにアクションを追加する必要があります。
-
Adobe Analytics の Actions セクション、選択 追加.
-
次を使用します。 アクション 設定：
-
拡張: Adobe Experience Platform Web SDK
-
アクションタイプ: ルールセットを評価
-
-
画面の右側で、 視覚的なパーソナライゼーションの決定をレンダリング オプション。
-
画面の右側で、 決定コンテキスト 「 」セクションで、 キー/値 アプリ内メッセージの対象として認定されるために、キャンペーン設定で使用したペア。
-
選択 変更を保持 設定を保存します。
次に、新しく作成したルールをタグプロパティライブラリに追加する必要があります。 これをおこなうには、に移動します。 公開フロー をクリックし、以前に作成したルールを選択します。
ライブラリにルールを追加したら、「 」を選択します。 開発用に保存およびビルド.
設定プロセスが完了し、メッセージがユーザーに表示される準備が整いました。
Web SDK JavaScript ライブラリを使用した Web アプリ内メッセージの設定 js-library
Web SDK タグ拡張機能を使用する代わりに、Web SDK JavaScript ライブラリから直接 Web アプリ内メッセージを設定することもできます。
Adobe Journey Optimizerからの Web アプリ内メッセージは、2 つの方法で表示できます。
方法 1：パーソナライゼーションコンテンツを自動的に取得する automatic
Web SDK でページの読み込み時にパーソナライゼーションコンテンツを自動的に取得するには、 sendEvent コマンドを使用します。
alloy("sendEvent", {
renderDecisions: true,
personalization: {
surfaces: ['#welcome']
}
});
方法 2：ユーザーのアクションに基づいて、パーソナライゼーションコンテンツを手動で取得する manual
ユーザーが特定のアクションを実行した後にのみパーソナライゼーションコンテンツを表示するには、 evaluateRulesets コマンドを使用します。
この例では、ユーザーが 購入する 」ボタンをクリックします。
alloy("evaluateRulesets", {
renderDecisions: true,
personalization: {
decisionContext: {
"userAction": "buy_now"
}
}
});
パーソナライゼーションストレージの設定 personalization-storage
ユーザーに対して、設定された回数だけ、またはユーザーがページを訪問するたびに、アプリ内メッセージを personalizationStorageEnabled 設定オプション。
Adobe Analytics の Web SDK の設定 を設定します。 personalizationStorageEnabled オプションを選択します。
personalizationStorageEnabled: trueトリガー内メッセージを、 Adobe Journey Optimizerキャンペーン.personalizationStorageEnabled: falseトリガー読み込みのたびにアプリ内メッセージが表示されます。