GUIDES

GUIDES

GUIDES

설문 폼 웹훅 가이드라인

설문 폼 웹훅 가이드라인

설문 폼 웹훅 가이드라인

August 31, 2023

August 31, 2023

August 31, 2023

기존 app.walla.my 에서는 아직 기능을 제공하고 있지 않습니다. 
오픈베타인 app.wallaform.com 이용하셔야 하는 유의하여 주시기 바랍니다

  1. 구글 시트 생성

1-a. 새로 만드는 경우

Google Drive에 접속하여 새로운 구글 시트를 생성

1-b. 왈라에 이미 구글시트를 연동해서 사용하고 있으나, 내보내기 후 연동하는 경우

이미 사용 중인 구글 시트를 선택하여 사본 만들기

사본이 만들어졌다면, 사본에서부터 2 작업 수행

기존 구성되었던 구글 시트를 삭제하고 싶다면,

구글 시트 연동 우측에 있는 토글 클릭

구글 시트 삭제 매시지와 함께 토글이 OFF로 설정된 것 확인


  1. Google Apps Script 설정

  1. 구글 시트에서 상단 메뉴 "확장 프로그램" > "Apps Script"을 선택합니다.

  1. 나타나는 코드 편집기에서 기존 코드를 삭제하고, 아래의 코드를 붙여넣습니다.

function doPost(e) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheets()[0];
  ss.setSpreadsheetTimeZone('Asia/Seoul');
  // Parsing the POST data to get the required data
  var data = JSON.parse(e.postData.contents);
  
  var formAnswers = data.form_answers;
  var submittedAt = new Date(data.form_response.submitted_at);

  var responseId = data.form_response.response_id.slice(0,10);
  // First row: labels
  if (sheet.getLastRow() === 0) {
    var fieldLabels = formAnswers.map(function(answer) {
      if (answer.type === 'RADIO_GRID' || answer.type === 'CHECKBOX_GRID') {
        return answer.response.map(el => `${answer.label} - ${el.lineLabel}`);
      }
      return answer.label
    }).flat();
    var headers = ['Response ID', 'Time Submitted', ...fieldLabels]
    sheet.appendRow(headers);
  } 
   var rowData = formAnswers.map(field => {
      switch (field.type) {
        case 'CHECKBOX':
        case 'RADIO': {
          var isResponseArray = Array.isArray(field.response);
          if (isResponseArray) {
            return field.response.filter(el => Boolean(el)).join(', ');
          }
          return field.response || '';
        }
        case 'CHECKBOX_GRID':
        case 'RADIO_GRID': {
          var isLineResponseArray = Array.isArray(field.response.lineResponse)
          return field.response.map(el => {
            if (isLineResponseArray) {
              return el.lineResponse.filter(el => Boolean(el)).join(', ');
            }
            return el.lineResponse || '';
          })
        }
        case 'GEOLOCATION': {
          var response = field.response || {};
          var responseArray = Object.entries(response).map(el => `${el[0]}: ${el[1]}`);
          return responseArray.join(', ');
        }
        case 'HIDDEN': {
          return field.response === undefined || field.response === null
            ? ''
            : field.response;
        }
        default: {
          var response =
            field.response === undefined || field.response === null ? '' : field.response;
          if (Array.isArray(response)) {
            return response.join(', ');
          }
          return response;
        }
      }
    }).flat();
  sheet.appendRow([responseId, submittedAt, ...rowData]);
  return ContentService.createTextOutput(JSON.stringify({result: "success"})).setMimeType(ContentService.MimeType.JSON);
}
  1. 웹 앱으로 배포

  1. 코드 편집기 상단 메뉴에서 "배포" > "새배포"를 선택합니다.

  1. 설정 버튼을 누른 뒤, "웹 앱"을 선택합니다.

3.이름(예시: test1)을 자유롭게 지어주시고, 액세스 권한이 있는 사용자는 꼭 ‘모두’ 로 설정해주시기 바랍니다.

