JavaScript ฝั่งไคลเอ็นต์

ตัวอย่างกล่องโต้ตอบที่ขอให้ผู้ติดตามลิงก์การติดตาม

เมื่อใช้การลิงก์การสมัครใช้บริการ JavaScript ฝั่งไคลเอ็นต์จะเป็นเพียงวิธีเดียวในการสร้าง การเชื่อมโยงใหม่ระหว่าง PPID กับบัญชี Google ของผู้อ่าน ในอุปกรณ์ที่กำหนดค่า ผู้อ่านจะเห็นกล่องโต้ตอบที่ขอให้เชื่อมโยง การสมัครใช้บริการ หลังจากคลิกปุ่ม "ดำเนินการต่อด้วย Google" แล้ว ผู้อ่านจะเลือกบัญชีที่จะลิงก์ได้ และระบบจะส่งกลับไปยังหน้าที่กําหนดค่าไว้เมื่อดำเนินการเสร็จสิ้น

การเชื่อมโยง PPID กับบัญชีของผู้อ่านทำได้โดยใช้เมธอด linkSubscription ใน swg.js การใช้งานจะคล้ายกับบัญชีก่อนหน้า ฟีเจอร์การลิงก์ (ตัวอย่าง), แต่แทนที่จะส่งคำสัญญา เมธอดจะยอมรับออบเจ็กต์ที่มี PPID

ตัวอย่างโค้ด

ตัวอย่างโค้ดฝั่งไคลเอ็นต์เหล่านี้แสดงให้เห็นวิธีเริ่มต้นลิงก์ สิ่งที่ถูกต้องคือ ลักษณะของคำตอบ และ (ไม่บังคับ) วิธีใช้ eventManager ของ swg.js เพื่อ จะฟังเหตุการณ์ใน 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 ที่ได้รับอนุญาต

  1. สำหรับการใช้งานจริง ต้นทางที่ได้รับอนุญาตอาจมาจากการกำหนดค่า ไคลเอ็นต์ OAuth หรือจากรายการโดเมนที่ยืนยันแล้วในการตั้งค่าสื่อเผยแพร่ ภายในศูนย์ผู้เผยแพร่เนื้อหา
  2. สำหรับการใช้งานเมื่อมีการพัฒนาหรือทดลองใช้ โดยใช้โดเมนที่ยืนยันไม่ได้ (เช่น localhost หรือเซิร์ฟเวอร์ที่ไม่ใช่สาธารณะ) โดเมนต้องระบุใน OAuth ที่กำหนดค่า ลูกค้า

แก้ไขข้อผิดพลาด

ปัญหาที่พบบ่อยที่สุดเมื่อทดสอบ JavaScript ฝั่งไคลเอ็นต์คือการได้รับ เกิดข้อผิดพลาด 403 - Not Authorized รายการเมื่อพยายามเรียกใช้ JavaScript หากต้องการแก้ไขปัญหานี้ ให้ตรวจสอบว่าคุณเรียกใช้ JavaScript จากโดเมนที่ตรวจสอบแล้วใน Publisher Center หรือเรียกใช้โค้ดในโฮสต์ที่อยู่ในต้นทาง js ที่ได้รับอนุญาตของไคลเอ็นต์ OAuth ที่ลิงก์

ขั้นตอนถัดไป

ขอแสดงความยินดีที่การผสานรวม JavaScript ฝั่งไคลเอ็นต์เสร็จสมบูรณ์ เริ่มเลย ให้คุณเปลี่ยนไปใช้การผสานรวมฝั่งเซิร์ฟเวอร์ ซึ่งเป็นขั้นตอนที่จำเป็นในการซิงค์ข้อมูลผู้อ่าน การให้สิทธิ์ เมื่อคุณติดตั้งใช้งานและการใช้ฟังก์ชัน UpdateReaderEntitlements ฝั่งเซิร์ฟเวอร์ที่จําเป็น คุณจะมั่นใจได้ว่าระบบจะไฮไลต์บทความที่เหมาะสมสําหรับผู้ติดตามที่เหมาะสม