透過適用於 Google 助理的動作吸引使用者

1. 總覽

Actions on Google 是一個開發人員平台，可讓您製作軟體來擴充 Google 助理 (Google 的虛擬個人助理) 的功能，在超過 10 億部裝置，包括智慧音箱、手機、汽車、電視和耳機等。使用者可藉由對話，讓 Google 助理完成各項事務，例如購買食品雜貨或預訂乘車。(如需可能的完整功能清單，請參閱動作目錄)。開發人員可以利用 Actions on Google，輕鬆建立及管理使用者和第三方服務之間令人愉快且高效的對話體驗。

此為進階程式碼研究室模組，適合已具備建構 Google 助理動作經驗的讀者。如果您未曾使用過 Actions on Google 開發經驗，強烈建議您根據我們的入門程式碼研究室 ( 第 1 級、第 2 級和第 3 級) 熟悉這個平台。這些進階單元將引導你完成一系列功能，協助你擴充動作功能並吸引更多目標對象。

評估「動作」是否成功的重要方法之一，就是使用者參與度，也就是「動作」在初次互動後吸引使用者回訪的成效。為了方便起見，您可以在「動作」中實作多項功能，提供使用者返回對話的路徑。

本程式碼研究室會說明 Actions on Google 的使用者參與度功能和最佳做法。

a3fc0061bd01a75.png 961ef6e27dc73da2.png

建構項目

如要強化已建構的功能，請啟用該功能：

  • 傳送每日最新動態，讓使用者輕觸即可下達動作
  • 將連結至動作的推播通知傳送給使用者
  • 建立連結，引導使用者透過行動網路瀏覽器前往動作

課程內容

  • 什麼是使用者參與度，為何此動作是動作成功的關鍵
  • 如何修改動作來提高使用者參與度
  • 要在不同類型的「動作」中使用哪些使用者參與度功能
  • 如何使用 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」的虛構健身房，此動作提供健身房的相關資訊，包括每天旋轉的課程清單。這類資訊豐富的動作適合所有使用者參與功能，因為旋轉的類別清單每天都會提供不同的實用資訊。

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

e2d6e4ad98948cf3.png

您可以稍微修改對話方塊，讓對話方塊更貼近您加入的互動功能。不過，對話的一般設計不會大幅改變。

下載基礎檔案

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

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

設定專案和代理程式

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

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

部署執行要求

現在您的 Actions 專案和 Dialogflow 代理程式已準備就緒，請使用 Firebase Functions CLI 部署本機 index.js 檔案。

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

firebase use <PROJECT_ID>

npm install

firebase deploy

幾分鐘後，畫面會顯示「Deploy complete!」，這表示你已成功將 Webhook 部署至 Firebase。

擷取部署作業網址

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

  1. 開啟 Firebase 控制台。
  2. 從選項清單中選取 Actions 專案。
  3. 依序前往「開發」>「開發工具」左側導覽列中的函式。如果系統提示您「選擇資料共用設定」，可以按一下「稍後再進行」，忽略這個選項。
  4. 「Dashboard」(資訊主頁) 分頁標籤下方應該會顯示「執行要求」項目在「觸發條件」下方輸入網址儲存這個網址；在下一節中，您必須將其複製到 Dialogflow。

1741a329947975db.png

在 Dialogflow 中設定 Webhook 網址

現在您需要更新 Dialogflow 代理程式，才能將 Webhook 用於執行要求。步驟如下：

  1. 開啟 Dialogflow 主控台 (您可以視需要關閉 Firebase 控制台)。
  2. 按一下左側導覽列中的「Fulfillment」。
  3. 啟用 Webhook。
  4. 如果複製的網址並未顯示，請貼上您從 Firebase 資訊主頁複製的網址。
  5. 按一下 [儲存]。

確認專案設定正確無誤

使用者應該要能叫用您的動作，以取得動作 Gym 相關資訊，包括以硬式編碼的方式寫入營業時間的文字回應，以及列出一週內每天課程時間表的文字回覆。

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

  1. 在 Dialogflow 控制台的左側導覽面板中，按一下「Integrations」(整合) >Google 助理。
  2. 確認「自動預覽變更」已啟用，然後按一下「測試」，即可更新 Actions 專案。
  3. 動作模擬工具會載入動作專案。如要測試動作，請在「Input」欄位中輸入 Talk to my test app，然後按下 Enter 鍵。
  4. 您應該會看到歡迎行動健身房的回覆。請嘗試按照提示繼續對話，同時確保執行要求的每個輸入內容都有回應。