🤨 액세스 권한… 모두라구요…?
🙂 해당 코드에는 원본데이터를 읽거나 내보내는 코드가 포함되어있지 않습니다.
왈라와 Typeform의 웹훅 요청에 맞게, 데이터를 구글 시트에 쓰는 작업 만을 포함합니다.

따라서, 해당 웹앱의 주소가 노출되더라도, 데이터가 유출될 걱정은 없으며,
만약 노출된다면 새로운 배포를 통해 새로운 주소를 받으실 있습니다

4.마지막으로 배포를 클릭하면 "액세스 승인" 버튼 등장

5. 클릭하여 액세스 승인을 진행

6.구글 시트를 만든 본인의 계정을 클릭하여 진행

7.왼쪽 하단의 'advanced' 클릭하여 하단의 unsafe 버전으로 진행

  1. 웹 앱의 URL 복사

배포 후 나타나는 웹 앱 URL을 복사합니다.

  1. 왈라폼 (Webhook)에 연동

  1. 왈라폼 페이지에 접속하고, 연동하려는 프로젝트를 선택합니다.

  2. [연동하기] 페이지에서 새 웹훅 추가 버튼 클릭

  1. 이름은 자유롭게 작성 후, 아까 복사한 웹 앱의 URL을 붙여넣기

  1. 현재 웹훅은 테스트요청을 제공하지 않기에 웹훅 저장 후 연동으로 돌아갑니다.

테스트 및 확인

왈라폼에서 해당 프로젝트의 응답을 제출해보면, 웹훅을 통해 데이터가 구글 시트로 전송되는 것을 확인할 수 있습니다.

기존 app.walla.my 에서는 아직 기능을 제공하고 있지 않습니다. 
오픈베타인 app.wallaform.com 이용하셔야 하는 유의하여 주시기 바랍니다

  1. 구글 시트 생성

1-a. 새로 만드는 경우

Google Drive에 접속하여 새로운 구글 시트를 생성

1-b. 왈라에 이미 구글시트를 연동해서 사용하고 있으나, 내보내기 후 연동하는 경우

이미 사용 중인 구글 시트를 선택하여 사본 만들기

사본이 만들어졌다면, 사본에서부터 2 작업 수행

기존 구성되었던 구글 시트를 삭제하고 싶다면,

구글 시트 연동 우측에 있는 토글 클릭

구글 시트 삭제 매시지와 함께 토글이 OFF로 설정된 것 확인


  1. Google Apps Script 설정

  1. 구글 시트에서 상단 메뉴 "확장 프로그램" > "Apps Script"을 선택합니다.

  1. 나타나는 코드 편집기에서 기존 코드를 삭제하고, 아래의 코드를 붙여넣습니다.

function doPost(e) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheets()[0];
  ss.setSpreadsheetTimeZone('Asia/Seoul');
  // Parsing the POST data to get the required data
  var data = JSON.parse(e.postData.contents);
  
  var formAnswers = data.form_answers;
  var submittedAt = new Date(data.form_response.submitted_at);

  var responseId = data.form_response.response_id.slice(0,10);
  // First row: labels
  if (sheet.getLastRow() === 0) {
    var fieldLabels = formAnswers.map(function(answer) {
      if (answer.type === 'RADIO_GRID' || answer.type === 'CHECKBOX_GRID') {
        return answer.response.map(el => `${answer.label} - ${el.lineLabel}`);
      }
      return answer.label
    }).flat();
    var headers = ['Response ID', 'Time Submitted', ...fieldLabels]
    sheet.appendRow(headers);
  } 
   var rowData = formAnswers.map(field => {
      switch (field.type) {
        case 'CHECKBOX':
        case 'RADIO': {
          var isResponseArray = Array.isArray(field.response);
          if (isResponseArray) {
            return field.response.filter(el => Boolean(el)).join(', ');
          }
          return field.response || '';
        }
        case 'CHECKBOX_GRID':
        case 'RADIO_GRID': {
          var isLineResponseArray = Array.isArray(field.response.lineResponse)
          return field.response.map(el => {
            if (isLineResponseArray) {
              return el.lineResponse.filter(el => Boolean(el)).join(', ');
            }
            return el.lineResponse || '';
          })
        }
        case 'GEOLOCATION': {
          var response = field.response || {};
          var responseArray = Object.entries(response).map(el => `${el[0]}: ${el[1]}`);
          return responseArray.join(', ');
        }
        case 'HIDDEN': {
          return field.response === undefined || field.response === null
            ? ''
            : field.response;
        }
        default: {
          var response =
            field.response === undefined || field.response === null ? '' : field.response;
          if (Array.isArray(response)) {
            return response.join(', ');
          }
          return response;
        }
      }
    }).flat();
  sheet.appendRow([responseId, submittedAt, ...rowData]);
  return ContentService.createTextOutput(JSON.stringify({result: "success"})).setMimeType(ContentService.MimeType.JSON);
}
  1. 웹 앱으로 배포

  1. 코드 편집기 상단 메뉴에서 "배포" > "새배포"를 선택합니다.

  1. 설정 버튼을 누른 뒤, "웹 앱"을 선택합니다.

