透過「適用於 Google 助理的動作」與使用者互動

1. 總覽

Actions on Google 是一個開發人員平台，可製作軟體來擴充 Google 助理 (Google 的虛擬個人助理) 在超過 10 億個裝置上擴充的功能，包括智慧型揚聲器、手機、汽車、電視、耳罩式耳機等等。使用者可透過 Google 助理參與對話，完成各項工作，例如購買食品雜貨或叫車。(如需可用功能的完整清單，請參閱動作目錄)。開發人員可以透過 Actions on Google 輕鬆建立及管理使用者與第三方服務之間的精彩對話體驗。

這是一個進階程式碼研究室模組，適用於已具備 Google 助理動作功能的讀者。如果您之前從未使用過 Action on Google，我們極力建議您依照我們提供的簡介程式碼研究室 (第 1 級、第 2 級和 3 級) 深入瞭解這個平台。這些進階模組可引導您完成一系列功能，協助您擴充 Action 和拓展觀眾群。

評估 Action 成效的其中一個重要方法，就是使用者互動，或是動作在初次互動後吸引使用者回流的成效。為了簡化過程，您可以在「動作」中導入多項功能，讓使用者能返回對話。

此程式碼研究室涵蓋使用者操作功能，以及 Actions on Google 的最佳做法。

a3fc0061bd01a75.png 961ef6e27dc73da2.png

建構項目

讓 Google 運用以下功能強化已建構的功能：

  • 傳送每日更新，讓使用者輕觸按鈕即可與您的動作交談
  • 傳送連結至動作的「推播通知」
  • 建立連結，將使用者從行動瀏覽器帶往你的動作

課程內容

  • 使用者參與的原因和重要性對該行動的影響為何？
  • 如何修改特定動作來提高使用者參與度
  • 適合在各種動作中使用的使用者互動功能
  • 如何使用 Actions API 透過 Google 助理傳送通知

軟硬體需求

您必須擁有下列工具：

  • 您選擇的 IDE/文字編輯器，例如 WebStorm、Atom 或 Sublime
  • 終端機可執行已安裝 Node.js、npm 和 git 的殼層指令
  • 網路瀏覽器，例如 Google Chrome
  • 使用 Firebase 指令列介面的本機開發環境
  • 使用 Google 助理的行動裝置 (Android 或 iOS) (你必須使用建立此專案的 Google 帳戶登入 Google 助理)。

我們強烈建議您熟悉 JavaScript (ES6) 的操作方式 (雖然不是必要步驟)，但可以瞭解 Webhook 程式碼。

2. 設定專案

本節說明如何在先前完成的完整動作中加入使用者參與度功能。

瞭解範例

這個程式碼研究室的示範是一個簡單的動作，名為「動作健身房」的虛構健身房。這個動作會提供健身房的相關資訊，包括每天輪播的課程。由於這類類別每天都會提供不同的實用資訊，因此很適合用來為所有使用者互動功能提供實用的資訊。

下圖為 Action Gym 的對話流程範例：

e2d6e4ad98948cf3.png

您必須對對話方塊進行小幅修改，以更符合加入的互動功能。不過，對話的一般設計並不大，

下載您的基本檔案

執行下列指令，複製程式碼研究室的 GitHub 存放區：

git clone https://github.com/actions-on-google/user-engagement-codelab-nodejs

設定專案和代理程式

如要設定動作專案和 Dialogflow 代理程式，請完成下列步驟：

  1. 開啟動作控制台。
  2. 按一下 [新專案]。
  3. 輸入專案名稱，例如 engagement-codelab。
  4. 按一下 [建立專案]。
  5. 請向下捲動至「更多選項」部分，然後按一下 [對話] 資訊卡，而不要選擇類別。
  6. 按一下 [建立動作] 展開選項，然後選取 [新增動作]。
  7. 按一下 [新增您的第一個動作]。
  8. 在「Create Action」(建立動作) 對話方塊中，選取 [Custom Intent] (自訂意圖)，然後按一下 [Create] (建構)，啟動 Dialogflow 主控台。
  9. 在 Dialogflow 主控台上按一下 [Create] (建立)。
  10. 按一下左側導覽列中的 6bf56243a8a11a3b.png (齒輪圖示)。
  11. 依序按一下 [匯出和匯入] 和 [從 Zip 還原]。
  12. 從您先前下載的 /user-engagement-codelab-nodejs/start/ 目錄中上傳 agent.zip 檔案。
  13. 輸入「RESTORE」，然後按一下 [還原]。
  14. 按一下 [完成]。

部署出貨要求

你的動作專案和 Dialogflow 代理程式已準備就緒，請透過 Firebase Functions CLI 部署本機 index.js 檔案。

在基礎檔案副本的 /user-engagement-codelab-nodejs/start/functions/ 目錄中，執行下列指令：

firebase use <PROJECT_ID>

npm install

firebase deploy

幾分鐘後，您應該會看到「部署完成！」表示您已成功將 Webhook 部署到 Firebase。

