ตั้งค่า Web Push Notification ใน WordPress ด้วย OneSignal

ส่งการแจ้งเตือนบทความใหม่ถึงผู้อ่านโดยตรง เพิ่ม Traffic กลับเว็บได้ฟรี ไม่ต้องเขียนโค้ด

ตั้งค่า Web Push Notification ใน WordPress ด้วย OneSignal

Web Push Notification คืออะไร?

Web Push Notification คือการแจ้งเตือนที่ปรากฏขึ้นบนหน้าจอคอมพิวเตอร์หรือมือถือของผู้เข้าชมเว็บ แม้ว่าเขาจะไม่ได้เปิดหน้าเว็บไซต์ของคุณอยู่ในขณะนั้น คล้ายกับการแจ้งเตือนของแอปพลิเคชันบนมือถือ แต่ใช้งานได้ผ่านเบราว์เซอร์โดยตรง

ประโยชน์ของ Web Push Notification สำหรับเว็บไซต์:

เตรียมความพร้อมก่อนติดตั้ง

ก่อนเริ่มตั้งค่า Web Push Notification ให้เตรียมสิ่งเหล่านี้ให้พร้อม:

หมายเหตุ: หากเว็บของคุณยังไม่มี SSL ให้เปิดใช้งาน AutoSSL ใน cPanel ก่อน ดูวิธีทำได้ที่ คู่มือ AutoSSL cPanel

สมัครบัญชี OneSignal และสร้าง App

OneSignal เป็นบริการ Push Notification ที่ได้รับความนิยมสูงสุด มีแพลนฟรีที่รองรับ Subscriber ไม่จำกัด ทำตามขั้นตอนนี้:

  1. ไปที่ onesignal.com แล้วคลิก Sign Up Free
  2. กรอก Email และ Password เพื่อสร้างบัญชี
  3. หลังเข้าสู่ระบบ คลิก New App / Website
  4. ตั้งชื่อ App เป็นชื่อเว็บไซต์ของคุณ เช่น "My Blog Thailand"
  5. เลือก Platform เป็น Web แล้วคลิก Next: Configure Your Platform
  6. เลือก WordPress Plugin or Website Builder
  7. กรอก Site URL ของเว็บไซต์คุณ เช่น https://yourdomain.com
  8. คลิก Save & Continue
  9. ระบบจะแสดง App ID และ REST API Key — จดไว้ใช้ในขั้นตอนถัดไป
Tip: App ID มีหน้าตาแบบนี้: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx — เก็บไว้ในที่ปลอดภัย อย่าเปิดเผย REST API Key

ติดตั้ง Plugin OneSignal ใน WordPress

เมื่อมี App ID แล้ว ให้ติดตั้ง Plugin ใน WordPress Dashboard ทำตามนี้:

  1. เข้า WordPress Dashboard → Plugins → Add New
  2. ค้นหาคำว่า "OneSignal"
  3. คลิก Install Now ที่ Plugin ชื่อ OneSignal – Web Push Notifications
  4. รอสักครู่แล้วคลิก Activate
  5. ไปที่ OneSignal Push → Configuration ในเมนูซ้าย
  6. กรอก App ID และ REST API Key ที่ได้จาก OneSignal Dashboard
  7. คลิก Save

หลังจาก Save แล้ว Plugin จะโหลด Script ที่จำเป็นลงในเว็บไซต์โดยอัตโนมัติ

ตั้งค่า Prompt ขอสมัคร Subscription

เมื่อผู้เข้าชมมาที่เว็บไซต์ เบราว์เซอร์จะแสดงกล่องขอสิทธิ์ส่งการแจ้งเตือน ปรับแต่งได้ดังนี้:

  1. ไปที่ OneSignal Push → Configuration → Prompt Settings
  2. เลือกรูปแบบ Prompt:
    • Slide Prompt — กล่องเล็กแบบ Slide ขึ้นมาที่มุมล่างซ้าย (แนะนำ)
    • Bell Prompt — ปุ่มกระดิ่งลอยอยู่มุมล่างขวา
    • Custom Link — ลิงก์ที่คุณวางเองในหน้าเว็บ
  3. ปรับ Auto Prompt Delay เป็น 10 วินาที เพื่อไม่รบกวนผู้ใช้ทันทีที่เข้าเว็บ
  4. ตั้งค่าข้อความภาษาไทย เช่น
    "รับการแจ้งเตือนบทความใหม่ก่อนใคร" / "ยินยอม" / "ไม่ใช่ตอนนี้"
  5. คลิก Save
Tip: Slide Prompt มีอัตรา Opt-in สูงกว่า Native Browser Prompt เพราะผู้ใช้กดปฏิเสธ Native Prompt แล้วจะไม่ได้รับโอกาสอีก แต่ Slide Prompt สามารถแสดงซ้ำได้

ส่ง Push Notification ครั้งแรก

เมื่อมี Subscriber แล้ว ทดลองส่ง Push Notification ด้วยตัวเองได้จาก Dashboard:

  1. ไปที่ OneSignal Dashboard → Messages → Push
  2. คลิก New Push
  3. กรอก Title (หัวข้อ) และ Message (ข้อความ)
  4. เพิ่ม Launch URL เป็น URL ของบทความที่ต้องการให้ผู้ใช้ไป
  5. เพิ่ม Icon เป็น Logo ของเว็บไซต์ (ขนาดแนะนำ 192×192 px)
  6. เลือก Audience: All Subscribers
  7. คลิก Send Message

