# คู่มือการตั้งค่าระบบเก็บข้อมูล (Google Apps Script + Google Sheet)
**สำหรับ: โครงการจัดตั้งมูลนิธิส่งเสริมสิทธิเด็กและสตรีในภาคเอกชน**
คู่มือฉบับนี้จะพาท่านตั้งค่าระบบเก็บข้อมูลทั้งหมดที่ผู้ใช้ตอบในเว็บไซต์ — รวมถึงคำตอบจาก wizard, ผลการประเมินสถานประกอบการ, และฟอร์มขอรับคำปรึกษา — ให้ส่งไปลงใน Google Sheet ของท่านโดยอัตโนมัติ
**ใช้เวลาประมาณ:** 15–20 นาที (ทำครั้งเดียว)
**ระดับความยาก:** ⭐⭐ ไม่จำเป็นต้องเขียนโปรแกรมเป็น เพียงคัดลอก-วาง
---
## 📋 สารบัญ
1. [ภาพรวม — ระบบทำงานอย่างไร](#1-ภาพรวม)
2. [สิ่งที่ต้องเตรียม](#2-สิ่งที่ต้องเตรียม)
3. [ขั้นตอนที่ 1 — สร้าง Google Sheet](#3-ขั้นตอนที่-1--สร้าง-google-sheet)
4. [ขั้นตอนที่ 2 — เปิด Apps Script Editor](#4-ขั้นตอนที่-2--เปิด-apps-script-editor)
5. [ขั้นตอนที่ 3 — วางโค้ดและตั้งค่า Sheet ID](#5-ขั้นตอนที่-3--วางโค้ดและตั้งค่า-sheet-id)
6. [ขั้นตอนที่ 4 — Deploy เป็น Web App](#6-ขั้นตอนที่-4--deploy-เป็น-web-app)
7. [ขั้นตอนที่ 5 — Authorize (อนุญาตการเข้าถึง)](#7-ขั้นตอนที่-5--authorize-อนุญาตการเข้าถึง)
8. [ขั้นตอนที่ 6 — เชื่อม URL เข้ากับเว็บไซต์](#8-ขั้นตอนที่-6--เชื่อม-url-เข้ากับเว็บไซต์)
9. [ขั้นตอนที่ 7 — ทดสอบระบบ](#9-ขั้นตอนที่-7--ทดสอบระบบ)
10. [การใช้งานข้อมูลที่เก็บได้](#10-การใช้งานข้อมูลที่เก็บได้)
11. [ฟีเจอร์เสริม](#11-ฟีเจอร์เสริม)
12. [Troubleshooting — แก้ปัญหาที่พบบ่อย](#12-troubleshooting)
13. [การอัปเดตโค้ดในอนาคต](#13-การอัปเดตโค้ดในอนาคต)
14. [ความเป็นส่วนตัวและ PDPA](#14-ความเป็นส่วนตัวและ-pdpa)
---
## 1. ภาพรวม
```
┌─────────────────┐
│ ผู้ใช้เปิดเว็บ │
│ ทำ wizard / │
│ ประเมิน / │
│ กรอกฟอร์ม │
└────────┬────────┘
│ (HTTPS POST)
▼
┌─────────────────────────┐
│ Google Apps Script │
│ (Web App URL) │
│ รับข้อมูล → คัดแยก → │
│ เขียนลง Sheet ที่ตรง │
└────────┬────────────────┘
│
▼
┌─────────────────────────────────┐
│ Google Sheet (4 tabs): │
│ • Benefit Wizard │
│ • Workplace Assessment │
│ • Leads (ฟอร์มติดต่อ) │
│ • Raw Submissions (สำรอง) │
└─────────────────────────────────┘
```
**ทำไมถึงใช้ระบบนี้:**
- ✅ ฟรี ไม่จำกัดจำนวน submissions
- ✅ ข้อมูลอยู่ใน Google Sheet ที่ท่านเป็นเจ้าของ — ไม่ต้องพึ่งบริการของบุคคลที่ 3
- ✅ วิเคราะห์ข้อมูลด้วย Google Sheets ได้ทันที (Pivot, Chart, ฯลฯ)
- ✅ เชื่อม Looker Studio ทำ dashboard สวย ๆ ได้ฟรี
- ✅ ส่งออกเป็น CSV / Excel ได้
---
## 2. สิ่งที่ต้องเตรียม
- ✅ บัญชี Google (Gmail) ของมูลนิธิ — ใช้ cwrpthailand@gmail.com
- ✅ ไฟล์เว็บไซต์ที่ deploy แล้ว (หรือกำลังจะ deploy)
- ✅ ไฟล์ google-apps-script.gs ที่อยู่ในโฟลเดอร์เว็บไซต์
- ✅ Text editor เพื่อแก้ไข index.html (Notepad, VSCode, Sublime, ฯลฯ)
- ✅ เวลา 15–20 นาที
---
## 3. ขั้นตอนที่ 1 — สร้าง Google Sheet
**3.1** เปิดบราวเซอร์ → ไปที่
**3.2** Login ด้วยบัญชี Google ของมูลนิธิ (cwrpthailand@gmail.com)
**3.3** คลิกเครื่องหมาย **+** ใหญ่ ๆ ตรงกลาง (Blank spreadsheet) เพื่อสร้างชีตใหม่
**3.4** ตั้งชื่อชีต — คลิกที่ "Untitled spreadsheet" มุมซ้ายบน → พิมพ์ชื่อใหม่ เช่น:
```
CWRP Website Submissions
```
**3.5** **คัดลอก Sheet ID** — ดู URL ของชีตด้านบนของบราวเซอร์ จะเป็นรูปแบบ:
```
https://docs.google.com/spreadsheets/d/1ABC2def3GHI4jkl5MNO6pqr7STU8vwx9YZ0/edit#gid=0
└────────── Sheet ID ──────────┘
```
ส่วนที่อยู่หลัง /d/ และก่อน /edit คือ Sheet ID — คัดลอกเก็บไว้ จะใช้ในขั้นตอนถัดไป
> 💡 **Tip:** เปิด Notepad / Notes ค้างไว้แล้ววางไอดีลงไป จะใช้ในขั้นตอนที่ 5
---
## 4. ขั้นตอนที่ 2 — เปิด Apps Script Editor
**4.1** ในชีตที่สร้างไว้ คลิก menu **Extensions** (ส่วนต่อขยาย) บนแถบเมนูบน
**4.2** เลือก **Apps Script**
**4.3** จะเปิดแท็บใหม่ขึ้นมา หน้าตาแบบนี้:
```
┌──────────────────────────────────┐
│ Apps Script │
│ Untitled project │
├──────────────────────────────────┤
│ Code.gs │
│ ┌────────────────────────────┐ │
│ │ function myFunction() { │ │
│ │ │ │
│ │ } │ │
│ └────────────────────────────┘ │
└──────────────────────────────────┘
```
**4.4** ตั้งชื่อ project — คลิกที่ "Untitled project" มุมซ้ายบน → พิมพ์ชื่อใหม่ เช่น:
```
CWRP Tracker
```
**4.5** ลบโค้ด function myFunction() {} ที่เห็นในหน้าต่าง — คลิกในหน้าต่างโค้ด → กด **Ctrl+A** (เลือกทั้งหมด) → กด **Delete**
---
## 5. ขั้นตอนที่ 3 — วางโค้ดและตั้งค่า Sheet ID
**5.1** เปิดไฟล์ google-apps-script.gs ในโฟลเดอร์เว็บไซต์ของท่าน (ใช้ Notepad หรือ text editor ใดก็ได้)
**5.2** กด **Ctrl+A** เลือกโค้ดทั้งหมด → กด **Ctrl+C** คัดลอก
**5.3** กลับไปที่หน้า Apps Script → คลิกในหน้าต่างโค้ด → กด **Ctrl+V** วาง
**5.4** หาบรรทัดนี้ในโค้ด (ประมาณบรรทัดที่ 90):
```javascript
const SHEET_ID = 'PASTE_YOUR_GOOGLE_SHEET_ID_HERE';
```
**5.5** ลบ PASTE_YOUR_GOOGLE_SHEET_ID_HERE และวาง Sheet ID จากขั้นตอน 3.5 — ผลลัพธ์จะเป็นแบบนี้:
```javascript
const SHEET_ID = '1ABC2def3GHI4jkl5MNO6pqr7STU8vwx9YZ0';
```
> ⚠️ **สำคัญ:** Sheet ID ต้องอยู่ในเครื่องหมาย quote เดี่ยว ('...') ตามเดิม
**5.6** กด **Ctrl+S** เพื่อบันทึก — ถ้าบันทึกสำเร็จ จะเห็นข้อความ "Project saved" ที่ด้านล่าง
---
## 6. ขั้นตอนที่ 4 — Deploy เป็น Web App
**6.1** มุมขวาบนของหน้า Apps Script จะมีปุ่ม **Deploy** (สีน้ำเงิน) — คลิก
**6.2** เมนูจะแสดงตัวเลือก:
- **New deployment** ← เลือกอันนี้
**6.3** คลิก **gear icon (⚙)** ข้างคำว่า "Select type" → จะมี dropdown ขึ้นมา → เลือก **Web app**
```
┌────────────────────────────┐
│ Type ⚙ ▼ │
│ ✓ Web app │
│ Add-on │
│ API executable │
└────────────────────────────┘
```
**6.4** กรอกข้อมูล Configuration:
| ช่อง | ค่าที่ต้องเลือก |
|------|----------------|
| **Description** | CWRP tracker v1 (จะเปลี่ยนเป็นอะไรก็ได้) |
| **Execute as** | **Me** (อีเมลของมูลนิธิ — ที่ Login ด้วย) |
| **Who has access** | **Anyone** ⚠️ สำคัญมาก ต้องเลือกอันนี้! |
> ⚠️ **"Who has access" ต้องเลือก "Anyone"** เพราะเว็บไซต์ของผู้ใช้ภายนอกต้องส่งข้อมูลเข้ามาได้ — ถ้าเลือก "Anyone with Google account" จะใช้งานไม่ได้
**6.5** คลิกปุ่ม **Deploy**
---
## 7. ขั้นตอนที่ 5 — Authorize (อนุญาตการเข้าถึง)
ครั้งแรกที่ deploy Google จะต้องอนุญาตให้สคริปต์เข้าถึงชีตของท่าน
**7.1** หน้าต่าง popup ขึ้นมา → คลิก **Authorize access**
**7.2** เลือกบัญชี Google ของมูลนิธิ
**7.3** หน้าจอจะเตือน **"Google hasn't verified this app"** — เพราะ Google ไม่รู้จักสคริปต์ของเรา (เป็นเรื่องปกติ เพราะเราเขียนเอง)
**7.4** คลิก **Advanced** ที่มุมล่างซ้าย
```
This app isn't verified
Google hasn't verified this app...
[Advanced] [Back to safety]
```
**7.5** คลิก **Go to CWRP Tracker (unsafe)** — ที่มี (unsafe) ในวงเล็บ — อย่ากังวล มันคือสคริปต์ของท่านเอง
**7.6** หน้าถัดมาจะแสดงรายการสิทธิที่สคริปต์ขอ — คลิก **Allow** เพื่ออนุญาต
**7.7** หน้าต่าง deploy success ขึ้นมา จะแสดง **Web app URL** หน้าตาแบบนี้:
```
https://script.google.com/macros/s/AKfycbx1234567890abcdefg/exec
```
**7.8** คลิก **Copy** เพื่อคัดลอก URL → เก็บไว้ใน Notepad ใช้ในขั้นตอนถัดไป
> 💡 **Tip:** URL นี้ใช้งานทันทีและไม่หมดอายุ แม้ในอนาคตจะอัปเดตโค้ด URL ก็ยังเหมือนเดิม
**7.9** คลิก **Done** ปิดหน้าต่าง
---
## 8. ขั้นตอนที่ 6 — เชื่อม URL เข้ากับเว็บไซต์
**8.1** เปิดไฟล์ index.html ในโปรแกรม text editor
**8.2** กด **Ctrl+F** ค้นหาคำว่า:
```
APPS_SCRIPT_URL
```
**8.3** จะเจอบรรทัดนี้ (ประมาณกลาง ๆ ของไฟล์):
```javascript
const APPS_SCRIPT_URL = 'https://script.google.com/macros/s/REPLACE_WITH_DEPLOYMENT_ID/exec';
```
**8.4** เลือก URL ทั้งหมด (ระหว่าง quote เดี่ยว '...') แล้ววาง URL จากขั้นตอน 7.7 ทับ — ผลลัพธ์:
```javascript
const APPS_SCRIPT_URL = 'https://script.google.com/macros/s/AKfycbx1234567890abcdefg/exec';
```
**8.5** กด **Ctrl+S** บันทึก
**8.6** Re-deploy เว็บไซต์ — ถ้าใช้ Netlify ลากไฟล์โฟลเดอร์ทั้งหมดไปวางที่ อีกครั้ง
---
## 9. ขั้นตอนที่ 7 — ทดสอบระบบ
### 9.1 ทดสอบจาก Apps Script editor (รวดเร็ว)
**9.1.1** กลับไปหน้า Apps Script → ในแถบ function บนสุด เลือก _testWriteSampleRows จาก dropdown
```
┌──────────────────────┐
│ ▶ Run Debug │
│ ┌──────────────┐ │
│ │ doPost ▼ │ │
│ │ doGet │ │
│ │ _testWriteSampleRows ← เลือกอันนี้ │
│ └──────────────┘ │
└──────────────────────┘
```
**9.1.2** คลิก **Run (▶)**
**9.1.3** เปิดชีต Google Sheet → ตรวจดูว่ามี tab ใหม่ขึ้นมา 4 tab:
- Benefit Wizard
- Workplace Assessment
- Leads
- Raw Submissions
แต่ละ tab ควรมีแถวใหม่ที่เป็นข้อมูลทดสอบ ✅ — ถ้ามี = ระบบทำงานถูกต้อง
### 9.2 ทดสอบจากเว็บไซต์จริง
**9.2.1** เปิดเว็บไซต์ที่ deploy แล้ว
**9.2.2** ลองทำ wizard เด็ก/สตรี/สปส. จนถึงผลลัพธ์
**9.2.3** เปิด Google Sheet → ดู tab "Benefit Wizard" — ควรมีแถวใหม่ขึ้นมา (อาจรอ 1-2 วินาที)
**9.2.4** ลองทำ self-assessment สถานประกอบการ → ดู tab "Workplace Assessment"
**9.2.5** ลองกรอกฟอร์ม "ขอรับคำปรึกษา" → ดู tab "Leads"
> ✅ **ถ้าข้อมูลขึ้นทั้ง 3 tab = ระบบพร้อมใช้งานเต็มรูปแบบ!**
> ⚠️ **ถ้าไม่ขึ้น** ดู [Troubleshooting](#12-troubleshooting) ด้านล่าง
---
## 10. การใช้งานข้อมูลที่เก็บได้
### 10.1 ดูข้อมูลใน Google Sheet
เปิดชีตได้ทุกเมื่อ — ทุกครั้งที่ผู้ใช้กรอกข้อมูล จะมีแถวใหม่ขึ้นมาภายในไม่กี่วินาที
**Tab "Benefit Wizard"** — ทุกครั้งที่ผู้ใช้ใช้คู่มือสวัสดิการ:
- เห็นว่าหมวดไหน (เด็ก/สตรี/สปส.) ได้รับความสนใจมากที่สุด
- ดูว่ามีกี่ครัวเรือนที่กรอกรายได้และจำนวนสมาชิก
- คำตอบของแต่ละคำถาม (เลือก need ใด, age ใด ฯลฯ)
**Tab "Workplace Assessment"** — ทุกครั้งที่องค์กรประเมินตนเอง:
- ประเภทธุรกิจไหนที่ทำ assessment บ่อยที่สุด
- มิติไหน (paid leave / breastfeeding / ฯลฯ) ที่องค์กรยังขาดมากที่สุด
- ระดับ Maturity เฉลี่ย
**Tab "Leads"** — ผู้สนใจให้ติดต่อกลับ:
- รายชื่อ ช่องทางติดต่อ ความสนใจ
- บทบาท (HR / CSR / ผู้บริหาร / ฯลฯ) — ทำให้ทีมแบ่งกลุ่มลีดได้
- ข้อความที่ผู้ใช้เขียน
- ผลการประเมินที่ผู้ใช้แชร์ (ถ้ามี)
### 10.2 วิเคราะห์ข้อมูลด้วย Google Sheets
**Pivot Table** — สร้างได้จาก Insert → Pivot table:
- ความถี่ของแต่ละหมวด
- จำนวนลีดต่อเดือน
- การกระจายตัวตามบทบาท
**Chart** — Insert → Chart:
- กราฟแสดงแนวโน้มการใช้งาน
- Pie chart แสดงสัดส่วนแต่ละ category
### 10.3 ส่งออกข้อมูล
**File → Download → CSV / Excel** — ส่งออกแต่ละ tab ได้
### 10.4 (Advanced) Looker Studio Dashboard
สร้าง dashboard สวย ๆ ได้ฟรี:
1. ไปที่
2. Create → Report → Add data → Google Sheets → เลือกชีตของท่าน
3. ลาก fields เพื่อสร้าง chart, table, scorecard
4. แชร์ dashboard ให้ทีมดูได้
---
## 11. ฟีเจอร์เสริม
### 11.1 รับอีเมลแจ้งเตือนทุกครั้งที่มีลีดใหม่
**11.1.1** เปิด Apps Script editor
**11.1.2** หาฟังก์ชัน appendLead_ (ประมาณบรรทัด 180)
**11.1.3** หา block ที่ comment ไว้ (อยู่ระหว่าง /\* ... */) — ลบ /\* ตัวบนและ \*/ ตัวล่างออก เพื่อ uncomment
ก่อน:
```javascript
/*
MailApp.sendEmail({
to: 'cwrpthailand@gmail.com',
...
});
*/
```
หลัง:
```javascript
MailApp.sendEmail({
to: 'cwrpthailand@gmail.com',
...
});
```
**11.1.4** Save (Ctrl+S) → Deploy → Manage deployments → ✏ → New version → Deploy
ตอนนี้ทุก ๆ ลีดใหม่ที่กรอกฟอร์ม ท่านจะได้รับอีเมลแจ้งเตือนทันที
### 11.2 แจ้งเตือนใน Google Sheet เมื่อมีแถวใหม่
ในชีต: **Tools → Notification rules** → ตั้ง "Notify me when... Any changes are made" + "Email — right away"
### 11.3 เชื่อมกับ Slack
ใช้ Zapier (zapier.com) หรือ Make.com — สร้าง workflow:
- Trigger: New row in Google Sheet (Leads tab)
- Action: Send Slack message ไปยัง channel ทีม
ฟรีถึง 100 zaps/เดือน
### 11.4 Auto-reply ไปหาลีด
เพิ่มโค้ดในฟังก์ชัน appendLead_:
```javascript
if (d.email) {
MailApp.sendEmail({
to: d.email,
subject: 'ขอบคุณที่ติดต่อโครงการมูลนิธิ',
body: 'เรียน คุณ' + (d.name || '') + '\n\n' +
'เราได้รับข้อมูลของท่านแล้ว ทีมงานจะติดต่อกลับภายใน 5 วันทำการ\n\n' +
'ขอบคุณค่ะ\nโครงการจัดตั้งมูลนิธิส่งเสริมสิทธิเด็กและสตรีในภาคเอกชน'
});
}
```
---
## 12. Troubleshooting
### ❌ "Authorization required" หรือ Run ไม่ผ่าน
→ ทำขั้นตอน [7. Authorize](#7-ขั้นตอนที่-5--authorize-อนุญาตการเข้าถึง) ใหม่
### ❌ เปิด Web app URL ใน browser แล้วได้ "Sorry, the file you have requested does not exist"
**สาเหตุ:** Deploy ยังไม่สำเร็จ หรือเลือก "Who has access" ผิด
**แก้:**
1. กลับไปที่ Apps Script → Deploy → Manage deployments
2. ดูว่า deployment ปัจจุบัน "Who has access" คือ "Anyone" หรือไม่
3. ถ้าไม่ใช่ ให้ ✏ Edit → New version → ปรับ → Deploy
### ❌ ทดสอบจากเว็บแล้วไม่มีแถวขึ้นในชีต
**ตรวจสอบทีละข้อ:**
1. **Console ของบราวเซอร์** — กด F12 → Console tab → มี error สีแดงไหม?
- ถ้ามี net::ERR_BLOCKED_BY_CLIENT = ad blocker บล็อก ลองปิด ad blocker
- ถ้ามี CORS error = ปกติ (เราใช้ no-cors mode) ไม่ต้องกังวล แต่ check sheet
2. **APPS_SCRIPT_URL** ใน index.html — ตรงกับ URL จาก Apps Script จริงหรือไม่?
- ต้องไม่มีช่องว่างหน้า/หลัง
- ต้องลงท้ายด้วย /exec
3. **ทดสอบ URL ตรง ๆ** — เปิด APPS_SCRIPT_URL ใน browser ใหม่ — ควรเห็นข้อความ:
```
CWRP Tracker — OK · 2026-XX-XX...
```
- ถ้าไม่เห็น → Web app ยังไม่พร้อม Deploy ใหม่
4. **Deploy ใหม่หลังแก้โค้ด** — ทุกครั้งที่แก้ Apps Script code ต้อง Deploy → Manage deployments → New version
### ❌ ฟอร์มแสดง "ส่งข้อมูลไม่สำเร็จ" และ fallback to email
→ ตรวจ APPS_SCRIPT_URL ตามข้อข้างต้น
### ❌ ข้อความไทยใน Sheet เป็น ??? หรือเครื่องหมายแปลก
**สาเหตุ:** Encoding ผิด
**แก้:** ในไฟล์ index.html ตรวจให้แน่ใจว่ามีบรรทัด:
```html
```
(มีอยู่แล้ว — ถ้าไม่มีให้เพิ่มในส่วน <head>)
### ❌ Test function _testWriteSampleRows ใน Apps Script ทำไม่ได้
**สาเหตุ:** ลืม Save หลังวางโค้ด
**แก้:** กด Ctrl+S → ลอง Run ใหม่
---
## 13. การอัปเดตโค้ดในอนาคต
ถ้าต้องการแก้ไขโค้ด Apps Script (เช่น เพิ่ม column ใหม่):
1. แก้ไขโค้ดใน Apps Script editor
2. กด **Ctrl+S** บันทึก
3. คลิก **Deploy** → **Manage deployments**
4. คลิก **✏ pencil** ข้าง deployment ที่มีอยู่
5. ใต้ "Version" เลือก **New version**
6. กด **Deploy**
7. **URL ยังเหมือนเดิม** — ไม่ต้องแก้ index.html
---
## 14. ความเป็นส่วนตัวและ PDPA
### 14.1 ข้อมูลที่เก็บโดยอัตโนมัติ (anonymous)
เมื่อผู้ใช้ทำ wizard หรือ self-assessment ระบบจะเก็บ:
- คำตอบที่เลือก
- Session ID (สุ่ม ไม่ใช่ตัวระบุตัวตน)
- User Agent (browser/OS — ไม่ระบุตัวตน)
- ภาษา ไทย/อังกฤษ
- Timestamp
❌ **ไม่เก็บ:** IP address, ชื่อ, อีเมล, location
### 14.2 ข้อมูลที่เก็บเมื่อกรอกฟอร์ม (with consent)
ผู้ใช้ต้องติ๊ก consent checkbox บังคับก่อนกรอกฟอร์ม — เก็บ:
- ชื่อ อีเมล โทร องค์กร บทบาท ความสนใจ ข้อความ
- ผลการประเมิน (เฉพาะถ้าผู้ใช้ติ๊ก checkbox optional)
### 14.3 ข้อแนะนำ PDPA
ก่อน deploy เป็น production ควร:
1. **เพิ่มหน้านโยบายความเป็นส่วนตัว (Privacy Policy)** — ใน consent checkbox ของฟอร์มมีลิงก์ "นโยบายความเป็นส่วนตัว" ที่ยังเป็น placeholder — ควรลิงก์ไปยังหน้าจริงของมูลนิธิ
2. **กระบวนการลบข้อมูล** — เตรียมขั้นตอนสำหรับผู้ที่ขอให้ลบข้อมูล (right to erasure)
3. **บันทึก consent timestamp** — ระบบเก็บอยู่แล้วใน column "Consent given"
4. **เก็บข้อมูลเท่าที่จำเป็น** — review column ในชีตเป็นระยะ ลบที่ไม่จำเป็น
---
## 📞 ต้องการความช่วยเหลือ?
- ดูคำแนะนำเพิ่มเติมในไฟล์ google-apps-script.gs
- Google Apps Script docs:
- หากติดขัดสามารถแชร์ screenshot ของ error ในหน้า Apps Script editor
---
**คู่มือนี้อัปเดตล่าสุด:** พฤษภาคม 2569 (พ.ศ.) · v1