擷取部署作業網址

您必須向 Dialogflow 提供雲端函式的網址。如要擷取這個網址，請按照下列步驟操作：

  1. 開啟 Firebase 主控台。
  2. 從選項清單中選取你的 Action 專案。
  3. 前往左側導覽列中的 [開發 > 函式]。當系統提示您「選擇資料共用設定」時，只要按一下 [稍後再進行]，即可忽略這個選項。
  4. 您應該會在「Dashboard」(資訊主頁) 標籤下看到「Intt;fulfillment」項目 (含有網址在「Trigger」(觸發條件) 之下)。儲存這個網址；您需在下一節將網址複製到 Dialogflow。

1741a329947975db.png

在 Dialogflow 中設定 Webhook 網址

現在您必須更新 Dialogflow 代理程式，以便使用 Webhook 執行要求。如要採用這種方式，請按照下列步驟進行：

  1. 開啟 Dialogflow 主控台 (您也可以視需要關閉 Firebase 主控台)。
  2. 按一下左側導覽列的 [執行要求]。
  3. 啟用 Webhook。
  4. 貼上從 Firebase 資訊主頁複製的網址 (如果還沒出現)。
  5. 按一下 [儲存]。

確認專案設定正確

使用者應能針對 Action Gym 叫用動作，包括以營業時間撰寫的硬式編碼文字回應，以及列出一週中每一天課程時間表的文字回應。

如何在動作模擬工具中測試您的操作：

  1. 在 Dialogflow 主控台左側導覽面板中，依序按一下 [Integrations] (整合) > [Google 助理]。
  2. 確認 [自動預覽變更] 已啟用，然後按一下 [測試] 以更新動作專案。
  3. 動作模擬工具會載入你的「動作」專案。如要測試動作，請在 [輸入] 欄位中輸入 Talk to my test app，然後按下 Enter 鍵。
  4. 您應該會看到可以打給 Action Gym 的回應。請嘗試按照提示繼續對話，同時確保執行要求包含對每個輸入內容的回應。

60acf1ff87b1a87f.png

3. 新增每日更新訂閱項目

與使用者互動時，最常用的方法就是提供最實用的資訊。具體做法是讓使用者選擇訂閱意圖的每日更新，藉此將 Google 助理通知直接傳送給該意圖的意圖。

在這個步驟中，您將瞭解每日更新項目，並將這些動作新增至動作的課程清單意圖中。執行這些操作後，你的動作會如下所示：

F48891c8118f7436.png

這會如何吸引使用者？

智慧型手機使用者通常已熟悉推播通知，可提供應用程式相關資訊和更新。透過 Google 助理以外的行動裝置，您可以利用每日更新訂閱項目輕鬆取得特定使用者的行動裝置資料。

每日更新是一項實用的互動工具，但不一定能納入每一個動作中。在決定是否要為某個動作新增每日更新訂閱時，請參考下列提示：

  • 確保使用者每天看到的更新內容，都會看到不同的實用資訊。如果每次輕觸更新後，系統每次都顯示相同的提示，則使用者可能會在幾天後取消訂閱。
  • 請讓使用者在瀏覽您每日的更新項目時，直接使用適當的對話方塊。使用者通常不會從對話開始，因此不會覺得太多內容。
  • 先向使用者顯示您的「動作」所帶來的好處，再提示使用者訂閱每日最新動態。使用者應該已選擇「我希望每天看到這項內容」，也就是提供訂閱選項的選項。
  • 不要重複向使用者提供訂閱建議。在使用者看過訂閱項目後，立即提供每日更新項目，並避免在其他地方透露這些資料。
  • 觸發更新意圖後，請讓對話保持精簡。大部分的每日更新都只能包含單一回應，而無需使用者輸入內容即可關閉。

開啟每日更新

您可以在歡迎對話中加入每日更新訂閱項目，讓使用者在對話開始時進入更明確的意圖，或是更具體的意圖，以便透過深層連結將對話連結至對話中的任一處。在這個程式碼研究室中，Class List 意圖是最適合的，因為對話會每天改變，而使用者覺得有必要提醒自己有哪些課程可以派上用場。

請按照下列步驟，為「課程清單」意圖啟用每日更新：

  1. 在「動作」控制台中，按一下 [開發] 分頁標籤，然後選擇左側導覽列中的 [動作]。
  2. 按一下「動作」清單下方的 [課程清單]。
  3. 在「使用者參與」部分，將 [您想為使用者提供每日更新] 選項切換為開啟狀態。
  4. 設定描述內容標題的「內容標題」。說明內容為「你希望我每天傳送什麼內容」，因此你必須說出標題，並提供清楚的音效。在這個範例中，請將「Content title」(內容標題) 設為 list of upcoming Action Gym classes。
  5. 按一下網頁頂端的 [儲存]。

c00885cc30e14d68.png

設定 Dialogflow

在 Dialogflow 主控台中，請按照下列步驟建立每日更新訂閱流程的意圖：