3.이름(예시: test1)을 자유롭게 지어주시고, 액세스 권한이 있는 사용자는 꼭 ‘모두’ 로 설정해주시기 바랍니다.

🤨 액세스 권한… 모두라구요…?
🙂 해당 코드에는 원본데이터를 읽거나 내보내는 코드가 포함되어있지 않습니다.
왈라와 Typeform의 웹훅 요청에 맞게, 데이터를 구글 시트에 쓰는 작업 만을 포함합니다.

따라서, 해당 웹앱의 주소가 노출되더라도, 데이터가 유출될 걱정은 없으며,
만약 노출된다면 새로운 배포를 통해 새로운 주소를 받으실 있습니다

4.마지막으로 배포를 클릭하면 "액세스 승인" 버튼 등장

5. 클릭하여 액세스 승인을 진행

6.구글 시트를 만든 본인의 계정을 클릭하여 진행

7.왼쪽 하단의 'advanced' 클릭하여 하단의 unsafe 버전으로 진행

  1. 웹 앱의 URL 복사

배포 후 나타나는 웹 앱 URL을 복사합니다.

  1. 왈라폼 (Webhook)에 연동

  1. 왈라폼 페이지에 접속하고, 연동하려는 프로젝트를 선택합니다.

  2. [연동하기] 페이지에서 새 웹훅 추가 버튼 클릭

  1. 이름은 자유롭게 작성 후, 아까 복사한 웹 앱의 URL을 붙여넣기

  1. 현재 웹훅은 테스트요청을 제공하지 않기에 웹훅 저장 후 연동으로 돌아갑니다.

테스트 및 확인

왈라폼에서 해당 프로젝트의 응답을 제출해보면, 웹훅을 통해 데이터가 구글 시트로 전송되는 것을 확인할 수 있습니다.

기존 app.walla.my 에서는 아직 기능을 제공하고 있지 않습니다. 
오픈베타인 app.wallaform.com 이용하셔야 하는 유의하여 주시기 바랍니다

  1. 구글 시트 생성

1-a. 새로 만드는 경우

Google Drive에 접속하여 새로운 구글 시트를 생성

1-b. 왈라에 이미 구글시트를 연동해서 사용하고 있으나, 내보내기 후 연동하는 경우

이미 사용 중인 구글 시트를 선택하여 사본 만들기

사본이 만들어졌다면, 사본에서부터 2 작업 수행

기존 구성되었던 구글 시트를 삭제하고 싶다면,

구글 시트 연동 우측에 있는 토글 클릭

구글 시트 삭제 매시지와 함께 토글이 OFF로 설정된 것 확인


  1. Google Apps Script 설정

  1. 구글 시트에서 상단 메뉴 "확장 프로그램" > "Apps Script"을 선택합니다.

  1. 나타나는 코드 편집기에서 기존 코드를 삭제하고, 아래의 코드를 붙여넣습니다.

