メインコンテンツへスキップ
Kameleoon でウィジェットの回答を収集し CSV にエクスポートしたい場合は、こちら の記事を参照してください。
本記事では、次のことを学びます。
  • サーベイデータを受け取るための Google Sheet の構成方法。
  • 回答を Google Sheets に送信するための Widget Studio の Survey Settings タブの設定方法。

​
Google Sheet を構成する

  1. Google Sheets にアクセスして新しいスプレッドシートを作成します。
  2. タブの名前を Sheet 1(デフォルト)にします。
  3. 最初の行に次のように列を定義します。
詳細:
  • 列 A > Date と入力します。このセルは、各送信時の日時で自動的に入力されます。
  • 列 B 以降 > ウィジェットに追加された各サーベイまたはフォーム要素の名前を入力します。
要素の名前は、Design セクションの Content タブにある要素ツリーで確認できます。
要素(例: スケール)を選択すると、編集サイドバーの上部にその名前が表示されます。
このウィジェットを例にしてみましょう。
このウィジェットには 2 つのサーベイ要素があります。したがって、Google Sheet の最初の行には次を入力する必要があります。
  • 列 A: Date
  • 列 B: Scale
  • 列 C: Long Answer
  1. Google App Script を追加します。
  • Extensions > App Script をクリックします。新しい Google Script が開きます。名前を変更します(例: My form data)。
  • すべてのコードを以下のものに置き換えます。
const sheetName = 'Sheet1'
  const scriptProp = PropertiesService.getScriptProperties()
  function initialSetup () {
    const activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
    scriptProp.setProperty('key', activeSpreadsheet.getId())
  }
  function doPost (e) {
    const lock = LockService.getScriptLock()
    lock.tryLock(10000)
  try {
      const doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
      const sheet = doc.getSheetByName(sheetName)
  const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
  const nextRow = sheet.getLastRow() + 1
  const newRow = headers.map(function(header) {
  return header === 'Date' ? new Date() : e.parameter[header]})
   sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])
   return ContentService   .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))   .setMimeType(ContentService.MimeType.JSON)
  }
  catch (e) {
      return ContentService
        .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
        .setMimeType(ContentService.MimeType.JSON)
    }
  finally {
      lock.releaseLock()
    }
  }
何らかの理由でタブに「Sheet 1」と名前を付けられない場合は、スクリプトの最初の行を変更し、「Sheet 1」を実際のタブ名に置き換えてください。
完了すると、スクリプトは次のようになります。
  1. Save project to Drive をクリックします(Run の左側)。
  2. Debug の右側のドロップダウンで initialSetup を選択します(デフォルトで選択されているはずです)。
  3. Run をクリックします。
権限を求めるポップインが表示される場合があります。Review permission をクリックして次の画面に進みます。 Google がスクリプトをレビューしていないため、警告メッセージが表示される場合があります。フォームを更新するための適切な権限を設定するには、Go to Mailing List (unsafe) をクリックします。
スクリプトに正しい権限が与えられると、スクリプトエディタコンソールに次の出力が表示されるはずです。
左メニューで Triggers をクリックしてスクリプトのトリガーを追加します。
次に、Add trigger をクリックします。 表示されるウィンドウで、次のオプションを選択します。
  • Choose which function to run: doPost
  • Choose which deployment should run: Head
  • Select event source: From spreadsheet
  • Select event type: On form submit
Save をクリックします。 Deploy > New deployment をクリックします。
Select type の横の 歯車 アイコン > Web app をクリックします。 表示されるフォームで、次のオプションを選択します。
  • Description: My Form Data(任意の名前で構いません。説明的なものにしてください)。
  • Web app > Execute as: Me
  • Web app > Who has access: Anyone
Deploy をクリックします。
結果の正しい送信のために、Who has access: Anyone は必須です。
URL をコピーします。

​
Widget Studio で Survey Settings を構成する

  1. Survey Settings タブで、ユーザーが回答を送信するためにクリックするボタンを選択します。
  2. How are responses collected? で、HTTP Request (external) を選択します。
    • Request Name: リクエストに名前を付けます(例: Send data to my Google Sheet)。
    • Method: POST を選択します。
    • Action URL: Google Apps Script で生成された URL を貼り付けます。
  3. 構成を保存します。

​
設定をテストする

  1. ウィジェットを Preview します。
  2. サーベイに記入して Submit します。
  3. Google Sheet に戻ります。
応答を含む新しい行が表示されるはずです。