提示使用者進行訂閱

  1. 設定新的意圖以處理要求訂閱每日更新的使用者。在 Dialogflow 主控台中，按一下左側導覽面板中「Intents」(意圖) 旁邊的 [+] 按鈕即可建立新的意圖。
  2. 將這個新意圖命名為 Setup Updates。
  3. 在「訓練詞組」區段下，新增下列使用者運算式：
  • Send daily reminders
  • Reminder
  • Remind me
  • Updates
  • Upcoming classes
  1. 在「Fulfillment」(執行要求) 區段下，切換「Enable Webhook call for thisIntent」(為這個意圖啟用 Webhook 呼叫) 選項。
  2. 按一下網頁頂端的 [儲存]。

5c70faa02151da0.png

處理使用者的決定

  1. 設定新意圖以處理使用者對於每日更新訂閱提示的回應。在左側導覽區中，按一下「Intents」(意圖) 旁邊的 [+] 按鈕即可建立新的意圖。
  2. 將這個新意圖命名為 Confirm Updates。
  3. 在「事件」部分之下新增 actions_intent_REGISTER_UPDATE。使用者完成每日更新訂閱流程後，就會觸發這個 Dialogflow 事件。
  4. 在「Fulfillment」(執行要求) 區段下，切換「Enable Webhook call for thisIntent」(為這個意圖啟用 Webhook 呼叫) 選項。
  5. 按一下網頁頂端的 [儲存]。

b871c2bdadac8abc.png

實作要求

如要在 Webhook 中導入執行要求，請完成下列步驟：

載入依附元件

b2f84ff91b0e1396.png 在 index.js 檔案中，更新 require() 函式，從 actions-on-google 套件新增 RegisterUpdate 套件，匯入內容如下所示：

index.js

const {
  dialogflow,
  Suggestions,
  RegisterUpdate,
} = require('actions-on-google');

更新建議方塊

b2f84ff91b0e1396.png 在 index.js 檔案中，將 DAILY 項目新增至建議方塊標題清單，因此您的 Suggestion 定義如下所示：

index.js

// Suggestion chip titles
const Suggestion = {
  HOURS: 'Ask about hours',
  CLASSES: 'Learn about classes',
  DAILY: 'Send daily reminders',
};

為新的意圖新增執行要求

當使用者表示想要訂閱時，可呼叫 RegisterUpdate 輔助程式以更新更新的意圖 (類別清單) 和類型 (DAILY)，啟動每日更新訂閱流程。訂閱程序完成後，Google 助理會透過 status 引數觸發 actions_intent_REGISTER_UPDATE 事件，說明訂閱項目是否成功完成。提供後續提示，提醒使用者如何根據訂閱狀態變更。

b2f84ff91b0e1396.png 在 index.js 檔案中，新增下列程式碼：

index.js

// Start opt-in flow for daily updates
app.intent('Setup Updates', (conv) => {
  conv.ask(new RegisterUpdate({
    intent: 'Class List',
    frequency: 'DAILY',
  }));
});

// Confirm outcome of opt-in for daily updates
app.intent('Confirm Updates', (conv, params, registered) => {
  if (registered && registered.status === 'OK') {
     conv.ask(`Gotcha, I'll send you an update everyday with the ` +
     'list of classes. Can I help you with anything else?');
  } else {
    conv.ask(` I won't send you daily reminders. Can I help you with anything else?`);
  }
  if (conv.screen) {
    conv.ask(new Suggestions([Suggestion.HOURS, Suggestion.CLASSES]));
  }
});

為使用者提供其他提示

「課程清單」回應的最後會提供每日更新訂閱項目，但這是個問題。使用者輕觸每日更新通知時，也會觸發相同的回應，因此即使他們只收到一則通知，系統也會要求他們訂閱每日最新動態。您該如何避免使用者認為他們需要重新訂閱？

幸好，您的 conv 物件引數包含使用者開始進行對話的位置相關資訊。您可以檢查 conv 引數，確認其中是否包含 UPDATES 部分，指出使用者從每日更新通知已開始對話，並據此變更回應。您也可以在提供類別清單後，使用這個對話分支來立即關閉對話方塊。

b2f84ff91b0e1396.png 在 index.js 檔案中，替換下列程式碼：

index.js

// Class list intent handler
app.intent('Class List', (conv, {day}) => {
  if (!day) {
    day = DAYS[new Date().getDay()];
  }
  const classes =
  [...new Set(schedule.days[day].map((d) => `${d.name} at ${d.startTime}`))]
  .join(', ');
  const classesMessage =
  `On ${day} we offer the following classes: ${classes}. ` +
  `Can I help you with anything else?`;
  conv.ask(classesMessage);
  if (conv.screen) {
    conv.ask(new Suggestions([Suggestion.HOURS]));
  }
});

：

index.js

