クライアント側の JavaScript

購読をリンクするよう購読者に求めるダイアログの例

購読のリンクにおいて、PPID と読者の Google アカウントの関連付けを新規作成する唯一の方法は、クライアントサイド JavaScript です。構成済みのページで、購読をリンクするよう求めるダイアログが読者に表示されます。読者が [Google で続ける] ボタンをクリックすると、リンクするアカウントを選択できます。完了すると、構成済みのページに戻ります。

PPID の読者アカウントとの関連付けは、swg.js の linkSubscription メソッドを使用して行います。これまでのアカウント リンク機能()での使い方と似ていますが、Promise を渡す代わりに、このメソッドは PPID を含むオブジェクトを受け取ります。

サンプルコード

以下のクライアントサイド コード例は、リンクを開始する方法、有効なレスポンスの内容、および swg.js eventManager を使用して分析イベントをリッスンし、ルーティングする方法(オプション)を示しています。

購読のリンクのダイアログを開始する

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 を呼び出せるドメインのリストです。パブリケーションには、swg.js で使用するためにパブリッシャー センターで構成された OAuth クライアント ID がすでに指定されている可能性があります。

  • 購読のリンクのクライアントサイド JavaScript を、以前に確認したドメイン名から呼び出す場合、特に対応は必要ありません。
  • 新しいドメイン名から JavaScript を実行する場合は、SwG OAuth クライアント ID の構成手順を実施します。

テスト

購読のリンクのクライアントサイド実装をテストするには、承認済みの JavaScript オリジンのサーバーからコードを実行する必要があります。

  1. 本番環境で使用する場合、承認済みのオリジンは、構成済みの OAuth クライアントか、パブリッシャー センターのパブリケーションに設定されている確認済みドメインのリストから取得されます。
  2. 開発またはステージングで未確認のドメイン(localhost、非公開サーバーなど)を使用する場合は、構成済みの OAuth クライアントにドメインがリストされている必要があります。

エラーのトラブルシューティング

クライアントサイド JavaScript のテストでよくある問題は、JavaScript を実行しようとした際に 403 - Not Authorized エラーが発生することです。この問題を解決するには、パブリッシャー センターで検証済みのドメインから JavaScript を実行するか、リンクされた OAuth クライアントの承認済み JS オリジンのホストでコードを実行するようにします。