中間 iframe API リファレンス

このリファレンス ページでは、iframe を使用してウェブページにワンタップ プロンプトを埋め込むために使用される中間 iframe API について説明します。

中間 iframe の操作について詳しくは、iframe を使用してワンタップを統合するをご覧ください。

中間 iframe JavaScript ライブラリを読み込む

Google One タップを表示する HTML ページに次のコード スニペットを配置します。

<script src="https://accounts.google.com/gsi/intermediate"></script>

HTML API

ID 属性が g_id_intermediate_iframe に設定された HTML 要素を含めることで、中間 iframe を読み込むことができます。次のサンプルコード スニペットをご覧ください。

<script src="https://accounts.google.com/gsi/intermediate"></script>
<div id="g_id_intermediate_iframe"
     data-src="https://example.com/onetap_iframe.html">
</div>

ID「g_id_intermediate_iframe」を持つ要素

中間 iframe のデータ属性は、<div> や <span> などの表示可能な要素または非表示の要素に配置できます。唯一の要件は、要素 ID が g_id_intermediate_iframe に設定されていることです。この ID を複数の要素に設定しないでください。

次の表に、データ属性とその説明を示します。

data-src

この属性は、ワンタップの中間 iframe の URI です。詳しくは、次の表をご覧ください。

data-done

この属性は、ワンタップ UX が完了したときにトリガーされる JavaScript コールバック メソッドです。

デフォルトでは、ワンタップ UX が完了するとコンテンツ ページが再読み込みされます。独自の完了コールバックを指定することで、デフォルトの動作をオーバーライドできます。詳しくは、次の表をご覧ください。

JavaScript API

中間 iframe は、JavaScript メソッドを呼び出すことで読み込むことができます。

メソッド: google.accounts.id.initializeIntermediate

google.accounts.id.initializeIntermediate メソッドは、構成オブジェクトに基づいて中間 iframe を読み込みます。メソッドの次のコード例をご覧ください。

google.accounts.id.initializeIntermediate(IntermediateConfig)

次のコード例では、onload 関数を使用して google.accounts.id.initializeIntermediate メソッドを実装しています。

<script>
  window.onload = function () {
    google.accounts.id.initializeIntermediate({
      src: 'https://example.com/intermediate'
    });
  };
</script>

データ型: IntermediateConfig

次の表に、フィールドとその説明を示します。

src

このフィールドは、ワンタップの中間 iframe の URI です。詳しくは、次の表をご覧ください。

完了

このフィールドは、ワンタップ UX が完了したときにトリガーされる JavaScript コールバック メソッドです。

デフォルトでは、ワンタップ UX が完了するとコンテンツ ページが再読み込みされます。独自の完了コールバックを指定することで、デフォルトの動作をオーバーライドできます。詳しくは、次の表をご覧ください。