// Class list intent handler
app.intent('Class List', (conv, {day}) => {
  if (!day) {
    day = DAYS[new Date().getDay()];
  }
  const classes =
  [...new Set(schedule.days[day].map((d) => `${d.name} at ${d.startTime}`))]
  .join(', ');
  let classesMessage = `On ${day} we offer the following classes: ${classes}. `;
  // If the user started the conversation from the context of a daily update,
  // the conv's arguments will contain an 'UPDATES' section.
  let engagement = conv.arguments.get('UPDATES');
  // Check the conv arguments to tailor the conversation based on the context.
  if (engagement) {
    classesMessage += `Hope to see you soon at Action Gym!`;
    conv.close(classesMessage);
  } else {
    classesMessage += `Would you like me to send you daily reminders of upcoming classes, or can I help you with anything else?`;
    conv.ask(classesMessage);
    if (conv.screen) {
      conv.ask(new Suggestions([Suggestion.DAILY, Suggestion.HOURS]));
    };
  };
});

測試每日最新消息

在終端機中，執行下列指令以將更新後的 Webhook 程式碼部署至 Firebase：

firebase deploy

如要測試動作模擬工具的自訂自訂功能，請按照下列步驟操作：

  1. 在動作主控台中，前往 [測試]。
  2. 在「輸入」欄位中輸入 Talk to my test app，然後按下 Enter 鍵。
  3. 輸入 Learn about classes 並按下 Enter 鍵。你的動作回應現在應提供傳送每日提醒的選項。
  4. 輸入 Send daily reminders 並按下 Enter 鍵。
  5. 輸入你想要看到更新的時間，然後按下 Enter 鍵。為了進行測試，請嘗試在目前時間的 3 到 5 分鐘後回覆。

83a15ecac8c71787.png

在行動裝置上，您應該會收到有關 Google 助理通知，說明您預計將進行更新的時間。請注意，這則通知可能需要幾分鐘的時間才會顯示。只要輕觸通知，即可直接前往 Google 助理的「課程清單」意圖，查看即將進行的課程清單：

8582482eafc67d5b.png

4. 新增推播通知

除了與您的動作之外的使用者互動之外，您也可以呼叫 Actions API，藉此傳送推播通知給使用者。這些通知與每日更新不同，Google 助理不會自動排定這些通知，所以您可以隨時間發送通知。

在這個步驟中，您必須新增「課程已取消」意圖，並通知使用者取消課程通知，瞭解如何在「動作」中導入推播通知。您也會設定傳送通知的三個元件：

  • Actions API 帳戶 - 您傳送 POST 要求給 API 以通知使用者，因此您必須設定服務帳戶和憑證，才能與這個 API 整合。
  • 權限小幫手 - 您必須擁有使用者的存取權限，才能存取傳送推播通知所需的使用者 ID。在此範例中，您將使用用戶端程式庫函式呼叫權限輔助程式，並要求此 ID。
  • 儲存空間：如要將推播通知傳送至對話以外的使用者，您必須儲存使用者 ID，方便您隨時回想。在此範例中，您必須建立 Firestore 資料庫來儲存每位使用者的資訊。

按照這些指示進行後，您就會在動作的對話中新增下列對話方塊：

7c9d4b633c547823.png

這會如何吸引使用者？

智慧型手機使用者通常已熟悉推播通知，可提供應用程式相關資訊和更新。推播通知可讓使用者靈活地透過 Google 助理以外的行動裝置存取使用者。每日更新的使用者已經知道，他們每天都會收到通知。然而，透過推播通知，使用者並不知道自己是否選擇接收不常的通知，或者每天是否會收到數則通知。

推播通知是很實用的互動工具，但不一定能納入每一個動作中。決定是否要在推播通知中加入推播通知時，請參考下列提示：

  • 規劃推播通知的時間表範例。如果您打算每天傳送一則推播通知，建議您改用每日更新。
  • 請確保您的推播通知在每次收到時都能提供實用資訊。此外，通知還能透過動作提供深層連結，因此請確保這些意圖對使用者有所幫助。
  • 明確告知使用者要訂閱推播通知，他們必須瞭解每則推播通知的注意事項，並大致瞭解通知功能的傳送頻率。

啟用 Actions API

  1. 開啟 Google Cloud Console，然後在下拉式選單中選取您的 Actions 專案名稱。

d015c1515b99e3db.png

  1. 在導覽選單中 (☰) 中，前往 API 與 Service > 程式庫。
  2. 搜尋 Actions API，然後按一下 [啟用]。

6d464f49c88e70b4.png

建立服務帳戶

Actions API 需要驗證，因此你必須建立服務帳戶才能傳送要求。請按照下列步驟建立及安裝 Actions API 的服務帳戶金鑰：

  1. 在 Google Cloud Console 的導覽選單中 (ridge) 中，前往 APIs & Services > Credentials。
  2. 按一下 [Create credentials > Service account key]。
  3. 在「服務帳戶」下拉式選單中，選取 [新增服務帳戶]。
  4. 填寫下列資訊：
  • 服務帳戶名稱：service-account
  • 角色：Project > 擁有者
  • 服務帳戶 ID：service-account (一律加上 @<project_id>.iam.gserviceaccount.com)
  • 金鑰類型：JSON
  1. 按一下 [Create]。
  2. 將下載的 JSON 檔案移至專案的 /user-engagement-codelab/start/functions/ 目錄。
  3. 將 JSON 檔案重新命名為 service-account.json。

