> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Usa Google Address Autocomplete en tus embudos de quiz

> Activa Google Address Autocomplete en tus landing pages de LanderLab para agilizar el rellenado de formularios, reducir errores y recoger direcciones precisas de tus visitantes.

> Añade Google Address Autocomplete a tus landing pages en LanderLab para mostrar sugerencias de direcciones en tiempo real mientras los visitantes escriben, y conseguir que los campos de dirección se rellenen más rápido y con más precisión.

## Qué es Google Address Autocomplete

Google Address Autocomplete usa la API de Google Places para mostrar sugerencias de direcciones en tiempo real en cuanto un visitante empieza a escribir en un campo de dirección. En lugar de escribir toda su dirección a mano, el visitante puede elegir entre una lista de sugerencias coincidentes, lo que agiliza el formulario y reduce los errores al escribir.

Para usar esta función en LanderLab, tienes que hacer dos cosas:

1. Añadir el **bloque Google Address Autocomplete Input** a tu quiz o formulario en el editor
2. Conectar tu **API Key de Google Places** desde el panel de integraciones

Los dos pasos son necesarios para que aparezcan las sugerencias de autocompletado.

<Note>
  Cuando añades una integración de Google Address Autocomplete, se guarda de forma **global** en tu cuenta. Puedes reutilizarla en varias landing pages sin volver a introducir los datos.
</Note>

***

## Parte 1: añade el bloque de autocompletado

Primero, añade el campo de dirección especializado al paso del quiz o formulario en el que quieres recoger la dirección.

<Steps>
  <Step title="Abre el editor del quiz">
    Abre la landing page que contiene tu embudo de quiz y entra en el **editor del quiz**.
  </Step>

  <Step title="Ve al paso de la dirección">
    Ve al paso en el que quieres recoger la dirección del visitante.
  </Step>

  <Step title="Añade el bloque">
    Haz clic en **Add Block**, busca **Google Address Autocomplete Input** y arrástralo a tu paso del quiz.
  </Step>
</Steps>

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/hQLLLMPAbDBPhaNj/images/google-address-autocomplete.png?fit=max&auto=format&n=hQLLLMPAbDBPhaNj&q=85&s=52f620d1dce4d0e4c94c5682fd61e326" alt="Bloque Google Address Autocomplete Input en el editor del quiz" width="1920" height="988" data-path="images/google-address-autocomplete.png" />
</Frame>

Así el campo queda preparado para recibir sugerencias de direcciones. Las sugerencias no aparecerán hasta que conectes tu API Key de Google Places en la parte 2.

***

## Parte 2: conecta tu API Key de Google Places

Cuando hayas añadido el bloque, conecta tu API Key de Google Places desde el panel de integraciones.

<Steps>
  <Step title="Ve a tu landing page">
    Ve a **Landing Pages** y haz clic en el **nombre de la landing page** en la que quieres activar el autocompletado de direcciones.
  </Step>

  <Step title="Abre la pestaña de integraciones">
    Haz clic en **Add Integration** para abrir el panel de integraciones.
  </Step>

  <Step title="Selecciona Google Address Autocomplete">
    En la lista de integraciones disponibles, busca **Google Address Autocomplete** y haz clic en él. Aparecerá un formulario de configuración.
  </Step>

  <Step title="Rellena los campos obligatorios">
    Introduce estos datos:

    | Campo       | Descripción                                                                                                                                                |
    | :---------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
    | **Name**    | Una etiqueta para identificar esta integración (por ejemplo, "Google Address Autocomplete"). Te ayuda a reconocerla cuando la reutilices en otras páginas. |
    | **API Key** | Tu API Key de Google Places de la consola de Google Cloud.                                                                                                 |

    <Tip>
      Si todavía no has creado una, consulta más abajo la sección **Cómo conseguir una API Key de Google Places**.
    </Tip>
  </Step>

  <Step title="Guarda y publica">
    Haz clic en **Add Google Address Autocomplete** para guardar la integración y después usa **Publish** o **Republish** en tu landing page. A partir de ese momento aparecerán sugerencias de direcciones en tiempo real cuando los visitantes escriban en el campo de dirección.
  </Step>