function doPost(e) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheets()[0];
  ss.setSpreadsheetTimeZone('Asia/Seoul');
  // Parsing the POST data to get the required data
  var data = JSON.parse(e.postData.contents);
  
  var formAnswers = data.form_answers;
  var submittedAt = new Date(data.form_response.submitted_at);

  var responseId = data.form_response.response_id.slice(0,10);
  // First row: labels
  if (sheet.getLastRow() === 0) {
    var fieldLabels = formAnswers.map(function(answer) {
      if (answer.type === 'RADIO_GRID' || answer.type === 'CHECKBOX_GRID') {
        return answer.response.map(el => `${answer.label} - ${el.lineLabel}`);
      }
      return answer.label
    }).flat();
    var headers = ['Response ID', 'Time Submitted', ...fieldLabels]
    sheet.appendRow(headers);
  } 
   var rowData = formAnswers.map(field => {
      switch (field.type) {
        case 'CHECKBOX':
        case 'RADIO': {
          var isResponseArray = Array.isArray(field.response);
          if (isResponseArray) {
            return field.response.filter(el => Boolean(el)).join(', ');
          }
          return field.response || '';
        }
        case 'CHECKBOX_GRID':
        case 'RADIO_GRID': {
          var isLineResponseArray = Array.isArray(field.response.lineResponse)
          return field.response.map(el => {
            if (isLineResponseArray) {
              return el.lineResponse.filter(el => Boolean(el)).join(', ');
            }
            return el.lineResponse || '';
          })
        }
        case 'GEOLOCATION': {
          var response = field.response || {};
          var responseArray = Object.entries(response).map(el => `${el[0]}: ${el[1]}`);
          return responseArray.join(', ');
        }
        case 'HIDDEN': {
          return field.response === undefined || field.response === null
            ? ''
            : field.response;
        }
        default: {
          var response =
            field.response === undefined || field.response === null ? '' : field.response;
          if (Array.isArray(response)) {
            return response.join(', ');
          }
          return response;
        }
      }
    }).flat();
  sheet.appendRow([responseId, submittedAt, ...rowData]);
  return ContentService.createTextOutput(JSON.stringify({result: "success"})).setMimeType(ContentService.MimeType.JSON);
}
  1. 웹 앱으로 배포

  1. 코드 편집기 상단 메뉴에서 "배포" > "새배포"를 선택합니다.

  1. 설정 버튼을 누른 뒤, "웹 앱"을 선택합니다.

3.이름(예시: test1)을 자유롭게 지어주시고, 액세스 권한이 있는 사용자는 꼭 ‘모두’ 로 설정해주시기 바랍니다.

🤨 액세스 권한… 모두라구요…?
🙂 해당 코드에는 원본데이터를 읽거나 내보내는 코드가 포함되어있지 않습니다.
왈라와 Typeform의 웹훅 요청에 맞게, 데이터를 구글 시트에 쓰는 작업 만을 포함합니다.

따라서, 해당 웹앱의 주소가 노출되더라도, 데이터가 유출될 걱정은 없으며,
만약 노출된다면 새로운 배포를 통해 새로운 주소를 받으실 있습니다

4.마지막으로 배포를 클릭하면 "액세스 승인" 버튼 등장

5. 클릭하여 액세스 승인을 진행

6.구글 시트를 만든 본인의 계정을 클릭하여 진행

7.왼쪽 하단의 'advanced' 클릭하여 하단의 unsafe 버전으로 진행

  1. 웹 앱의 URL 복사

배포 후 나타나는 웹 앱 URL을 복사합니다.

  1. 왈라폼 (Webhook)에 연동

  1. 왈라폼 페이지에 접속하고, 연동하려는 프로젝트를 선택합니다.

  2. [연동하기] 페이지에서 새 웹훅 추가 버튼 클릭

  1. 이름은 자유롭게 작성 후, 아까 복사한 웹 앱의 URL을 붙여넣기

  1. 현재 웹훅은 테스트요청을 제공하지 않기에 웹훅 저장 후 연동으로 돌아갑니다.