d9bd79d35691de3a.png

啟用 Firestore

為了在對話以外的地方傳送通知，您需要以儲存方式來儲存可從通知碼參照的使用者 ID。在此範例中，我們使用 Firestore 資料庫儲存已訂閱使用者的使用者 ID。

請按照下列步驟為您的動作建立 Firestore 資料庫：

  1. 在 Firebase 主控台中選取您的動作專案名稱。
  2. 在左側導覽列中，前往「Dev > Database」，然後按一下 [Create database]。
  3. 選取 [開始以測試模式啟動]。
  4. 按一下 [Enable] (啟用)。

6dfc386413954caa.png

設定 Dialogflow

請按照下列步驟在 Dialogflow 主控台中建立推播通知的選擇流程：

提示使用者進行訂閱

  1. 設定新的意圖來處理使用者要求訂閱取消課程的推播通知。在 Dialogflow 主控台中，按一下左側導覽面板中「Intents」(意圖) 旁邊的 [+] 按鈕即可建立新的意圖。
  2. 將這個新意圖命名為 Setup Push Notifications。
  3. 在「訓練詞組」區段下，新增下列使用者運算式：
  • Subscribe to notifications
  • Send notification
  • Notify me
  • Send class notifications
  • Cancelled notifications
  1. 在「Fulfillment」(執行要求) 區段下，切換「Enable Webhook call for thisIntent」(為這個意圖啟用 Webhook 呼叫) 選項。
  2. 按一下網頁頂端的 [儲存]。

3d99bc41d0492552.png

處理使用者的決定

  1. 設定新意圖來處理使用者的推播通知通知提示。在左側導覽區中，按一下「Intents」(意圖) 旁邊的 [+] 按鈕即可建立新的意圖。
  2. 將這個新意圖命名為 Confirm Push Notifications。
  3. 在「事件」部分之下新增 actions_intent_PERMISSION。使用者完成推播通知的訂閱流程後，就會觸發這個 Dialogflow 事件。
  4. 在「Fulfillment」(執行要求) 區段下，切換「Enable Webhook call for thisIntent」(為這個意圖啟用 Webhook 呼叫) 選項。
  5. 按一下網頁頂端的 [儲存]。

d37f550c5e07cb73.png

處理推播通知

您可以將推播通知連結到特定的意圖，讓輕觸推播通知的使用者可直接在「動作」中直接連結到該意圖。在此範例中，新增推播通知的意圖，提供取消課程詳細資料。

請按照下列步驟新增要在使用者輕觸推播通知時觸發的意圖：

  1. 在 Dialogflow 主控台中，按一下左側導覽面板中「Intents」(意圖) 旁邊的 [+] 按鈕即可建立新的意圖。
  2. 將這個新意圖命名為 Class Canceled。
  3. 在「Training 這項功能」區段下，將 Cancelations 新增為「使用者運算式」。
  4. 在「Fulfillment」(執行要求) 區段下，切換「Enable Webhook call for thisIntent」(為這個意圖啟用 Webhook 呼叫) 選項。
  5. 按一下網頁頂端的 [儲存]。

940379556f559631.png

在會議進行時傳送測試通知

在實際工作環境中，您應該有可傳送推播通知的指令碼與動作履行程式碼。在這個範例中，您可以建立一個意圖，讓您可以在叫用動作時叫用推播通知。本意圖僅用於偵錯；在實務上，推播通知不應由出貨程序處理，或是由其他動作觸發。

請按照下列步驟建立推播通知的測試意圖：

  1. 為了進行測試和偵錯，請設定新的意圖，以便向推播通知使用者傳送推播通知。在 Dialogflow 主控台中，按一下左側導覽面板中「Intents」(意圖) 旁邊的 [+] 按鈕即可建立新的意圖。
  2. 將這個新意圖命名為 Test Notification。
  3. 在「Training 這項功能」區段下，將 Test notification 新增為「使用者運算式」。
  4. 在「Fulfillment」(執行要求) 區段下，切換「Enable Webhook call for thisIntent」(為這個意圖啟用 Webhook 呼叫) 選項。
  5. 按一下網頁頂端的 [儲存]。

6967f5a997643eb8.png

開啟推播通知功能

如要為「課程已取消」意圖啟用推播通知，請按照下列步驟操作：

  1. 在 Dialogflow 主控台中，前往導覽列中的 [Integrations] (整合)。
  2. 按一下「Google 助理」資訊卡上的 [整合設定]。
  3. 將 ClassCanceled 新增為 隱式叫用意圖。執行這個步驟時，Dialogflow 可辨識出使用者是否可以使用「課程已取消」意圖 (輕觸推播通知) 開始對話。
  4. 按一下 [Close] (關閉)。

