พุชบนเว็บผ่าน Google Tag Manager

ติดตั้งพุชโนติฟิเคชั่นในสี่ขั้นตอนโดยไม่ต้องเขียนโค้ด! Pushwoosh WebSDK Lite สามารถเพิ่มลงในเว็บไซต์ของคุณผ่าน Google Tag Manager ทำให้กระบวนการผสานการทำงานง่ายที่สุดเท่าที่จะเป็นไปได้

ใน Firebase Console เลือกโปรเจกต์ของคุณเพื่อรับ Server Key และ Sender ID ของ Firebase โปรดดูภาพหน้าจอด้านล่างเพื่อใช้อ้างอิง:

ไปที่ Control Panel ของ Pushwoosh และเพิ่มแอปใหม่ ในหน้าที่เปิดขึ้นมา ให้กำหนดค่าแพลตฟอร์ม Chrome หรือ Firefox โดยคลิกที่ปุ่ม Configure ในแถวที่เกี่ยวข้อง กรอกข้อมูลในฟอร์ม:

• นำ Server Key จาก Firebase Console ไปใส่ในช่อง API key
• นำ Sender ID จาก Firebase Console ไปใส่ในช่อง FCM Sender ID
• ใส่ที่อยู่ที่แน่นอนของเว็บไซต์ของคุณในช่อง Website Name

อย่าลืมคัดลอก Application Code ของแอปที่สร้างขึ้นใหม่ คุณจะต้องใช้ในภายหลัง รหัสแอปจะถูกไฮไลท์ไว้ด้านล่าง:

1. ใน Google Tag Manager เลือกคอนเทนเนอร์หรือสร้างคอนเทนเนอร์ใหม่

2. สร้าง Tag ใหม่และเลือก Custom HTML ในการกำหนดค่า Tag (Tag Configuration)

3. คัดลอกสคริปต์ด้านล่างและวางลงในช่อง HTML

<script type="text/javascript" src="//cdn.pushwoosh.com/webpush-lite/v1/pushwoosh-web-notifications-lite.js?pw_application_code=#####-#####" async></script>

4. เปลี่ยนเครื่องหมายตัวเลข #####-##### (ที่ไฮไลท์ในภาพด้านล่าง) ในสคริปต์เป็น Pushwoosh Application Code ของคุณ ซึ่งคุณได้รับในขั้นตอนที่ 2

5. เลื่อนลงไปที่ตัวเลือกการทริกเกอร์ (Triggering) และเลือก All Pages

6. คลิก “บันทึก” (Save) Tag ของคุณพร้อมใช้งานแล้ว!

ให้ผู้ใช้สมัครรับพุชโนติฟิเคชั่นด้วยปุ่มสมัครรับพุช หากต้องการตั้งค่าปุ่ม เพียงเพิ่มสคริปต์ต่อไปนี้ผ่าน Google Tag Manager

<div style="text-align:center;margin:90px 0;">
  <button style="color:#000000;background: none;font-size: 16px;cursor: pointer;font-weight: 700;padding:0 60px;line-height: 60px;border:3px solid #000000;" type="button" name="button" onclick="window.pushwooshLite.instance.showSubscriptionWindow()">Subscribe Now</button>
</div>

เรียบร้อย! ตอนนี้ผู้เยี่ยมชมเว็บไซต์ของคุณสามารถสมัครรับและรับข้อความพุชได้แล้ว