読者が Google Identity Services（GIS）（別名: Google でログイン）を使用して、サードパーティのウェブサイトやアプリにすばやく安全にログインできるようになります。GIS の主要機能である Google ワンタップを介して、ログインと登録を迅速かつスムーズに行えます。Reader Revenue Manager（RRM）との統合には、主に次の 3 つのメリットがあります。
- マルチプロンプトの調整: ペイウォールやワンタップ ポップアップなど、RRM のプロンプトが調整を行って競合を防ぐため、読者には一度に 1 つのログイン リクエストのみが表示されます。
- 統合ログイン: Google ワンタップが RRM の登録ウォールで使用され、マルチステップのログイン プロセスをワンクリックで行えるようになります。ユーザーのストレスが軽減され、オンボーディングの離脱率を抑えることができます。
- 利用資格の自動付与: RRM が Google ワンタップでログインした読者を自動的に認識します。読者は、定期購読や従量制のコンテンツにすぐにアクセスできます。ニュース メディアは GIS を使用することで RRM プロンプトなしでログインできます。
「Google でログイン」機能を設定する
「Google でログイン」機能と Google ワンタップを初めて利用する場合は、以下のリソースで実装の基本事項をご確認ください。
- Google でログイン: Google Identity Services の概要をご覧ください。
- ボタンを介して「Google でログイン」を実装する: [Google でログイン] ボタンを表示するをご覧ください。
- Google ワンタップを実装する: Google One Tap を表示をご覧ください。
Google ワンタップの使用を開始する手順は次のとおりです。
- OAuth 同意画面を設定するには、設定に記載されている手順に沿って操作します。
- クライアント ID を取得し、クライアント ライブラリを読み込みます。
- Google ワンタップを使用するページにコード スニペットを配置するには、[HTML] または
[JavaScript] を選択します。
- 認証情報のレスポンスを処理するコールバックを設定するには、HTML または JavaScript を使用します。
Publisher Center で登録ウォールを設定する
Publisher Center の新しいガイド付き機能を利用して、「Google でログイン」機能を簡単に統合できます。認証情報の取得とスクリプトのインストールが簡素化されます。
- 設定するには、[Reader Revenue Manager]
[コンテンツ アクセス] をクリックします。
- [読者ファネル]
- ヒント: Enterprise をご利用のニュース メディアでは、[読者ファネル] メニューは [概要] と表示されます。
- [Google でログイン] をオンにします。
[コンテンツ アクセス] をクリックします。- 「Google でログイン」機能を設定するの手順に沿って操作します。
- Google ワンタップが有効であるウェブサイトの URL を貼り付けます。
- [確認] をクリックします。
- [読者登録では、アカウント作成に「Google でログイン」を使用するように設定されています。] というメッセージに変わったことを確認します。
クライアントサイド コードを統合する
Google One Tap API を RRM の読者登録機能と統合するには:
- コード
swg.jsを初期化します。- 標準版の RRM の場合は、コード スニペットをサイトに追加します。
- Enterprise 版をご利用のニュース メディアの場合は、swg.js を組み込んで初期化する方法についての説明をご覧ください。
- パラメータ
rrm-interop / rrmInteropを GIS スニペットに追加します。- プロンプトの競合解消を有効にするには、Google ワンタップの HTML スニペットにパラメータ
rrm-interop='true'を追加するか、JavaScript API に対するrrmInterop: trueを含めます。
- プロンプトの競合解消を有効にするには、Google ワンタップの HTML スニペットにパラメータ
HTML API の例:
JavaScript
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-your_own_param_1_to_login="any_value"
data-your_own_param_2_to_login="any_value"
rrm_interop='true'>
</div>
JavaScript API の例:
JavaScript
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: handleCredentialResponse,
rrmInterop: true,
});