iT邦幫忙

2021 iThome 鐵人賽

DAY 5
1

來到了第五天,關於寄信可以進入比較進階的操作。但一樣先講結論,如果你很急著用,可以直接使用這份 Add-On: Form Notification,這是 Google Cloud 官方開發的 Add-On,可信度很高。自己寫的好處是,如果你突然想要寄送像是網頁般的內容(HTML-Based)的內容的話,你可以知道怎麼做。讓我們開始吧!

提醒:本篇需要一點點的 HTML 知識,一樣是你大概有刷過 W3C 的應該就還可。


今天的目標

今天學妹問你說,「先輩,我們新活動能不能在報名時,就依據他的意願,給他不同的客製化回答呀?」身為一個工具師,當然義不容辭地試試。今天的關鍵問題是...

「如何依據 Google 表單的回應客製化回應信件?」

網路上流傳的一種解法 是可行但相對,但有沒有另外比較靠(厲)譜(害)的寫法?也就因此有了這篇。


如何依據 Google 表單的回應客製化回應信件?

假設我們今天想要「依據使用者回應的交通方式,給予不同的交通方式說明」。這次希望加上簡單的 HTML 的運用。

Step 1 開啟 Google 表單,並從回應的連結中串起 GAS

好,今天我們開一個新的 Google 表單,並將其回應連結到 GAS。

一樣執行時會有「需要驗證」出現,讓我借用一下 D2 的影片。

Step 2 取得 Google Sheet 裡面的回應資料並準備寄信

那這邊,就會需要跟 D4 一樣,讀取回應,假設我們今天收到這樣的回應們。

因為跟 D4 差不多,主要是設定範圍並取得資料,這邊我們就加速帶過。

function readData() {
  let sheet = SpreadsheetApp.getActiveSheet();
  let startRow = 2;
  let startCol = 2;
  let numRows = 5;
  let numCols = 2;
  let dataRange = sheet.getRange(startRow, startCol, numRows, numCols);
  let data = dataRange.getValues();
  
  return data
}

function sendEmails() {
  let data = readData();
  for (let i in data) {
    let row = data[i];
    let emailAddress = row[0];
    let subject = "Hello";
    let message = "Content";
    MailApp.sendEmail(emailAddress, subject, message);
  }
}

這樣在執行時,就會對表單中的收信者,寄出一封名為 "Hello" 的信件。

Step 3 設定客製化的內容

學妹希望針對自行開車的,給予開車路線;也希望針對大眾運輸的,給予大眾運輸的路線,兩個我們都用圖片(網址)來給予。先簡單做了個示意圖,汽車和捷運的網址分別是 https://i.imgur.com/m9zCXUV.pnghttps://i.imgur.com/h5kT4Fm.png 。之後我們再聊怎麼樣寄出 Google Drive 裡面的檔案。

那設定方式就可以是簡單弄一個 function 來達到,進階班的朋友也可以用三元運算子(Conditional Operator)來寫這段。

function customContent(commute_way){
  if(commute_way == "大眾運輸"){
    return "大眾運輸請參考: https://i.imgur.com/h5kT4Fm.png";
  }else if (commute_way == "自行開車"){
    return "開車請參考: https://i.imgur.com/m9zCXUV.png";
  }
}

function sendEmails() {
  let data = readData();
  for (let i in data) {
    let row = data[i];
    let emailAddress = row[0];
    let subject = "Subject";
    let message = customContent(row[1]);
    Logger.log(emailAddress +" "+ message);
    // MailApp.sendEmail(emailAddress, subject, message);
  }
}

然後 Print 一下看有沒有給予不同的內容。確定都有跟表單上一樣,開車給開車的,捷運給捷運的,沒問題後就進到下一階段。

Step 3-1 用 createHtmlOutput 寄出可以直接讀取的信件

好,那如果不想還要點連結,除了作為附件(之後會教)外,還有什麼其他的方式?在 GAS 當中,我們是透過用信件送出 HTML 的,收信人預計會收到一個簡單的 HTML 檔案長這樣——

一樣,我們看程式碼。