60acf1ff87b1a87f.png

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

吸引使用者的常見方式，是提供使用者最有用的資訊。方法是為使用者提供意圖的「每日更新」訂閱選項，系統會傳送 Google 助理通知，直接連結至該意圖的執行要求。

在這個步驟中，您將瞭解每日更新訂閱項目，並將這類訂閱項目加入動作的「類別清單」意圖中。按照以上說明操作後，動作的對話會如下圖所示：

f48891c8118f7436.png

如何吸引使用者？

智慧型手機使用者可能也很熟悉推播通知，這類通知可提供應用程式專屬的資訊和更新。每日更新訂閱能讓使用者透過 Google 助理以外的行動裝置輕鬆存取使用者，前提是您要傳送更新的意圖必須持續每天為使用者帶來價值。

每日更新是相當實用的參與度工具，但不一定每個動作都會納入。決定是否要在動作中加入每日更新訂閱時，請考慮以下提示：

  • 請確保每天更新時，使用者會每天看到不同的實用資訊。如果輕觸每日更新後，每次都會看到相同的提示，使用者可能在幾天後取消訂閱。
  • 如果使用者直接跳到每日更新的意圖，請確保對話方塊對使用者來說具有意義。使用者不一定是從對話開始，因此應該提供充分的來龍去脈。
  • 請先讓使用者瞭解動作的優點，再提示他們訂閱每日最新消息。使用者應思考「我希望每天都能看到這項內容」讀者可以選擇訂閱
  • 別以重複建議訂閱就讓使用者感到疲乏。在使用者看到訂閱的內容後，立即提供每日更新訂閱項目，避免在其他地方陷入他們。
  • 觸發更新意圖後，對話應保持簡短。大部分的每日更新都只能包含一則回應，使用者無須輸入內容即可關閉。

開啟每日最新動態

您可以將每日更新訂閱項目新增至歡迎意圖，使用者會在對話開始時進行此意圖，而您可以加入更具體的意圖，將使用者深層連結到對話中的某處。在本程式碼研究室中，「Class List」意圖最為合理，因為對話方塊每天都會變更，而使用者會發現這項意圖非常實用，建議掌握有哪些類別可用。

如要為「Class List」意圖啟用每日更新，請按照下列步驟操作：

  1. 在動作控制台中，按一下「開發」分頁標籤，然後選擇左側導覽列中的「動作」。
  2. 按一下「動作」清單下方的「課程清單」。
  3. 在「使用者參與度」部分下方，切換「要向使用者提供每日最新動態」選項。
  4. 設定一個能描述每日更新內容的描述性內容標題。系統會在「你希望我什麼時候傳送每日<內容標題>」資訊提供，因此在你朗讀時，請確保標題兼具敘述性和正確性。在這個範例中，請將「內容標題」設為 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 this intent」選項。
  2. 按一下頁面頂端的「儲存」。

5c70faa02151da0.png

處理使用者的決定

  1. 設定新意圖，以處理使用者對每日更新訂閱提示的回應。在左側導覽列中，按一下「Intents」(意圖) 旁的「+」按鈕建立新意圖。
  2. 將這個新意圖命名為 Confirm Updates。
  3. 在「事件」部分下方，新增 actions_intent_REGISTER_UPDATE。使用者完成每日更新訂閱流程後，不論最後是否完成訂閱，都會觸發這個 Dialogflow 事件。
  4. 在「Fulfillment」區段下方，切換「Enable Webhook call for this intent」選項。
  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. 在「Input」欄位中輸入 Talk to my test app，然後按下 Enter 鍵。
  3. 輸入 Learn about classes，然後按下 Enter 鍵。動作的回應現在應可傳送每日提醒。
  4. 輸入 Send daily reminders，然後按下 Enter 鍵。
  5. 輸入你想查看更新的時間，然後按下 Enter 鍵。為了進行測試，請試著在 3 到 5 分鐘內回應。

83a15ecac8c71787.png

使用行動裝置時，你應該會在指定更新時間左右收到 Google 助理的通知。請注意，這則通知可能需要幾分鐘才會顯示。輕觸通知，通知就會透過深層連結直接導向 Google 助理的「Class List」意圖，畫面上會列出近期課程：

8582482eafc67d5b.png

4. 新增推播通知

您也可以呼叫 Actions API 向使用者傳送推播通知，藉此與動作以外的使用者互動。有別於每日最新動態，Google 助理不會自動安排這些通知，你可以主動傳送這類通知。