</Steps>

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/hQLLLMPAbDBPhaNj/images/google-api.png?fit=max&auto=format&n=hQLLLMPAbDBPhaNj&q=85&s=25fe80c95ecdb83ad6387c5c2a843ee1" alt="Formulario de configuración de Google Address Autocomplete con el campo API Key" width="1920" height="990" data-path="images/google-api.png" />
</Frame>

***

## Conéctalo a otra landing page

Como las integraciones de Google Address Autocomplete se guardan de forma global, no tienes que crear una nueva para cada landing page.

<Steps>
  <Step title="Abre otra landing page">
    Ve a **Landing Pages** y haz clic en el nombre de la landing page en la que quieres usar la misma integración.
  </Step>

  <Step title="Añade la integración">
    Haz clic en **Add Integration**. Verás las configuraciones de Google Address Autocomplete que guardaste antes. Selecciona la que quieres conectar.
  </Step>

  <Step title="Selecciona las variantes (si procede)">
    Si tu landing page tiene varias **variantes de un test A/B**, aparecerá una ventana para que elijas qué variantes deben usar esta integración. Selecciona las variantes que quieras y confirma.
  </Step>

  <Step title="Guarda y publica">
    Haz clic en **Save** y después usa **Publish** o **Republish** en tu landing page para activar el autocompletado de direcciones en las variantes seleccionadas.
  </Step>
</Steps>

***

## Cómo conseguir una API Key de Google Places

Si todavía no tienes una API Key de Google Places, sigue estos pasos para crearla en la consola de Google Cloud.

<Steps>
  <Step title="Abre la consola de Google Cloud">
    Ve a [console.cloud.google.com](https://console.cloud.google.com) e inicia sesión con tu cuenta de Google.
  </Step>

  <Step title="Crea o selecciona un proyecto">
    Haz clic en **Select a Project** en la parte superior de la página y elige un proyecto existente o haz clic en **New Project** para crear uno.
  </Step>

  <Step title="Activa la API de Places">
    1. Ve a **APIs and Services** en la barra lateral izquierda.
    2. Haz clic en **Library**.
    3. Busca **Places API**.
    4. Haz clic en ella y después en **Enable**.
  </Step>

  <Step title="Crea una API Key">
    1. Ve a **APIs and Services > Credentials**.
    2. Haz clic en **+ Create Credentials** y selecciona **API Key**.
    3. Copia la clave de API generada y pégala en el campo **API Key** de LanderLab.
  </Step>

  <Step title="Restringe tu API Key (recomendado)">
    Para evitar el uso no autorizado de tu clave, aplica restricciones en los ajustes de la clave de API:

    * En **API restrictions**, selecciona **Places API** para que la clave solo se pueda usar para el autocompletado de direcciones.
    * En **Application restrictions**, selecciona **HTTP referrers (websites)** y añade el dominio de tu landing page.

    Así te aseguras de que otros sitios o servicios no puedan usar tu clave de API.
  </Step>
</Steps>

<Warning>
  Google exige tener la **facturación activada** en tu proyecto de Google Cloud para usar la API de Places. Aun así, Google ofrece **200 \$ de crédito gratuito al mes**, más que suficiente para la mayoría de los usos de autocompletado de direcciones en landing pages.
</Warning>

***

## Consejos para Google Address Autocomplete

* **Los dos pasos son necesarios**: si añades el bloque sin conectar la API Key (o al revés), tendrás un campo de texto normal sin sugerencias. Asegúrate de completar la parte 1 y la parte 2.
* **Publica después de conectar**: las sugerencias de autocompletado no aparecerán en tu página en vivo hasta que vuelvas a publicarla después de añadir la integración.
* **Restringe tu clave de API**: cualquiera que encuentre una clave sin restricciones puede usarla. Aplica siempre restricciones de API y de dominio en la consola de Google Cloud para proteger tu uso y tu facturación.
* **La facturación es obligatoria, pero normalmente gratis**: tienes que activar la facturación en tu proyecto de Google Cloud, pero los 200 \$ de crédito gratuito mensual que ofrece Google bastan para casi todos los usos en landing pages, salvo que tengas volúmenes de tráfico muy altos.