function customContent(commute_way){
  if(commute_way == "大眾運輸"){
    return HtmlService.createHtmlOutput('<span>請參考地圖移動:\
                                               <img src="https://i.imgur.com/h5kT4Fm.png" \
                                                alt="大眾運輸地圖"> \
                                        </span>');
  }else if (commute_way == "自行開車"){
    return HtmlService.createHtmlOutput('<span>請參考地圖移動:\
                                               <img src="https://i.imgur.com/m9zCXUV.png" \
                                                alt="自行開車地圖"> \
                                        </span>');
  }
}

function sendEmails() {
  let data = readData();
  for (let i in data) {
    let row = data[i];
    let emailAddress = row[0];
    let subject = "Subject";
    let message = customContent(row[1]);
    MailApp.sendEmail({
      to: emailAddress,
      subject: subject,
      htmlBody: message.getContent()
  });
  }
}

基本上是直接在 HtmlService.createHtmlOutput() 中寫上你的簡易 HTML 程式碼。並在 MailApp.sendEmail 寄送的部分使用 htmlBody 來送出,記得要在內容的部分加用 getContent() 。這是針對簡易版的 HTML,就幾行而已的那種。

但如果是複雜版的,可能有動畫、大小差異的,又要怎麼處理?此時就要透過 createTemplateFromFile 了。

Step 3-2 用 createTemplateFromFile() 寄出可以直接讀取的信件

要使用 createTemplateFromFile(),那我們就會需要 template HTML,而 GAS 裡面是可以做到直接創建的。在檔案的 + 上按下新增並輸入想要的名字。在程式碼的部分,再透過 HtmlService.createTemplateFromFile('mrt') 來呼叫。記得不用再加上 .html,純粹呼叫 mrt 即可。

完整的程式碼在這——

function customContent(commute_way){
  if(commute_way == "大眾運輸"){
    return HtmlService.createTemplateFromFile('mrt')
  }else if (commute_way == "自行開車"){
    return HtmlService.createTemplateFromFile('driving')
  }
}

function sendEmails() {
  let data = readData();
  for (let i in data) {
    let row = data[i];
    let emailAddress = row[0];
    let subject = "Subject";
    let message = customContent(row[1]);
    MailApp.sendEmail({
      to: emailAddress,
      subject: "Your application is approved!",
      htmlBody: message.evaluate().getContent()
    });
  }
}

最後功能會如下的運作, 這邊用 Step 3-2 的方式示範,但 Step 3-1 的 Code 也有試過,都行。

透過在 GAS 中創建 HTML File,將其用 HtmlService.createTemplateFromFile 引用為 Template,再在 MailApp.sendEmail({htmlBody}) 中讀取。這邊要注意的是,和 createHtmlOutput 相比,這邊的內容在寄出之前,是使用 message.evaluate().getContent() 這之後再跟大家說明細節。

如果希望在不同時間觸發,可以搭配 D3 的 Trigger,或是想要打包成按鈕、UI,則可以透過 D2 的打包說明。之後會跟大家說明如何將回應整合進 Google Calendar,並再更之後會說明如何即時的在有人回應表單時,就即時回傳客製化的內容。


好,那今天我們知道了要怎麼樣:

  1. 單次性針對 Google 表單的結果創建客製化的回應
  2. 客製化的回應中,寄送 HTML 的信件。
  3. 透過 createTemplateFromFilecreateTemplateFromFile 加入簡單與複雜的 HTML 檔案。

好,那今天就是我們的 D5,原本預計今天要說「依據表單結果客製化回應說有沒有報名成功」,但發現篇幅有點多(五千六百多字了囧),所以會拉到之後講。明天 D6 會繼續介紹怎麼將「表單中的回應」丟到「Google Calendar」當中。的方式,如果不想錯過可以訂閱按讚小鈴鐺(?),也歡迎留言跟我說你還想知道什麼做法/主題。如果有執行上的疑問,透過留言之外,也可以到 Facebook Group,想成立了幾年,感謝這次鐵人賽才真的實踐,歡迎來當 Founding Member。我們明天見。


上一篇
D4- 如何透過 Google Apps Script 來整合 Google Form / Google Sheet 並自動寄出客製的 Email?
下一篇
D6 - 如何用 Google Apps Script 將 Google 表單收到的時間同步在 Google Calendar 上?
系列文
整合 Google 服務的燃料——透過 Google Apps Script (GAS) 加速你的工作速度30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言