1ac725231ed279a1.png

  1. 在「動作」控制台中，按一下 [開發] 分頁標籤，然後選擇左側導覽列中的 [動作]。
  2. 按一下「動作」清單下方的 [課程已取消]。
  3. 在「使用者參與」部分，將 [您想傳送推播通知嗎？] 選項切換成開啟。
  4. 設定描述推播通知的內容標題。上的內容是「我應該為 \quot 傳送推播通知，這樣可以嗎？因此，在大聲說出廣告標題時，請確保標題正確且聲音正確。在這個範例中，請將「Content title」(內容標題) 設為 class cancelations。
  5. 按一下網頁頂端的 [儲存]。

4304c7cd575f6de3.png

實作要求

如要在 Webhook 中導入執行要求，請完成下列步驟：

載入依附元件

b2f84ff91b0e1396.png 在 index.js 檔案中，更新 require() 函式，從 actions-on-google 套件新增 UpdatePermission 套件，匯入內容如下所示：

index.js

const {
  dialogflow,
  Suggestions,
  RegisterUpdate,
  UpdatePermission,
} = require('actions-on-google');

更新建議方塊

b2f84ff91b0e1396.png 在 index.js 檔案中，將 NOTIFICATIONS 項目新增至建議方塊標題清單，因此您的 Suggestion 定義如下所示：

index.js

// Suggestion chip titles
const Suggestion = {
  HOURS: 'Ask about hours',
  CLASSES: 'Learn about classes',
  DAILY: 'Send daily reminders',
  NOTIFICATIONS: 'Get notifications',
};

設定新的匯入作業

如要連線至 Firestore 資料庫，請新增 firebase-admin 套件，並為儲存在資料庫中的欄位新增常數。此外，請匯入 google-auth-library 和 request 套件，以便處理 Actions API 的驗證和要求。

b2f84ff91b0e1396.png 在 index.js 檔案中，將以下內容新增至您的匯入項目：

index.js

// Firebase admin import
const admin = require('firebase-admin');

// Initialize Firestore
admin.initializeApp();
const db = admin.firestore();

// Firestore constants
const FirestoreNames = {
 INTENT: 'intent',
 USER_ID: 'userId',
 USERS: 'users',
};

// Actions API authentication imports
const {auth} = require('google-auth-library');
const request = require('request');

設定課程取消通知的選項

b2f84ff91b0e1396.png 在 index.js 檔案中，替換下列程式碼：

index.js

// Class list intent handler
app.intent('Class List', (conv, {day}) => {
  if (!day) {
    day = DAYS[new Date().getDay()];
  }
  const classes =
  [...new Set(schedule.days[day].map((d) => `${d.name} at ${d.startTime}`))]
  .join(', ');
  let classesMessage = `On ${day} we offer the following classes: ${classes}. `;
  // If the user started the conversation from the context of a daily update,
  // the conv's arguments will contain an 'UPDATES' section.
  let engagement = conv.arguments.get('UPDATES');
  // Check the conv arguments to tailor the conversation based on the context.
  if (engagement) {
    classesMessage += `Hope to see you soon at Action Gym!`;
    conv.close(classesMessage);
  } else {
    classesMessage += `Would you like me to send you daily reminders of upcoming classes, or can I help you with anything else?`;
    conv.ask(classesMessage);
    if (conv.screen) {
      conv.ask(new Suggestions([Suggestion.DAILY, Suggestion.HOURS]));
    };
  };
});

：

index.js

// Class list intent handler
app.intent('Class List', (conv, {day}) => {
  if (!day) {
    day = DAYS[new Date().getDay()];
  }
  const classes =
  [...new Set(schedule.days[day].map((d) => `${d.name} at ${d.startTime}`))]
  .join(', ');
  let classesMessage = `On ${day} we offer the following classes: ${classes}. `;
  // If the user started the conversation from the context of a daily update,
  // the conv's arguments will contain an 'UPDATES' section.
  let engagement = conv.arguments.get('UPDATES');
  // Check the conv arguments to tailor the conversation based on the context.
  if (engagement) {
    classesMessage += `Hope to see you soon at Action Gym!`;
    conv.close(classesMessage);
  } else {
    classesMessage += `Would you like to receive daily reminders of upcoming classes, subscribe to notifications about cancelations, or can I help you with anything else?`;
    conv.ask(classesMessage);
    if (conv.screen) {
      conv.ask(new Suggestions([Suggestion.DAILY, Suggestion.NOTIFICATIONS,
Suggestion.HOURS]));
    };
  };
});

為新的意圖新增執行要求

當使用者表示想要訂閱推播通知時，請致電 UpdatePermission 協助者，要求取得使用者權限。如果成功，PERMISSION 引數就會加到 conv 物件的引數中，方便您用來檢查對話內容。

取得使用者的權限後，請從 conv 物件引數中擷取使用者 ID，並將該 ID 儲存在資料庫中。你稍後會將這個使用者 ID 傳送至 Actions API，以便 Google 助理判斷收到通知的對象。

