在Web SDK中設定網頁應用程式內傳訊支援

應用程式內訊息是通知,您可以在網頁應用程式內傳送給使用者,引導他們前往特定地標。

您可以將這些通知用於不同的目的,例如促銷新功能、提供特殊優惠或協助使用者上線。

透過使用應用程式內訊息,您可以有效地與對象互動,並引導他們前往應用程式的重要層面。

IMPORTANT
Web應用程式內傳訊功能是Adobe Journey Optimizer功能,它使用Web SDK來提供個人化內容。
如需如何設定網頁應用程式內傳訊活動的詳細指示,請參閱Adobe Journey Optimizer檔案

先決條件 prerequisites

Web SDK標籤擴充功能版本 extension-version

Web應用程式內傳訊功能需要最新版Web SDK標籤擴充功能。

設定CSP以傳送網頁應用程式內訊息 csp

當您設定網頁應用程式內傳訊時,您必須在CSP中包含下列指令:

default-src  blob:;

如需有關設定CSP的詳細資訊,請參閱專屬檔案

使用Web SDK標籤擴充功能設定網頁應用程式內傳訊 tag-extension

請參閱Web SDK標籤擴充功能組態頁面,瞭解您可在何處找到下述設定。

在您安裝 Web SDK標籤擴充功能後,請依照下列步驟設定Web應用程式內傳訊的擴充功能。

在​ Personalization ​區段中,勾選​ 啟用個人化儲存空間 ​選項。 此選項可讓Web SDK追蹤使用者在頁面載入過程中所看到的體驗。

此影像在標籤延伸設定頁面中顯示個人化儲存選項。

Web應用程式內傳訊支援兩種型別的觸發器:

請參閱下列章節,根據您想使用的觸發程式來設定Web SDK標籤擴充功能。

傳送資料至Platform ​觸發器的設定步驟 send-data-platform

選取包含您Web SDK擴充功能的標籤屬性,並使用下列設定建立新規則

  1. 延伸模組: 核心

  2. 事件型別: 載入的程式庫(頁面頂端)

    顯示事件設定畫面的影像。

  3. 選取​ 保留變更 ​以儲存事件設定。

接下來,您必須將動作新增至您建立的規則。

  1. 在Actions區段中,選取​ 新增
    顯示編輯規則熒幕的影像。

  2. 使用下列​ 動作 ​設定:

    • 擴充功能: Adobe Experience Platform Web SDK

    • 動作型別: 傳送事件

      顯示動作設定畫面的影像。

  3. 在熒幕右側的​ Personalization ​區段中,啟用​ 呈現視覺個人化決策 ​選項。
    顯示個人化設定畫面的影像。

  4. 在畫面右側的​ 決定內容 ​區段中,定義您用於行銷活動設定的​ 索引鍵/ ​配對,以符合應用程式內訊息的資格。
    顯示個人化設定畫面的影像。

  5. 選取​ 保留變更 ​以儲存您的設定。

接下來,您必須將新建立的規則新增至標籤屬性程式庫。 若要這麼做,請移至​ 發佈流程,並選取您先前建立的規則。

顯示資料庫畫面的影像。

將規則新增至程式庫後,請選取​ 儲存並建置至開發

顯示個人化設定畫面的影像。

設定程式現已完成,您的訊息已準備好向使用者顯示。

使用手動觸發器的設定步驟 manual-trigger

選取包含您Web SDK擴充功能的標籤屬性,並使用下列設定建立新規則

  1. 延伸模組: 核心

  2. 事件型別: 按一下

  3. 為頁面上的特定元素設定觸發條件,識別碼為您選擇的CSS選取器。

    顯示事件設定畫面的影像。

接下來,您必須將動作新增至您建立的規則。

  1. 在Actions區段中,選取​ 新增
    顯示編輯規則熒幕的影像。

  2. 使用下列​ 動作 ​設定:

    • 擴充功能: Adobe Experience Platform Web SDK

    • 動作型別: 評估規則集

      顯示動作設定畫面的影像。

  3. 在熒幕右側,啟用​ 呈現視覺化個人化決定 ​選項。
    顯示個人化設定畫面的影像。

  4. 在畫面右側的​ 決定內容 ​區段中,定義您用於行銷活動設定的​ 索引鍵/ ​配對,以符合應用程式內訊息的資格。
    顯示個人化設定畫面的影像。

  5. 選取​ 保留變更 ​以儲存您的設定。

接下來,您必須將新建立的規則新增至標籤屬性程式庫。 若要這麼做,請移至​ 發佈流程,並選取您先前建立的規則。

顯示資料庫畫面的影像。

將規則新增至程式庫後,請選取​ 儲存並建置至開發

顯示個人化設定畫面的影像。

設定程式現已完成,您的訊息已準備好向使用者顯示。

使用Web SDK JavaScript資料庫設定Web應用程式內傳訊 js-library

除了使用Web SDK標籤擴充功能外,您也可以直接從Web SDK JavaScript資料庫設定「Web應用程式內傳訊」 。

您可以透過兩種方式顯示來自Adobe Journey Optimizer的網頁應用程式內訊息。

方法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設定選項,選擇在使用者設定次數內或每次造訪頁面時,向使用者顯示應用程式內訊息。

Web SDK組態中,根據您的需求設定personalizationStorageEnabled選項:

  • personalizationStorageEnabled: true會以您在Adobe Journey Optimizer行銷活動中定義的頻率觸發應用程式內訊息。
  • personalizationStorageEnabled: false會在每次頁面載入時觸發應用程式內訊息。
recommendation-more-help
ad108910-6329-42f1-aa1d-5920a2b13636