> ## 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.

# Google Address Autocomplete в квиз-воронках

> Подключите Google Address Autocomplete в LanderLab, чтобы показывать подсказки адресов при вводе и собирать точные адреса в формах и квизах.

> Добавьте Google Address Autocomplete на свои лендинги в LanderLab, чтобы показывать подсказки адресов в реальном времени по мере ввода — так поля адреса заполняются быстрее и точнее.

## Что такое Google Address Autocomplete?

Google Address Autocomplete использует Google Places API, чтобы показывать подсказки адресов в реальном времени, когда посетитель начинает вводить текст в поле адреса. Вместо того чтобы вводить адрес целиком вручную, посетитель может выбрать нужный вариант из списка подсказок — это ускоряет заполнение формы и снижает число опечаток.

Чтобы использовать эту функцию в LanderLab, нужно сделать две вещи:

1. Добавить блок **Google Address Autocomplete Input** в квиз или форму в редакторе
2. Подключить свой **Google Places API Key** через панель интеграций

Без обоих шагов подсказки адресов не появятся.

<Note>
  После добавления интеграции Google Address Autocomplete она сохраняется **глобально** в вашем аккаунте. Вы можете использовать её на нескольких лендингах, не вводя данные повторно.
</Note>

***

## Часть 1. Добавьте блок с автодополнением

Сначала добавьте специальное поле для ввода адреса на шаг квиза или формы, где хотите собирать адрес.

<Steps>
  <Step title="Откройте редактор квиза">
    Откройте лендинг с квиз-воронкой и перейдите в **Quiz Editor**.
  </Step>

  <Step title="Перейдите к шагу с адресом">
    Перейдите на шаг, где хотите собирать адрес посетителя.
  </Step>

  <Step title="Добавьте блок">
    Нажмите **Add Block**, найдите **Google Address Autocomplete Input** и перетащите его на шаг квиза.
  </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="Блок Google Address Autocomplete Input, добавленный на шаг квиза в редакторе" width="1920" height="988" data-path="images/google-address-autocomplete.png" />
</Frame>

Так поле готовится к получению подсказок адресов. Сами подсказки появятся, только когда вы подключите Google Places API Key на части 2.

***

## Часть 2. Подключите Google Places API Key

После добавления блока подключите Google Places API Key через панель интеграций.

<Steps>
  <Step title="Откройте свой лендинг">
    Перейдите в **Landing Pages** и нажмите на **название лендинга**, на котором хотите включить автодополнение адреса.
  </Step>

  <Step title="Откройте вкладку Integrations">
    Нажмите **Add Integration**, чтобы открыть панель интеграций.
  </Step>

  <Step title="Выберите Google Address Autocomplete">
    В списке доступных интеграций найдите **Google Address Autocomplete** и нажмите на неё. Появится форма настройки.
  </Step>

  <Step title="Заполните обязательные поля">
    Введите следующие данные:

    | Поле | Описание |
    | :- | :- |
    | **Name** | Название этой интеграции (например, «Google Address Autocomplete»). Поможет узнать её при повторном использовании на других страницах. |
    | **API Key** | Ваш Google Places API Key из Google Cloud Console. |

    <Tip>
      Если у вас ещё нет ключа, смотрите раздел «Как получить Google Places API Key» ниже.
    </Tip>
  </Step>

  <Step title="Сохраните и опубликуйте">
    Нажмите **Add Google Address Autocomplete**, чтобы сохранить интеграцию, затем нажмите **Publish** или **Republish**. Подсказки адресов будут появляться в реальном времени, пока посетитель вводит текст в поле адреса.
  </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="Ввод Google Places API Key в форме интеграции" width="1920" height="990" data-path="images/google-api.png" />
</Frame>

***

## Подключение к другому лендингу

Поскольку интеграции Google Address Autocomplete сохраняются глобально, создавать новую для каждого лендинга не нужно.

<Steps>
  <Step title="Откройте другой лендинг">
    Перейдите в **Landing Pages** и нажмите на название лендинга, где хотите использовать ту же интеграцию.
  </Step>

  <Step title="Добавьте интеграцию">
    Нажмите **Add Integration**. Вы увидите список ранее сохранённых конфигураций Google Address Autocomplete. Выберите ту, которую хотите подключить.
  </Step>

  <Step title="Выберите варианты (если применимо)">
    Если у лендинга несколько **вариантов A/B-теста**, появится окно с вопросом, какие варианты должны использовать эту интеграцию. Выберите нужные варианты и подтвердите выбор.
  </Step>

  <Step title="Сохраните и опубликуйте">
    Нажмите **Save**, затем **Publish** или **Republish**, чтобы активировать автодополнение адреса на выбранных вариантах.
  </Step>
</Steps>

***

## Как получить Google Places API Key

Если у вас ещё нет Google Places API Key, создайте его в Google Cloud Console по этим шагам.

<Steps>
  <Step title="Откройте Google Cloud Console">
    Перейдите на [console.cloud.google.com](https://console.cloud.google.com) и войдите в аккаунт Google.
  </Step>

  <Step title="Создайте или выберите проект">
    Нажмите **Select a Project** в верхней части страницы и выберите существующий проект или нажмите **New Project**, чтобы создать новый.
  </Step>

  <Step title="Включите Places API">
    1. Откройте **APIs and Services** в левом меню.
    2. Нажмите **Library**.
    3. Найдите **Places API**.
    4. Откройте его и нажмите **Enable**.
  </Step>

  <Step title="Создайте API Key">
    1. Откройте **APIs and Services > Credentials**.
    2. Нажмите **+ Create Credentials** и выберите **API Key**.
    3. Скопируйте созданный API-ключ и вставьте его в поле **API Key** в LanderLab.
  </Step>

  <Step title="Ограничьте API Key (рекомендуется)">
    Чтобы ключ не могли использовать без вашего ведома, настройте ограничения в настройках ключа:

    * В разделе **API restrictions** выберите **Places API**, чтобы ключ можно было использовать только для автодополнения адреса.
    * В разделе **Application restrictions** выберите **HTTP referrers (websites)** и добавьте домен вашего лендинга.

    Так ваш API-ключ не смогут использовать другие сайты и сервисы.
  </Step>
</Steps>

<Warning>
  Для работы Places API Google требует **подключённого биллинга** в вашем проекте Google Cloud. Однако Google даёт **бесплатный кредит на \$200 в месяц**, чтобы хватит для большинства сценариев автодополнения адреса на лендингах.
</Warning>

***

## Советы по Google Address Autocomplete

* **Нужны оба шага** — если добавить блок без подключения API Key (или наоборот), вы получите обычное текстовое поле без подсказок. Выполните и часть 1, и часть 2.
* **Публикуйте после подключения** — подсказки не появятся на опубликованной странице, пока вы не опубликуете её повторно после добавления интеграции.
* **Ограничьте API-ключ** — ключ без ограничений может использовать любой, кто его найдёт. Всегда настраивайте ограничения по API и домену в Google Cloud Console, чтобы защитить потребление и биллинг.
* **Биллинг нужен, но обычно бесплатен** — биллинг в проекте Google Cloud нужно включить, но бесплатного кредита Google на \$200 в месяц хватит для почти всех лендингов — если у вас не очень большой объём трафика.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.