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

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

Google Address Autocomplete использует Google Places API, чтобы показывать подсказки адресов в реальном времени, когда посетитель начинает вводить текст в поле адреса. Вместо того чтобы вводить адрес целиком вручную, посетитель может выбрать нужный вариант из списка подсказок — это ускоряет заполнение формы и снижает число опечаток. Чтобы использовать эту функцию в LanderLab, нужно сделать две вещи:
  1. Добавить блок Google Address Autocomplete Input в квиз или форму в редакторе
  2. Подключить свой Google Places API Key через панель интеграций
Без обоих шагов подсказки адресов не появятся.
После добавления интеграции Google Address Autocomplete она сохраняется глобально в вашем аккаунте. Вы можете использовать её на нескольких лендингах, не вводя данные повторно.

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

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

Откройте редактор квиза

Откройте лендинг с квиз-воронкой и перейдите в Quiz Editor.
2

Перейдите к шагу с адресом

Перейдите на шаг, где хотите собирать адрес посетителя.
3

Добавьте блок

Нажмите Add Block, найдите Google Address Autocomplete Input и перетащите его на шаг квиза.
Блок Google Address Autocomplete Input, добавленный на шаг квиза в редакторе
Так поле готовится к получению подсказок адресов. Сами подсказки появятся, только когда вы подключите Google Places API Key на части 2.

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

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

Откройте свой лендинг

Перейдите в Landing Pages и нажмите на название лендинга, на котором хотите включить автодополнение адреса.
2

Откройте вкладку Integrations

Нажмите Add Integration, чтобы открыть панель интеграций.
3

Выберите Google Address Autocomplete

В списке доступных интеграций найдите Google Address Autocomplete и нажмите на неё. Появится форма настройки.
4

Заполните обязательные поля

Введите следующие данные:
Если у вас ещё нет ключа, смотрите раздел «Как получить Google Places API Key» ниже.
5

Сохраните и опубликуйте

Нажмите Add Google Address Autocomplete, чтобы сохранить интеграцию, затем нажмите Publish или Republish. Подсказки адресов будут появляться в реальном времени, пока посетитель вводит текст в поле адреса.
Ввод Google Places API Key в форме интеграции

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

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

Откройте другой лендинг

Перейдите в Landing Pages и нажмите на название лендинга, где хотите использовать ту же интеграцию.
2

Добавьте интеграцию

Нажмите Add Integration. Вы увидите список ранее сохранённых конфигураций Google Address Autocomplete. Выберите ту, которую хотите подключить.
3

Выберите варианты (если применимо)

Если у лендинга несколько вариантов A/B-теста, появится окно с вопросом, какие варианты должны использовать эту интеграцию. Выберите нужные варианты и подтвердите выбор.
4

Сохраните и опубликуйте

Нажмите Save, затем Publish или Republish, чтобы активировать автодополнение адреса на выбранных вариантах.

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

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

Откройте Google Cloud Console

Перейдите на console.cloud.google.com и войдите в аккаунт Google.
2

Создайте или выберите проект

Нажмите Select a Project в верхней части страницы и выберите существующий проект или нажмите New Project, чтобы создать новый.
3

Включите Places API

  1. Откройте APIs and Services в левом меню.
  2. Нажмите Library.
  3. Найдите Places API.
  4. Откройте его и нажмите Enable.
4

Создайте API Key

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

Ограничьте API Key (рекомендуется)

Чтобы ключ не могли использовать без вашего ведома, настройте ограничения в настройках ключа:
  • В разделе API restrictions выберите Places API, чтобы ключ можно было использовать только для автодополнения адреса.
  • В разделе Application restrictions выберите HTTP referrers (websites) и добавьте домен вашего лендинга.
Так ваш API-ключ не смогут использовать другие сайты и сервисы.
Для работы Places API Google требует подключённого биллинга в вашем проекте Google Cloud. Однако Google даёт бесплатный кредит на $200 в месяц, чтобы хватит для большинства сценариев автодополнения адреса на лендингах.

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

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