เมื่อใช้การลิงก์การสมัครใช้บริการ JavaScript ฝั่งไคลเอ็นต์จะเป็นวิธีเดียวในการสร้างการเชื่อมโยงใหม่ระหว่าง PPID กับบัญชี Google ของผู้อ่าน ในหน้าที่กำหนดค่าไว้ ผู้อ่านจะเห็นกล่องโต้ตอบเพื่อขอให้ลิงก์การสมัครใช้บริการ หลังจากที่ผู้อ่านคลิกปุ่ม "ดำเนินการต่อโดยใช้ Google" ผู้อ่านจะสามารถเลือกบัญชีที่จะลิงก์ด้วย และระบบจะส่งกลับไปยังหน้าที่กำหนดค่าไว้เมื่ออ่านเสร็จแล้ว
การเชื่อมโยง PPID กับบัญชีของผู้อ่านจะดำเนินการโดยใช้เมธอด linkSubscription ใน swg.js การใช้งานจะคล้ายกับฟีเจอร์การลิงก์บัญชีแบบก่อนหน้านี้ (ตัวอย่าง) แต่แทนที่จะส่งคำสัญญา เมธอดจะยอมรับออบเจ็กต์ที่มี PPID
ตัวอย่างโค้ด
ตัวอย่างโค้ดฝั่งไคลเอ็นต์เหล่านี้จะแสดงวิธีการเริ่มลิงก์ หน้าตาของการตอบกลับที่ถูกต้อง และ (ไม่บังคับ) วิธีใช้ swg.js eventManager เพื่อฟังเหตุการณ์ Analytics และกำหนดเส้นทางให้สอดคล้องกัน
เริ่มต้นกล่องโต้ตอบการลิงก์การสมัครใช้บริการ
const result = await subscriptions.linkSubscription({publisherProvidedId:6789})
ตัวอย่างการตอบกลับ
การตอบกลับที่ถูกต้องจากบัญชีที่ลิงก์ที่สําเร็จจะมีทั้ง PPID ที่ใช้ในลิงก์และสถานะบูลีน success
console.log(result) //{publisherProvidedId: 6789, success: true}
การลิงก์การสมัครใช้บริการไม่จำเป็นต้องใช้คุกกี้ของบุคคลที่สามหรือเซสชัน Google ที่ใช้งานอยู่สำหรับผู้อ่าน วิธีนี้ทำให้ผู้อ่านสามารถเปิดตัวประสบการณ์การลิงก์ได้อย่างยืดหยุ่นได้ทุกเมื่อ ไม่ใช่เฉพาะหลังจากที่ซื้อแล้ว ถ้าผู้อ่านไม่ได้ลงชื่อเข้าสู่ระบบบัญชี Google ผู้อ่านจะมีโอกาสได้ลงชื่อเข้าใช้ซึ่งเป็นส่วนหนึ่งของขั้นตอน
ดูตัวอย่างฝั่งไคลเอ็นต์ที่สมบูรณ์
<script
async
type="application/javascript"
subscriptions-control="manual"
src="https://news.google.com/swg/js/v1/swg.js">
</script>
<script>
function linkSubscription(ppid) {
self.SWG.push(async (subscriptions) => {
try {
const result = await subscriptions.linkSubscription({
publisherProvidedId: ppid,
})
console.log(result)
} catch(e) {
console.log(e)
}
})
}
document.addEventListener('DOMContentLoaded', function () {
(self.SWG = self.SWG || []).push(subscriptions => {
subscriptions.init("PUBLICATION_ID");
//Configure the event manager for analytics integration
subscriptions.getEventManager().then(manager => {
manager.registerEventListener((event) => {
// Add code here to send the event to your analytics
// sendToAnalytics(event);
console.log(event);
});
});
});
document
.querySelector("SELECTOR")
.addEventListener('click', function(){
linkSubscription(PPID)
})
});
</script>
สร้างรหัสไคลเอ็นต์ OAuth
แม้ว่าไคลเอ็นต์ OAuth จะไม่จำเป็นสำหรับการลิงก์การสมัครใช้บริการ แต่คุณก็ใช้ไคลเอ็นต์ OAuth เพื่อเขียนรายการที่อนุญาตของโดเมนที่ได้รับอนุญาตสำหรับโปรเจ็กต์ของคุณได้
โดเมนที่ได้รับอนุญาตคือรายการโดเมนที่ JavaScript ฝั่งไคลเอ็นต์ให้เรียกใช้ได้ สื่อเผยแพร่ของคุณอาจมีรหัสไคลเอ็นต์ OAuth ที่กำหนดค่าในศูนย์ผู้เผยแพร่เนื้อหาเพื่อใช้กับ swg.js อยู่แล้ว
- หากการเรียก JavaScript ฝั่งไคลเอ็นต์ของการลิงก์การสมัครใช้บริการมาจากชื่อโดเมนที่ผ่านการตรวจสอบก่อนหน้านี้แล้ว ก็ไม่จำเป็นต้องดำเนินการใดๆ
- หาก JavaScript ทำงานจากชื่อโดเมนใหม่ ให้ทำตามวิธีการกำหนดค่ารหัสไคลเอ็นต์ OAuth ของ SwG
การทดสอบ
หากต้องการทดสอบการใช้งานฝั่งไคลเอ็นต์ของการลิงก์การสมัครใช้บริการ โค้ดจะต้องเรียกใช้จากเซิร์ฟเวอร์ที่มีต้นทาง JavaScript ที่ได้รับอนุญาต
- สำหรับการใช้งานจริง ต้นทางที่ได้รับอนุญาตอาจมาจากไคลเอ็นต์ OAuth ที่กำหนดค่าไว้หรือจากรายการโดเมนที่ได้รับการยืนยันในการตั้งค่าสื่อเผยแพร่ภายในศูนย์ผู้เผยแพร่เนื้อหา
- สำหรับการใช้งานในการพัฒนาหรือทดลองใช้โดยมีโดเมนที่ยืนยันไม่ได้ (เช่น localhost หรือเซิร์ฟเวอร์ที่ไม่ใช่สาธารณะ) โดเมนนั้นต้องปรากฏอยู่ในไคลเอ็นต์ OAuth ที่กำหนดค่าไว้
แก้ไขข้อผิดพลาด
ปัญหาที่พบบ่อยที่สุดเมื่อทดสอบ JavaScript ฝั่งไคลเอ็นต์คือได้รับข้อผิดพลาด 403 - Not Authorized เมื่อพยายามเรียกใช้ JavaScript ในการแก้ไขปัญหานี้ โปรดตรวจสอบว่าคุณกำลังเรียกใช้ JavaScript จากโดเมนที่ผ่านการตรวจสอบในศูนย์ผู้เผยแพร่เนื้อหาแล้ว หรือเรียกใช้โค้ดบนโฮสต์ที่อยู่ในต้นทาง js ที่ได้รับอนุญาตของไคลเอ็นต์ OAuth ที่ลิงก์