最後，為輕觸的推播通知新增 Class Canceled 意圖的執行要求。在這個例子中，您的回應是預留位置字串，但在這個動作的正式版本中，您的通知指令碼可以提供關於取消課程的動態資訊。

b2f84ff91b0e1396.png 在 index.js 檔案中，新增下列程式碼：

index.js

// Call the User Information helper for permission to send push notifications
app.intent('Setup Push Notifications', (conv) => {
 conv.ask('Update permission for setting up push notifications');
 conv.ask(new UpdatePermission({intent: 'Class Canceled'}));
});

// Handle opt-in or rejection of push notifications
app.intent('Confirm Push Notifications', (conv) => {
 if (conv.arguments.get('PERMISSION')) {
   let userId = conv.arguments.get('UPDATES_USER_ID');
   if (!userId) {
     userId = conv.request.conversation.conversationId;
   }
   // Add the current conversation ID and the notification's
   // target intent to the Firestore database.
   return db.collection(FirestoreNames.USERS)
   .add({
     [FirestoreNames.INTENT]: 'Class Canceled',
     [FirestoreNames.USER_ID]: userId,
   })
   .then(() => {
     conv.ask(`Great, I'll notify you whenever there's a class cancelation. ` +
     'Can I help you with anything else?');
   });
 } else {
   conv.ask(`Okay, I won't send you notifications about class cancelations. ` +
     'Can I help you with anything else?');
 }
 if (conv.screen) {
    conv.ask(new Suggestions([Suggestion.CLASSES, Suggestion.HOURS]));
  }
});

// Intent triggered by tapping the push notification
app.intent('Class Canceled', (conv) => {
 conv.ask('Classname at classtime has been canceled.');
});

新增測試通知

如要傳送推播通知給使用者，請將 POST 要求傳送至含有 User-ID、通知標題和目標意圖的 Actions API。在此範例中，觸發測試通知的意圖將透過 Firestore 資料庫疊代，並向所有訂閱通知的使用者發送推播通知。

請注意，在這個例子中，您需要在傳送 Webhook 傳送時傳送推播通知的程式碼，並在對話中叫用測試意圖來觸發該程式碼。在您打算發布的動作中，推播通知程式碼必須和指令碼位於不同的指令碼中。

b2f84ff91b0e1396.png 在 index.js 檔案中，新增下列程式碼：

index.js

// Debug intent to trigger a test push notification
app.intent('Test Notification', (conv) => {
 // Use the Actions API to send a Google Assistant push notification.
 let client = auth.fromJSON(require('./service-account.json'));
 client.scopes = ['https://www.googleapis.com/auth/actions.fulfillment.conversation'];
 let notification = {
   userNotification: {
     title: 'Test Notification from Action Gym',
   },
   target: {},
 };
 client.authorize((err, tokens) => {
   if (err) {
     throw new Error(`Auth error: ${err}`);
   }
   // Iterate through Firestore and send push notifications to every user
   // who's currently opted in to canceled class notifications.
   db.collection(FirestoreNames.USERS)
       .where(FirestoreNames.INTENT, '==', 'Class Canceled')
       .get()
       .then((querySnapshot) => {
         querySnapshot.forEach((user) => {
           notification.target = {
             userId: user.get(FirestoreNames.USER_ID),
             intent: user.get(FirestoreNames.INTENT),
           };
           request.post('https://actions.googleapis.com/v2/conversations:send', {
             'auth': {
               'bearer': tokens.access_token,
             },
             'json': true,
             'body': {'customPushMessage': notification, 'isInSandbox': true},
           }, (err, httpResponse, body) => {
             if (err) {
               throw new Error(`API request error: ${err}`);
             }
             console.log(`${httpResponse.statusCode}: ` +
               `${httpResponse.statusMessage}`);
             console.log(JSON.stringify(body));
           });
         });
       })
       .catch((error) => {
         throw new Error(`Firestore query error: ${error}`);
       });
 });
 conv.ask('A notification has been sent to all subscribed users.');
});

測試推播通知

在終端機中，執行下列指令以將更新後的 Webhook 程式碼部署至 Firebase：

firebase deploy

如要測試動作模擬工具的通知，請按照下列步驟操作：

  1. 在動作主控台中，前往 [測試] 分頁。
  2. 在「輸入」欄位中輸入 Talk to my test app，然後按下 Enter 鍵。
  3. 輸入 Learn about classes 並按下 Enter 鍵。
  4. 輸入 Get notifications 並按下 Enter 鍵。
  5. 如果您尚未請動作來傳送推播通知，請輸入 yes 並按下 Enter 鍵。
  6. 輸入 yes 並按下 Enter 鍵。您的 Google 帳戶應訂閱此動作的推播通知。

3a8704bdc0bcbb17.png

  1. 輸入 no 並按下 Enter 鍵即可結束。
  2. 輸入「Talk to my test app」並按下 Enter 鍵即可開始新的對話。
  3. 輸入 Test notification 並按下 Enter 鍵。

