連結使用者帳戶 (用戶端 JavaScript)

要求訂閱者連結訂閱方案的對話方塊示例

透過訂閱連結，您只能使用用戶端 JavaScript，在 PPID 和讀者的 Google 帳戶之間建立新的關聯。在設定的頁面上，系統會顯示對話方塊，要求讀者連結訂閱項目。讀者點選「使用 Google 繼續」按鈕後，即可選擇要連結的帳戶，完成後系統會將他們送回設定的頁面。

訂閱連結功能不需要使用第三方 Cookie，也不需要讀者處於有效的 Google 工作階段。這項彈性功能可讓讀者隨時啟動連結程序，而不僅限於購買後。如果讀者未登入 Google 帳戶，系統會在流程中提供登入選項。

程式碼範例

這些用戶端程式碼範例說明如何啟動連結、有效回應的樣貌，以及 (選擇性) 如何使用 swg.js eventManager 監聽及相應地轉送 Analytics 事件。

如要將 PPID 與單一出版物的讀者帳戶建立關聯，請使用 swg.js 中的 linkSubscription 方法。使用方式與先前的帳戶連結功能 (範例) 類似，但方法會接受包含 PPID 的物件，而不是傳遞 Promise。

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 用戶端 ID

雖然訂閱連結不需要 OAuth 用戶端，但您可以使用 OAuth 用戶端，為專案製作授權網域的允許清單。授權網域清單列出允許用戶端 JavaScript 發出呼叫的網域。您的出版品可能已在 Publisher Center 設定 OAuth 用戶端 ID，供 swg.js 使用。

  • 如果您的 Subscription Linking 用戶端 JavaScript 呼叫來自先前驗證的網域名稱，則無須採取任何行動。
  • 如果 JavaScript 是從新的網域名稱執行，請按照 SwG OAuth 用戶端 ID 設定說明操作。

測試

如要測試訂閱連結的用戶端實作，必須從具有授權 JavaScript 來源的伺服器執行程式碼。

  1. 如要用於正式環境，授權來源可來自已設定的 OAuth 用戶端，或 Publisher Center 內發布設定中的已驗證網域清單。
  2. 如要用於開發或測試，且網域無法驗證 (例如 localhost 或非公開伺服器)，則網域必須列在已設定的 OAuth 用戶端中。

排解錯誤

測試用戶端 JavaScript 時，最常見的問題是嘗試執行 JavaScript 時收到 403 - Not Authorized 錯誤。如要解決這個問題，請確認您是從 Publisher Center 中經過驗證的網域執行 JavaScript，或是從連結的 OAuth 用戶端授權 JavaScript 來源中的主機執行程式碼。

下一步

恭喜您完成用戶端 JavaScript 整合。現在可以繼續進行伺服器端整合。這是同步處理讀者權益的必要步驟。實作並使用必要的伺服器端 UpdateReaderEntitlements 函式後，系統就會為合適的訂閱者醒目顯示正確的文章。