테스트 및 확인

왈라폼에서 해당 프로젝트의 응답을 제출해보면, 웹훅을 통해 데이터가 구글 시트로 전송되는 것을 확인할 수 있습니다.

왈라 바로가기

Continue Reading

Continue Reading

Continue Reading

Editorial

왈라팀의 해외 진출 철학 : 파프리칸 캐나다 진출기 그 후

February 16, 2024

GUIDES

마케터의 히든카드 : 히든필드

February 14, 2024

Editorial

왈라가 고양이 위치를 수집하는 방법

January 29, 2024

Editorial

어쩌다보니 데이터만 10시간째 보고 있는 당신에게

January 23, 2024

Editorial

특명 : 네이버폼 구출 대작전

December 19, 2023

Editorial

최소한의 마케팅 예산으로 사용자 3만명을 모은 비결

November 29, 2023

Editorial

파프리칸 공개채용기

November 28, 2023

Editorial

우리가 사라지는 네이버폼에 대처하는 방법

July 3, 2023

Editorial

캐나다에 회사를 세우고 다같이 가서 살아보기로 했다

June 12, 2023

GUIDES

그룹바이 기능으로 데이터를 묶어보자

May 17, 2023

EDITORIAL

왈라의 아주 작은 히스토리 북 (EN VER.)

May 15, 2023

Editorial

6개월 만에 매출 220배 성장한 왈라팀의 인사이트

April 28, 2023

Editorial

정주영창업경진대회 후기

April 6, 2023

Editorial

대학 강연에서 왈라팀 창업자가 전한 이야기

April 5, 2023

Guides

설문을 원페이지로 만드는 법

April 5, 2023

Guides

설문에 알림을 설정하는 법

April 5, 2023

Editorial

왈라는 어떻게 응답자를 찾나요?

April 4, 2023

Editorial

창업을 꿈꾸는 사람에게 부치는 편지

March 29, 2023

Guides

현대인들의 조개 껍데기, 스타벅스 기프티콘

March 24, 2023

Editorial

왈라의 이름은 왜 왈라가 되었나?

March 21, 2023

Guides

위치 데이터 수집을 위한 완벽한 방법

March 15, 2023

Guides

로직 설정 완벽 이해하기

March 14, 2023

Guides

왈라팀의 철학이 담긴 가격 정책 톺아보기

March 14, 2023

Silhouette of woman wearing black hat and black coat

Guides

GPT로 응답 시트 데이터 분석하기

March 8, 2023

Lightbulb

Guides

구글폼을 사용하는 가장 효율적인 방법

March 8, 2023

Guides

히든필드, 더이상 몰라서 숨지 않는 법

March 8, 2023

Editorial

안녕하세요, 왈라팀입니다

March 10, 2023

Editorial

왜 이름이 파프리카데이터랩이죠?

March 10, 2023

Editorial

왈라팀의 해외 진출 철학 : 파프리칸 캐나다 진출기 그 후

February 16, 2024

GUIDES

마케터의 히든카드 : 히든필드

February 14, 2024

Editorial

왈라가 고양이 위치를 수집하는 방법

January 29, 2024

Editorial

어쩌다보니 데이터만 10시간째 보고 있는 당신에게

January 23, 2024

Editorial

특명 : 네이버폼 구출 대작전

December 19, 2023

Editorial

최소한의 마케팅 예산으로 사용자 3만명을 모은 비결

November 29, 2023

Editorial

파프리칸 공개채용기

November 28, 2023

Editorial

우리가 사라지는 네이버폼에 대처하는 방법

July 3, 2023

Editorial

캐나다에 회사를 세우고 다같이 가서 살아보기로 했다

June 12, 2023

GUIDES

그룹바이 기능으로 데이터를 묶어보자

May 17, 2023

EDITORIAL

왈라의 아주 작은 히스토리 북 (EN VER.)

May 15, 2023

Editorial

6개월 만에 매출 220배 성장한 왈라팀의 인사이트

