Web SDK での Web アプリ内メッセージのサポートの設定

Last update: Tue Jul 16 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：

作成対象：

開発者

アプリ内メッセージは、web アプリケーション内のユーザーに送信できる通知で、特定の目標地点へとユーザーを導きます。

これらの通知は、新機能の宣伝、特別オファーの提示、ユーザーのオンボーディングの促進など、様々な目的で使用できます。

アプリ内メッセージを使用すると、オーディエンスと効果的に関わり、アプリケーションの重要な側面に向けることができます。

IMPORTANT

Web アプリ内メッセージは、Adobe Journey Optimizer 機能であり、Web SDK を使用してパーソナライズされたコンテンツを配信します。

Web アプリ内メッセージキャンペーンの設定方法について詳しくは、Adobe Journey Optimizer ドキュメントを参照してください。

前提条件 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 アプリ内メッセージ用の拡張機能を設定します。

「Personalization」セクションで、「パーソナライゼーションストレージを有効にする オプションをオンにします。このオプションを使用すると、Web SDK は、ページの読み込み全体を通してユーザーに表示されたエクスペリエンスを追跡できます。

タグ拡張機能設定ページの「パーソナライゼーションストレージ」オプションを示す画像

Web アプリ内メッセージは、次の 2 種類のトリガーをサポートしています。

Platform へのデータの送信
メッセージの手動によるトリガー

使用するトリガーに応じて Web SDK タグ拡張機能を設定するには、次の節を参照してください。

Platform にデータを送信トリガーの設定手順 send-data-platform

Web SDK 拡張機能を含むタグプロパティを選択し、次の設定を使用して新しいルールを作成します。

拡張機能: Core
イベントタイプ: ライブラリが読み込まれました（ページのトップ）
「変更を保持」を選択して、イベント設定を保存します。

次に、作成したルールにアクションを追加します。

「Actions」セクションで、「追加」を選択します。
次の アクション 設定を使用します。
- 拡張機能: Adobe Experience Platform Web SDK
- アクションタイプ: イベントを送信
画面の右側の「Personalization」セクションで、「ビジュアルパーソナライゼーションの決定をレンダリング オプションを有効にします。
画面の右側の「決定コンテキスト」セクションで、キャンペーン設定で使用したキー/値のペアを定義して、アプリ内メッセージに適合します。
「変更を保持」を選択して、設定を保存します。

次に、新しく作成したルールをタグプロパティライブラリに追加する必要があります。これを行うには、公開フロー に移動し、以前に作成したルールを選択します。

ライブラリ画面を示す画像

ルールをライブラリに追加したら、「保存して開発用にビルド を選択し す。

パーソナライゼーション設定画面を示す画像。

これで設定プロセスが完了し、メッセージをユーザーに表示する準備が整いました。

手動トリガーを使用するための設定手順 manual-trigger

Web SDK 拡張機能を含むタグプロパティを選択し、次の設定を使用して新しいルールを作成します。

拡張機能: Core
イベントタイプ: クリック
ページ上の特定の要素に対してトリガーを設定し、CSS セレクターを使用して識別情報を選択します。

次に、作成したルールにアクションを追加します。

「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 コマンドを使用します。

この例では、パーソナライゼーションコンテンツは、ユーザーが web サイトの「今すぐ購入」ボタンをクリックすると表示されます。

 alloy("evaluateRulesets", {
     renderDecisions: true,
     personalization: {
         decisionContext: {
             "userAction": "buy_now"
         }
     }
 });

パーソナライゼーションストレージの設定 personalization-storage

「personalizationStorageEnabled 設定」オプションを使用して、設定した回数のアプリ内メッセージを表示することも、ページを訪問するたびに表示することもできます。

Web SDK 設定で、必要に応じて personalizationStorageEnabled オプションを設定します。

personalizationStorageEnabled: true は、アプリ内メッセージを Adobe Journey Optimizer キャンペーンで定義した頻度でトリガー付けします。
ページが読み込まれるたびにアプリ内メッセージを personalizationStorageEnabled: falseトリガーします。

recommendation-more-help

ad108910-6329-42f1-aa1d-5920a2b13636