ลิงก์บัญชีผู้ใช้ (JavaScript ฝั่งไคลเอ็นต์)

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

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

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

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

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

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

const result = await subscriptions.linkSubscription({publisherProvidedId:6789})

ตัวอย่างการตอบกลับ (อินเทอร์เฟซ)

การตอบกลับที่ถูกต้องจากบัญชีที่ลิงก์สำเร็จแล้วจะมีทั้ง PPID ที่ใช้ในการลิงก์และสถานะบูลีน success

{
  publisherProvidedId: 6789,
  success: true
}

รวมสื่อเผยแพร่หลายรายการ

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

คุณสามารถรวมสื่อเผยแพร่หลายรายการสำหรับการลิงก์การสมัครใช้บริการพร้อมกันได้โดยส่งออบเจ็กต์เป็นอาร์กิวเมนต์ไปยังฟังก์ชัน linkSubscriptions พร็อพเพอร์ตี้ linkTo เป็นอาร์เรย์ของออบเจ็กต์ ซึ่งแต่ละออบเจ็กต์แสดง publicationId ที่เฉพาะเจาะจงและ publisherProvidedId (PPID) ที่เกี่ยวข้องที่จะลิงก์

const result = await subscriptions.linkSubscriptions({linkTo: [
  { publicationId: 'pubId1', publisherProvidedId: 'ppid1' },
  { publicationId: 'pubId2', publisherProvidedId: 'ppid2' },
  …
]});

ตัวอย่างการตอบกลับ (อินเทอร์เฟซ)

ฟิลด์ anyFailure (บูลีน) และ anySuccess (บูลีน) จะระบุว่ามีความล้มเหลวหรือสำเร็จในการพยายามลิงก์การสมัครใช้บริการแบบรวมหรือไม่ ฟิลด์ links มีรายละเอียดผลลัพธ์สำหรับสื่อเผยแพร่แต่ละรายการ

การลิงก์กับสื่อเผยแพร่ทั้งหมดสำเร็จ
{
  "anyFailure": false,
  "anySuccess": true,
  "links": [{
    "publicationId": "CAowqfCKCw",
    "publisherProvidedId": "370720",
    "success": true
  },
  {
    "publicationId": "CAow5rTUCw",
    "publisherProvidedId": "171385",
    "success": true
  }]
}

{
  "anyFailure": true,
  "anySuccess": true,
  "links": [{
    "publicationId": "CAowqfCKCw",
    "publisherProvidedId": "370720",
    "success": false
  },
  {
    "publicationId": "CAow5rTUCw",
    "publisherProvidedId": "171385",
    "success": true
  }]
}

ตัวอย่างฝั่งไคลเอ็นต์ที่สมบูรณ์สำหรับ linkSubscription

<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 ที่กำหนดค่าไว้ใน Publisher Center แล้วเพื่อใช้กับ swg.js

  • หากการเรียก JavaScript ฝั่งไคลเอ็นต์สำหรับการลิงก์การสมัครใช้บริการมาจากชื่อโดเมนที่ตรวจสอบแล้วก่อนหน้านี้ คุณไม่จำเป็นต้องดำเนินการใดๆ
  • หาก JavaScript ทำงานจากชื่อโดเมนใหม่ ให้ทำตาม วิธีการกำหนดค่ารหัสไคลเอ็นต์ OAuth ของ SwG

การทดสอบ

หากต้องการทดสอบการติดตั้งใช้งานฝั่งไคลเอ็นต์ของการลิงก์การสมัครใช้บริการ คุณต้องเรียกใช้โค้ดจากเซิร์ฟเวอร์ที่มีต้นทางของ JavaScript ที่ได้รับอนุญาต

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

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

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

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

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