ภายในไม่กี่วินาที ผู้ที่สมัครรับการแจ้งเตือนไว้จะได้รับ Notification บนอุปกรณ์ทันที

ตั้งค่าส่ง Notification อัตโนมัติเมื่อโพสต์บทความใหม่

ฟีเจอร์ที่ดีที่สุดของ Plugin OneSignal คือส่ง Notification อัตโนมัติทุกครั้งที่คุณ Publish บทความใหม่:

  1. ไปที่ OneSignal Push → Configuration → Automatic Notifications
  2. เปิดใช้ Send notification when a new post is published
  3. เลือก Post Types ที่ต้องการ เช่น Posts เท่านั้น หรือทั้ง Posts และ Pages
  4. ตั้งค่า Title Template เช่น บทความใหม่: {post_title}
  5. ตั้งค่า Message Template เช่น {post_excerpt} หรือเขียนคงที่ก็ได้
  6. คลิก Save

ตั้งแต่นี้ทุกครั้งที่กด Publish บทความใหม่ใน WordPress จะมีการส่ง Push Notification ไปยัง Subscriber ทุกคนโดยอัตโนมัติ

ตรวจสอบว่า Push Notification ทำงานถูกต้อง

ทดสอบและตรวจสอบสถานะด้วยวิธีเหล่านี้:

# ตรวจสอบ Script ถูกโหลดในหน้าเว็บ
# เปิด Browser Developer Tools (F12) แล้วไปที่แท็บ Console พิมพ์:
OneSignal.getNotificationPermission()
# ผลลัพธ์ที่ถูกต้อง: "granted" หรือ "default"

# ตรวจว่า Service Worker ทำงานอยู่
# ใน Developer Tools ไปที่ Application > Service Workers
# ควรเห็น: OneSignalSDKWorker.js สถานะ "activated"

# ทดสอบ API ด้วย curl (แทนที่ APP_ID และ API_KEY)
curl -X POST \
  "https://onesignal.com/api/v1/notifications" \
  -H "Authorization: Basic YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"app_id":"YOUR_APP_ID","included_segments":["Test Users"],"contents":{"en":"Test notification"}}'

# ดู Subscriber ในปัจจุบัน
curl "https://onesignal.com/api/v1/apps/YOUR_APP_ID" \
  -H "Authorization: Basic YOUR_REST_API_KEY"
# ดูที่ "players" หรือ "messageable_players"
Tip: ใน OneSignal Dashboard → Audience → Subscriptions จะแสดงจำนวน Active Subscriber และสถิติ Opt-in ต่อวัน ติดตามตัวเลขนี้เพื่อวัดผล

แก้ปัญหาที่พบบ่อย

Error: "Notifications are blocked"

ผู้ใช้กดบล็อกการแจ้งเตือนไปแล้ว แก้ไขได้โดย:

Error: "Service Worker registration failed"

มักเกิดจากปัญหา HTTPS หรือเส้นทาง Service Worker ผิด:

Error: "No App ID configured"

Plugin ยังไม่ได้บันทึก App ID:

Push Notification ไม่ส่งอัตโนมัติเมื่อโพสต์บทความ

ตรวจสอบสิ่งเหล่านี้:

iOS ไม่ได้รับ Push Notification

iOS Safari รองรับ Web Push ตั้งแต่ iOS 16.4 ขึ้นไปเท่านั้น:

คำถามที่พบบ่อย (FAQ)

Q: OneSignal ฟรีมีข้อจำกัดอะไรบ้าง?

A: OneSignal แพลนฟรีรองรับ Subscriber ไม่จำกัดและส่งการแจ้งเตือนได้ไม่จำกัด ข้อจำกัดหลักคือ Segmentation และ A/B Testing ขั้นสูงจะต้องใช้แพลนเสียเงิน สำหรับเว็บไซต์ทั่วไปของคนไทย แพลนฟรีเพียงพอแน่นอน

Q: Push Notification ส่งผลต่อ SEO ไหม?

A: ไม่มีผลกระทบต่อ SEO โดยตรง แต่การส่ง Push ทำให้ผู้อ่านกลับมาเว็บบ่อยขึ้น ซึ่งเพิ่ม Traffic และ Time on Site ซึ่งส่งผลดีต่อ SEO ทางอ้อม อย่างไรก็ตาม หากส่งการแจ้งเตือนบ่อยเกินไปอาจทำให้ผู้ใช้ Unsubscribe ได้

Q: ผู้ใช้กด "Block" ไปแล้ว จะทำให้กลับมา Subscribe ใหม่ได้ไหม?

A: ไม่สามารถทำได้โดยอัตโนมัติ ผู้ใช้ต้องไปปลดบล็อกด้วยตัวเองในการตั้งค่าเบราว์เซอร์ วิธีป้องกันคือตั้งค่า Auto Prompt Delay ให้นานพอ เช่น 15-30 วินาที เพื่อให้ผู้ใช้ได้ดูเนื้อหาก่อนแล้วค่อยถามขอสิทธิ์

บทความที่เกี่ยวข้อง