用戶端 JavaScript

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

使用訂閱連結時,用戶端 JavaScript 是僅在 PPID 和讀者的 Google 帳戶之間建立新關聯的唯一方法。在設定好的頁面中,讀者會看到對話方塊,要求他們連結訂閱項目。讀者按一下「Continue with Google」按鈕後,就能選擇要連結的帳戶,並在完成時返回設定好的頁面。

使用 swg.js 中的 linkSubscription 方法,即可將 PPID 和讀者的帳戶建立關聯。使用方式與先前的帳戶連結功能 (範例) 類似,但這個方法接受包含 PPID 的物件,而不是傳遞承諾。

程式碼示例

以下用戶端程式碼範例說明如何啟動連結、有效的回應外觀,以及 (選擇性) 如何使用 swg.js 事件管理工具監聽數據分析事件,並據此轉送事件。

啟動訂閱連結對話方塊

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

回應範例

成功已連結帳戶產生的有效回應包含連結中使用的 PPID 和布林值 success 狀態。

console.log(result) //{publisherProvidedId: 6789, success: true}

訂閱連結不需要使用第三方 Cookie,也不需要為讀者啟用有效的 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 用戶端 ID

雖然訂閱連結不需要 OAuth 用戶端,但您可以使用 OAuth 用戶端,為專案授予授權網域的許可清單。授權網域是允許用戶端 JavaScript 發出呼叫的網域清單。您的出版品可能已在新聞發布者中心設定 OAuth 用戶端 ID,可與 swg.js 搭配使用。

  • 如果您的訂閱連結用戶端 JavaScript 呼叫來自先前已驗證的網域名稱,則無須採取任何行動。
  • 如果您的 JavaScript 是透過新網域名稱執行,請按照 SwG OAuth 用戶端 ID 設定操作說明進行。

測試

為了測試訂閱連結的用戶端實作,這段程式碼必須透過具備已授權 JavaScript 來源的伺服器執行。

  1. 在實際工作環境中,授權來源的來源可以是已設定的 OAuth 用戶端,或是新聞發布者中心內發布設定中的已驗證網域清單。
  2. 為了進行開發或暫存用途,使用無法驗證的網域 (例如 localhost 或非公開伺服器),網域必須列在已設定的 OAuth 用戶端中。

排解錯誤

測試用戶端 JavaScript 時,最常見的問題是在嘗試執行 JavaScript 時收到 403 - Not Authorized 錯誤。如要解決這個問題,請確認您是在新聞發布者中心內驗證的網域執行 JavaScript,或者執行程式碼的主機位於已連結 OAuth 用戶端的授權 js 來源。