April 28, 2023

Editorial

정주영창업경진대회 후기

April 6, 2023

Editorial

대학 강연에서 왈라팀 창업자가 전한 이야기

April 5, 2023

Guides

설문을 원페이지로 만드는 법

April 5, 2023

Guides

설문에 알림을 설정하는 법

April 5, 2023

Editorial

왈라는 어떻게 응답자를 찾나요?

April 4, 2023

Editorial

창업을 꿈꾸는 사람에게 부치는 편지

March 29, 2023

Guides

현대인들의 조개 껍데기, 스타벅스 기프티콘

March 24, 2023

Editorial

왈라의 이름은 왜 왈라가 되었나?

March 21, 2023

Guides

위치 데이터 수집을 위한 완벽한 방법

March 15, 2023

Guides

로직 설정 완벽 이해하기

March 14, 2023

Guides

왈라팀의 철학이 담긴 가격 정책 톺아보기

March 14, 2023

Silhouette of woman wearing black hat and black coat

Guides

GPT로 응답 시트 데이터 분석하기

March 8, 2023

Lightbulb

Guides

구글폼을 사용하는 가장 효율적인 방법

March 8, 2023

Guides

히든필드, 더이상 몰라서 숨지 않는 법

March 8, 2023

Editorial

안녕하세요, 왈라팀입니다

March 10, 2023

Editorial

왜 이름이 파프리카데이터랩이죠?

March 10, 2023

Editorial

왈라팀의 해외 진출 철학 : 파프리칸 캐나다 진출기 그 후

February 16, 2024

GUIDES

마케터의 히든카드 : 히든필드

February 14, 2024

Editorial

왈라가 고양이 위치를 수집하는 방법

January 29, 2024

Editorial

어쩌다보니 데이터만 10시간째 보고 있는 당신에게

January 23, 2024

Editorial

특명 : 네이버폼 구출 대작전

December 19, 2023

Editorial

최소한의 마케팅 예산으로 사용자 3만명을 모은 비결

November 29, 2023

Editorial

파프리칸 공개채용기

November 28, 2023

Editorial

우리가 사라지는 네이버폼에 대처하는 방법

July 3, 2023

Editorial

캐나다에 회사를 세우고 다같이 가서 살아보기로 했다

June 12, 2023

GUIDES

그룹바이 기능으로 데이터를 묶어보자

May 17, 2023

EDITORIAL

왈라의 아주 작은 히스토리 북 (EN VER.)

May 15, 2023

Editorial

6개월 만에 매출 220배 성장한 왈라팀의 인사이트

April 28, 2023

Editorial

정주영창업경진대회 후기

April 6, 2023

Editorial

대학 강연에서 왈라팀 창업자가 전한 이야기

April 5, 2023

Guides

설문을 원페이지로 만드는 법

April 5, 2023

Guides

설문에 알림을 설정하는 법

April 5, 2023

Editorial

왈라는 어떻게 응답자를 찾나요?

April 4, 2023

Editorial

창업을 꿈꾸는 사람에게 부치는 편지

March 29, 2023

Guides

현대인들의 조개 껍데기, 스타벅스 기프티콘

March 24, 2023

Editorial

왈라의 이름은 왜 왈라가 되었나?

March 21, 2023

Guides

위치 데이터 수집을 위한 완벽한 방법

March 15, 2023

Guides

로직 설정 완벽 이해하기

March 14, 2023

Guides

왈라팀의 철학이 담긴 가격 정책 톺아보기

March 14, 2023

Silhouette of woman wearing black hat and black coat

Guides

GPT로 응답 시트 데이터 분석하기

March 8, 2023

Lightbulb

Guides

구글폼을 사용하는 가장 효율적인 방법

March 8, 2023

Guides

히든필드, 더이상 몰라서 숨지 않는 법

March 8, 2023

Editorial

안녕하세요, 왈라팀입니다

March 10, 2023

Editorial

왜 이름이 파프리카데이터랩이죠?

March 10, 2023