在這個步驟中，您將學習如何在動作中實作推播通知，方法是新增「已取消課程」意圖，並向使用者傳送通知，說明課程取消事宜。此外，您還會設定傳送通知所需的以下三個元件：

  • Actions API 帳戶 - 您傳送 POST 要求至 API 來傳送通知給使用者，因此請設定服務帳戶和憑證，以便透過這個 API 介面。
  • 權限輔助程式：您必須取得使用者授權，才能存取傳送推播通知所需的使用者 ID。在本範例中，您將使用用戶端程式庫函式呼叫權限輔助程式，並要求這個 ID。
  • 儲存空間：如要將推播通知傳送給對話以外的使用者，請將使用者 ID 儲存在可以自行回收的位置。在這個範例中，您將設定 Firestore 資料庫來儲存每位使用者的資訊。

按照這些說明操作後，您會將下列對話方塊新增到動作的對話中：

7c9d4b633c547823.png

如何吸引使用者？

智慧型手機使用者可能也很熟悉推播通知，這類通知可提供應用程式專屬的資訊和更新。使用者有充分理由啟用推播通知後，就能透過推播通知使用行動裝置以外的方式，透過 Google 助理以外的裝置存取使用者。透過這項每日更新，使用者應該就會意識到自己每天都會收到通知。但透過推播通知，使用者不知道自己是否選擇接收不常用的通知，還是每天只會看到多則通知。

推播通知是很實用的互動工具，但不一定是每個「動作」中的一部分。決定是否要在動作中加入推播通知時，請考慮以下幾點：

  • 規劃推播通知的時間表範例。如果您預計每天只傳送一則推播通知，請考慮改用每日更新。
  • 確保您的推播通知每次能收到訊息時都提供實用資訊。您的通知也可以深層連結至您的其中一個動作意圖，因此請確保意圖實用且相關。
  • 要求使用者訂閱推播通知時，務必明確表示。他們應該瞭解收到推播通知後的狀況，以及傳送通知的頻率。

啟用 Actions API

  1. 開啟 Google Cloud 控制台，然後在下拉式選單中選取 Actions 專案名稱。

d015c1515b99e3db.png

  1. 在導覽選單 (☰) 中，前往 API 與服務 >媒體庫。
  2. 搜尋「Actions API」，然後按一下「啟用」。

6d464f49c88e70b4.png

建立服務帳戶

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

  1. 在 Google Cloud 控制台的導覽選單 (☰) 中，前往 API 與服務 >憑證。
  2. 按一下「Create credentials」(建立憑證) >服務帳戶金鑰。
  3. 在「服務帳戶」下拉式選單中，選取「新增服務帳戶」。
  4. 填寫下列資訊：
  • 服務帳戶名稱：service-account
  • 角色：專案 >擁有者
  • 服務帳戶 ID： service-account (後方一律加上 @<project_id>.iam.gserviceaccount.com)
  • 金鑰類型：JSON
  1. 按一下「建立」。
  2. 將下載的 JSON 檔案移至專案的 /user-engagement-codelab/start/functions/ 目錄。
  3. 將 JSON 檔案重新命名為 service-account.json。

d9bd79d35691de3a.png

啟用 Firestore

如要在對話以外的地方傳送通知，就必須設法儲存可從通知代碼參照的使用者 ID。在這個範例中，我們使用 Firestore 資料庫來儲存已訂閱使用者的使用者 ID。

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

  1. 在 Firebase 控制台，選取動作專案名稱。
  2. 在左側導覽面板中，依序點選「開發」>「開發」「Database」(資料庫)，然後按一下「Create database」(建立資料庫)。
  3. 選取「以測試模式啟動」。
  4. 按一下「啟用」。

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 this intent」選項。
  2. 按一下頁面頂端的「儲存」。

3d99bc41d0492552.png

處理使用者的決定

  1. 設定新意圖，以處理使用者對推播通知訂閱提示的回應。在左側導覽列中，按一下「Intents」(意圖) 旁的「+」按鈕建立新意圖。
  2. 將這個新意圖命名為 Confirm Push Notifications。
  3. 在「事件」部分下方，新增 actions_intent_PERMISSION。使用者完成推播通知訂閱流程後，不論是否完成訂閱，都會觸發這個 Dialogflow 事件。
  4. 在「Fulfillment」區段下方，切換「Enable Webhook call for this intent」選項。
  5. 按一下頁面頂端的「儲存」。

