Referencia de la API de componentes que no son de AMP

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

En esta página de referencia, se describe cómo cargar iframe intermedio en páginas HTML.

Cargar la biblioteca intermedia de Iframe de JavaScript

Coloca el siguiente fragmento de código en cualquier página HTML que quieras que Google One presione para mostrar:

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

API de HTML

Puedes cargar el iframe intermedio si incluyes un elemento HTML con el atributo de ID establecido en g_id_intermediate_iframe. Consulta el siguiente fragmento de código de ejemplo:

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

Elemento con ID "g_id_intermediate_iframe"

Puedes colocar los atributos de datos de iframe intermedios en elementos visibles o invisibles, como <div> y <span>. El único requisito es que el ID del elemento se establezca en g_id_intermediate_iframe. No coloques este ID en varios elementos.

En la siguiente tabla, se enumeran los atributos de datos con sus descripciones:

Atributo
data-src El URI de tu iframe intermedio One Tap
data-done Método de devolución de llamada de JavaScript que se activa cuando finaliza la UX de One Tap.

datos-src

Este atributo es el URI de tu iframe intermedio de One Tap. Consulta la siguiente tabla para obtener más información:

Tipo Obligatorio Ejemplo
string data-src="https://example.com/onetap_iframe.html"

datos listos

Este atributo es un método de devolución de llamada de JavaScript que se activará cuando finalice la UX de One Tap.

De forma predeterminada, la página del contenido se volverá a cargar cuando finalice la UX de One Tap. Puedes anular el comportamiento predeterminado si proporcionas tu propia devolución de llamada realizada. Consulta la siguiente tabla para obtener más información:

Tipo Obligatorio Ejemplo
Function Opcional data-done="onOneTapSuccess"

API de JavaScript

Puedes cargar el iframe intermedio llamando a un método de JavaScript.

Método: google.accounts.id.initializeIntermediate

El método google.accounts.id.initializeIntermediate carga el iframe intermedio según el objeto de configuración. Consulta el siguiente ejemplo de código del método:

google.accounts.id.initializeIntermediate(IntermediateConfig)

En el siguiente ejemplo de código, se implementa el método google.accounts.id.initializeIntermediate con una función onload:

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

Tipo de datos: IntermediateConfig

En la siguiente tabla, se enumeran los campos con sus descripciones:

Campo
src El URI de tu iframe intermedio One Tap
done Es un método de devolución de llamada de JavaScript que se activa cuando la experiencia de usuario de One Tap es única.

src

Este campo es el URI de tu iframe intermedio de One Tap. Consulta la siguiente tabla para obtener más información:

Tipo Obligatorio Ejemplo
string src: "https://example.com/onetap_iframe.html"

listo

Este campo es el método de devolución de llamada de JavaScript que se activará cuando finalice la UX de One Tap.

De forma predeterminada, la página del contenido se volverá a cargar cuando finalice la UX de One Tap. Puedes anular el comportamiento predeterminado si proporcionas tu propia devolución de llamada realizada. Consulta la siguiente tabla para obtener más información:

Tipo Obligatorio Ejemplo
Function Opcional done: onOneTapSuccess