634dfcb0be8dfdec.png

幾分鐘內，您應該會收到「Action Gym 測試通知」的「Google 助理」推播通知，只要輕觸這則通知，系統就會將您導向「動作取消」的「意圖」意圖。

33cbde513c10122e.png

5. 建立 Google 助理連結

到目前為止，我們已經討論了您可以導入哪些互動功能，好讓使用者持續回流使用你的動作，但這些功能主要是讓使用者發掘並使用您的動作。

你可以建立 Google 助理連結，將行動裝置使用者直接連結至你的「Google 助理」動作。由於「Google 助理」連結是標準超連結，因此您可以將連結加入網站或任何網路行銷資料 (例如網誌或社群媒體訊息) 中。

在這個步驟中，您將瞭解什麼是 Google 助理連結、如何為您的動作建立連結，以及如何將連結新增至簡易網站以進行測試。

這會如何吸引使用者？

第一次將使用者動作加入您的「動作」可能很困難，尤其是必須明確叫用「Google 助理」的「動作」。Google 助理連結可為使用者提供動作的直接連結，簡化操作程序。使用者在支援 Google 助理的裝置上追蹤 Google 助理連結時，系統會直接將使用者導向你的動作。當使用者在非行動裝置或其他不支援 Google 助理的裝置上開啟連結時，系統仍會將他們導向您的「動作目錄」清單 (如果已發布)，因此該連結仍可將您的動作行銷給這些使用者。

「Google 助理」連結是很實用的參與度工具，因此如果您計劃透過網站或社交媒體來宣傳「動作」，建議您建立這類連結。在製作並發布「Google 助理」連結之前，請注意以下幾點：

  • 動作發布後，Google 助理連結才會運作。專案處於草稿狀態時，這個連結只會在您的裝置上運作。而其他使用者則會在「動作」目錄中顯示 404 錯誤網頁。
  • 您可以讓使用者在發布或測試版環境中發布您的操作後，要求他們先發布「Google 助理」連結。請注意，只有參與 Alpha 或 Beta 版測試的使用者可以測試 Google 助理連結。
  • 請確保 Google 助理連結中的目的意圖，讓新使用者留下良好的第一印象。「歡迎」是「Google 助理」連結的預設目的地

請按照下列步驟建立歡迎意圖的 Google 助理連結：

  1. 在「動作」控制台中，按一下 [開發] 分頁標籤，然後選擇左側導覽列中的 [動作]。
  2. 按一下「動作」清單下方的 [actions.intent.MAIN]。
  3. 在「連結」部分底下，將 [您要為這項動作啟用網址] 切換選項。
  4. 設定描述動作的描述性連結標題。使用簡單好記的名稱，以標題形式來說明使用者能採取的動作。在這個範例中，請將「連結標題」設為 learn about Action Gym。
  5. 複製本頁底部的 HTML 程式碼片段，然後儲存起來以供日後使用。
  6. 按一下網頁頂端的 [儲存]。

55341b8102b71eab.png

部署測試網站

如要測試 Google 助理連結，您可以使用 Firebase 工具，在執行要求中部署測試網站。我們已經為這個範例建立了簡單的測試網站，您只需要新增「Google 助理」連結即可。

前往出貨記錄 (/user-engagement-codelab-nodejs/start/public/) 並在文字編輯器中開啟 index.html 檔案。

b2f84ff91b0e1396.png在 index.html 檔案中，將 Google 助理連結的 HTML 程式碼片段貼到內文元素。檔案最終會如下所示：

<body>
    <p>
     <a href="https://assistant.google.com/services/invoke/uid/000000efb5f2fd97">🅖 Ask my test app to learn about Action Gym
     </a>
    </p>
</body>

在終端機中，執行下列指令以將測試網站部署至 Firebase：

firebase deploy

部署指令執行完成後，請記下輸出內容中的「Hosting URL」(代管網址)。

b01e8d322fb5d623.png

使用行動裝置上的網路瀏覽器前往這個網址，應該就能在測試網站上看到 Google 助理連結。在行動裝置上按一下這個連結，即可前往「Google 助理」的「動作」功能。

599845d647f5b624.png

此外，您也可以嘗試透過電腦版瀏覽器前往「代管網址」，系統應該會將你導向「Google 助理目錄」的 404 網頁，這是因為「Google 助理」尚未發布你的動作。

6. 後續步驟

恭喜！

現在，你已經瞭解到開發動作時，使用者參與度的重要性，以及平台上提供哪些使用者互動功能，以及如何在「動作」中新增各項功能。

其他學習資源

請瀏覽下列資源，進一步瞭解使用者與你的動作互動的情形：

請在 Twitter 上追蹤我們的動態 @ActionsOnGoogle，隨時掌握最新公告，同時將 Tweet 張貼到 #AoGDevs 來分享您製作的精彩內容！

意見回饋問卷調查

離開前，請填寫這份表單，讓我們瞭解你的使用體驗！