d37f550c5e07cb73.png

處理推播通知

您可以將推播通知連結至特定意圖，這樣輕觸推播通知的使用者就會直接連結到動作中的該意圖。在這個範例中，新增推播通知的意圖，提供已取消的類別的詳細資料。

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

  1. 在 Dialogflow 控制台的左側導覽面板中，按一下「Intents」(意圖) 旁的「+」按鈕建立新意圖。
  2. 將這個新意圖命名為 Class Canceled。
  3. 在「訓練詞組」區段下方，將 Cancelations 新增為使用者運算式。
  4. 在「Fulfillment」區段下方，切換「Enable Webhook call for this intent」選項。
  5. 按一下頁面頂端的「儲存」。

940379556f559631.png

在對話中傳送測試通知

在實際工作環境中，您應將指令碼與傳送推播通知的動作執行要求程式碼分開。在此範例中，您可以建立可叫用來傳送推播通知的意圖，同時與動作對話。這項意圖僅適用於偵錯用途；實際上，發送通知不應由執行要求處理，也不應在動作對話中觸發。

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

  1. 為了進行測試及偵錯，請設定新意圖，以便將推播通知傳送給訂閱的使用者。在 Dialogflow 控制台的左側導覽面板中，按一下「Intents」(意圖) 旁的「+」按鈕建立新意圖。
  2. 將這個新意圖命名為 Test Notification。
  3. 在「訓練詞組」區段下方，將 Test notification 新增為使用者運算式。
  4. 在「Fulfillment」區段下方，切換「Enable Webhook call for this intent」選項。
  5. 按一下頁面頂端的「儲存」。

6967f5a997643eb8.png

啟用推播通知

請按照下列步驟，為「ClassCanceled」意圖啟用推播通知：

  1. 在 Dialogflow 控制台中，前往導覽列的「Integrations」(整合)。
  2. 在「Google 助理」資訊卡中，按一下「整合設定」。
  3. 將「ClassCanceled」新增為「隱含叫用」意圖。您必須執行這個步驟，Dialogflow 才能辨識使用者是否能輕觸推播通知來透過「Class 取消」意圖展開對話。
  4. 按一下「關閉」。

1ac725231ed279a1.png

  1. 在動作控制台中，按一下「開發」分頁標籤，然後選擇左側導覽列中的「動作」。
  2. 按一下「動作」清單下方的「課程已取消」。
  3. 在「使用者參與度」部分下方，切換「要傳送推播通知嗎？」選項。
  4. 設定描述推播通知的描述性內容標題。系統會在畫面上顯示「如果我傳送 <內容標題> 的推播通知嗎？」，因此請確保系統朗讀時的標題敘述正確且正確。在這個範例中，請將「內容標題」設為 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 傳送至 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.');
});

新增測試通知

如要將推播通知傳送給使用者，請將含有使用者 ID、通知標題和目標意圖的 POST 要求傳送至 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. 在「Input」欄位中輸入 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 助理連結前，請注意下列提示：

  • 動作發布後，Google 助理連結才會生效。專案處於草稿狀態時，你只能在自己的裝置上使用連結。系統會將所有使用者導向「動作」目錄中的 404 頁面。
  • 您可以在 Alpha 或 Beta 版環境中發布您的動作，讓使用者在發布前測試 Google 助理連結。請注意，只有參與 Alpha 或 Beta 版測試的使用者才能測試您的 Google 助理連結。
  • 請確保 Google 助理連結的到達網頁意圖能讓新使用者留下良好的第一印象。您的歡迎意圖是 Google 助理連結的預設目的地，因為這個意圖應該已經適合導入動作功能

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

  1. 在動作控制台中，按一下「開發」分頁標籤，然後選擇左側導覽列中的「動作」。
  2. 按一下「動作」actions.intent.MAIN清單下方的「actions.intent.MAIN」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 元素中。這個檔案的結尾應如下所示：

index.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 網頁，因為你的動作並未發布。

6. 後續步驟

恭喜！

現在您已瞭解開發動作的重要性、這個平台提供哪些使用者參與度功能，以及如何在動作中加入每項功能。

其他學習資源

請參閱下列資源，進一步瞭解動作的使用者參與度：

在 Twitter 上追蹤 @ActionsOnGoogle，以隨時掌握最新公告，並透過 Twitter 發文給 #AoGDevs 分享你的成果！

意見回饋問卷調查

在你離開之前，請填寫這份表單，讓我們知道你的表現如何！