ข้ามไปยังเนื้อหา

Web Push สำหรับ AMP

AMP เป็นเฟรมเวิร์กโอเพนซอร์สของ Google สำหรับการพัฒนาเว็บเพจที่เน้นผู้ใช้เป็นหลัก ซึ่งโหลดได้เกือบจะในทันที

ด้วยการผสานรวมคอมโพเนนต์ AMP Web Push เข้ากับเว็บเพจ AMP ของคุณ คุณจะสามารถเข้าถึงลูกค้าของคุณได้ในขณะที่พวกเขากำลังท่องเว็บบนเบราว์เซอร์มือถือ

ผสานรวม AMP เข้ากับเว็บไซต์ของคุณ

Anchor link to

เพิ่มไฟล์ต่อไปนี้ไปยัง ไดเรกทอรีราก (root directory) ของเว็บไซต์ของคุณ:

  1. helper-iframe.html
  2. service-worker.js
  3. permission-dialog.html

มีบล็อกที่สามารถปรับแต่งได้สองบล็อกในไฟล์ permission-dialog.html:

สมัครรับการแจ้งเตือนแบบพุช
<div class="subscribe" permission="default">
<p class="message">
{สมัครรับการแจ้งเตือนแบบพุช}
</p>
</div>
ปลดบล็อกการแจ้งเตือนแบบพุช
<div class="blocked" permission="denied">
<p class="message">
{ปลดบล็อกการแจ้งเตือนแบบพุชในการตั้งค่าเบราว์เซอร์ของคุณ}
</p>
</div>

โดยที่:

  • {Subscribe to push notifications} — ข้อความ CTA เพื่อขอให้ผู้ใช้อนุญาตการแจ้งเตือนแบบพุช
  • {Unblock push notifications in your browser settings} — ข้อความ CTA ที่แจ้งให้ผู้ใช้ปลดบล็อกการแจ้งเตือนแบบพุชในการตั้งค่าเบราว์เซอร์ของตน (ในกรณีที่ผู้ใช้บล็อกการแจ้งเตือนแบบพุชอย่างชัดเจน)

หากต้องการปรับแต่งลักษณะของกล่องโต้ตอบการอนุญาต ให้เพิ่มโค้ดต่อไปนี้ลงในแท็ก <head>:

<style amp-custom>
.subscribe {
/* your css here */
}
.blocked {
/* your css here */
}
</style>
กล่องโต้ตอบการอนุญาต

ผสานรวม AMP Web Pushes

Anchor link to

หากต้องการติดตั้งการแจ้งเตือนแบบพุชบนเว็บในหน้า AMP ให้เพิ่มคอมโพเนนต์ amp-web-push ในแต่ละหน้า AMP

ในการทำเช่นนั้น ให้ทำตามสองขั้นตอนต่อไปนี้:

1. เพิ่มสคริปต์ต่อไปนี้ลงในแท็ก <head>:

amp-web-push
<head>
...
<script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>
...
</head>

2. เพิ่มโค้ดต่อไปนี้ลงในแท็ก <body>:

amp-web-push
<body>
<amp-web-push
id="amp-web-push"
layout="nodisplay"
helper-iframe-url="https://{domain}/helper-iframe.html"
permission-dialog-url="https://{domain}/permission-dialog.html"
service-worker-url="https://{domain}/service-worker.js?applicationCode={applicationCode}&senderId={senderId}&applicationServerKey={applicationServerKey}"
></amp-web-push>
...
<!-- Start Subscribe to notifications button -->
<amp-web-push-widget visibility="unsubscribed" layout="fixed" width="250" height="80">
<button class="subscribe" on="tap:amp-web-push.subscribe">
{ข้อความบนปุ่มสมัครรับข้อมูล}
</button>
</amp-web-push-widget>
<!-- End the Subscribe to notifications button -->
<!-- Start Unsubscribe from notifications button -->
<amp-web-push-widget visibility="subscribed" layout="fixed" width="250" height="80">
<button class="unsubscribe" on="tap:amp-web-push.unsubscribe">
{ข้อความบนปุ่มยกเลิกการสมัคร}
</button>
</amp-web-push-widget>
<!-- End Unsubscribe from notifications button -->
<!-- Start Fallback if a user blocks notifications -->
<amp-web-push-widget visibility="blocked" layout="fixed" width="250" height="80">
<div class="fallback">
{ข้อความสำรองหากผู้ใช้บล็อกการแจ้งเตือน}
</div>
</amp-web-push-widget>
<!-- End Fallback if a user blocks notifications -->
...
</body>

โดยที่:

  • {domain} — URL เว็บไซต์ของคุณ,
  • {applicationCode} — รหัสแอป Pushwoosh ของคุณ,
  • {senderId} — Sender ID จากคอนโซล Firebase ของคุณ,
  • {applicationServerKey} — Server Key จากคอนโซล Firebase ของคุณ,
  • {Text on Subscribe button} — ข้อความบนปุ่มสำหรับเปิดใช้งานการแจ้งเตือนแบบพุช,
  • {Text on Unsubscribe button} — ข้อความบนปุ่มสำหรับปิดใช้งานการแจ้งเตือนแบบพุช,
  • {Fallback if a user blocks notifications} — บล็อกสำรองที่จะแสดงเมื่อผู้ใช้บล็อกการแจ้งเตือนแบบพุช

หากต้องการปรับแต่งสไตล์ของปุ่ม ให้เพิ่มโค้ดต่อไปนี้ลงในแท็ก <head>:

css
<style amp-custom>
amp-web-push-widget button.subscribe {
/* your css here */
}
amp-web-push-widget button.unsubscribe {
/* your css here */
}
amp-web-push-widget .fallback {
/* your css here */
}
</style>

หากต้องการตรวจสอบว่าคุณได้ทำทุกอย่างถูกต้องหรือไม่ โปรดใช้ https://search.google.com/test/amp