Інтеграція DaData для підказок адрес на сайті

Інтеграція сервісу DaData для підказок адрес на сайті

Зауважимо: коли користувач вводить адресу у форму на сайті, кожна секунда на вагу золота. Погано працюючий пошук — одна з головних причин відмови від замовлення. Ми стикалися з проектами, де через відсутність автодоповнення до 20% клієнтів йшли, не заповнивши кошик. DaData — російський сервіс стандартизації та збагачення даних — вирішує цю проблему за кілька годин. Головна функція — підказки при введенні адреси: користувач починає вводити вулицю, а поле автоматично пропонує варіанти з повною адресною структурою. Крім того, DaData вміє виправляти помилки та повертати нормалізовану адресу з координатами.

Чому підказки адрес критичні для конверсії?

Форми доставки — вузьке місце будь-якого інтернет-магазину. Якщо користувач вручну вводить місто, вулицю, будинок, квартиру, індекс, ймовірність помилки та відмови зростає. За нашими даними, після підключення DaData конверсія в оформлення замовлення зростає на 15–25%. Сервіс не просто показує варіанти — він структурує адресу на рівні API: окремо місто, вулиця, будинок, квартира, поштовий індекс. Це позбавляє від N+1 запитів на геокодування та прискорює завантаження сторінки.

Як DaData виправляє помилки в адресах?

DaData використовує власні алгоритми нечіткого пошуку та базу ФІАС. Якщо користувач ввів "Київ, Хрещатик, 15", сервіс знайде точну адресу і поверне структуровані дані: місто, вулицю, будинок, індекс та координати. Згідно з документацією DaData, точність підказок перевищує 99%. Для адрес низької якості повертається код якості qc — від 0 (точний збіг) до 3 (потребує уточнення). Ми налаштовуємо fallback-логіку: якщо qc > 1, запитуємо підтвердження у користувача.

Проблеми, які вирішуємо

• Некоректні адреси. Вручну введений "Київ, Хрещатик, 15" може перетворитися на "Київ, вул. Хрещатик, буд. 15" після стандартизації. DaData вміє чистити адреси на сервері і повертати єдиний формат з координатами. За нашими оцінками, втрати від некоректних адрес сягають 15% виручки. Для інтернет-магазину з середньомісячним обігом 1 млн грн це 150 000 грн втраченого прибутку щомісяця.
• Дублювання запитів. Без debounce кожен символ викликає API — легко отримати 10 запитів за секунду. Ми використовуємо lodash.debounce із затримкою 300 мс, що знижує навантаження на сервер у 5–7 разів.
• Гібрид SSR/CSR. На сайтах з Next.js підказки вводимо як клієнтський компонент (use client), щоб уникнути гідратації mismatch. Серверна стандартизація — через API route.
• Складність серверної інтеграції. Багато хто обмежується клієнтським віджетом, забуваючи про очистку на бекенді. Ми підключаємо обидва канали: підказки на фронті та стандартизацію на сервері, наприклад, на Laravel.

Як ми це робимо: реактивний компонент з нуля

Пишемо кастомний React-компонент без jQuery, з повним контролем над стилями та станом. Ось приклад з обробкою помилок та доступністю:

import React, { useState, useCallback } from 'react'; import debounce from 'lodash/debounce'; function AddressSuggest({ onSelect }) { const [suggestions, setSuggestions] = useState([]); const [error, setError] = useState(null); const fetchSuggestions = useCallback( debounce(async (query) => { if (query.length < 3) return; setError(null); try { const res = await fetch( 'https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest/address', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Token ${process.env.NEXT_PUBLIC_DADATA_KEY}` }, body: JSON.stringify({ query, count: 5 }) } ); if (!res.ok) throw new Error('Сервер недоступний'); const data = await res.json(); setSuggestions(data.suggestions); } catch (err) { setError(err.message); setSuggestions([]); } }, 300), [] ); return ( <div role="combobox" aria-expanded={suggestions.length > 0}> <input onChange={e => fetchSuggestions(e.target.value)} placeholder="Почніть вводити адресу" aria-autocomplete="list" /> {error && <div role="alert">{error}</div>} {suggestions.length > 0 && ( <ul role="listbox"> {suggestions.map(s => ( <li key={s.value} role="option" onClick={() => { onSelect(s); setSuggestions([]); }} onKeyDown={e => { if (e.key === 'Enter') { onSelect(s); setSuggestions([]); }}} tabIndex={0} > {s.value} </li> ))} </ul> )} </div> ); } 

Серверна стандартизація адреси

Окрім підказок, DaData вміє стандартизувати адресу на сервері — привести довільний текст до структурованого вигляду. Це корисно при імпорті старих баз або обробці замовлень через кол-центр. Приклад на Laravel:

$response = Http::withHeaders([ 'Authorization' => 'Token ' . env('DADATA_API_KEY'), 'X-Secret' => env('DADATA_SECRET') ])->post('https://cleaner.dadata.ru/api/v1/clean/address', [ 'Київ Хрещатик 15' ])->json(); $address = $response[0]; // $address['city'] = 'Київ' // $address['street'] = 'Хрещатик' // $address['house'] = '15' // $address['geo_lat'], $address['geo_lon'] — координати // $address['qc'] — код якості (0 = точна адреса, 3 = потребує уточнення) 

Процес роботи: покроково

1. Аналітика: визначаємо поля, отримуємо API-ключ, уточнюємо квоти (2-3 години).
2. Проектування: обираємо підхід — jQuery-віджет для простих форм або кастомний React/Vue-компонент для складних інтерфейсів (4-6 годин).
3. Реалізація: інтегруємо підказки на фронті + серверна очистка, пишемо тести (8-16 годин).
4. Тестування: перевіряємо на мобільних пристроях, обробляємо помилки, проводимо навантажувальне тестування (3-4 години).
5. Деплой: налаштування CI/CD, моніторинг, передача документації (1-2 години).

Зауважимо: що ми передаємо: документацію по API, скрипти міграції, доступ до репозиторію, інструкцію для розробника.

Порівняння: DaData vs ручне введення

DaData справляється з автозаповненням у 10 разів швидше, ніж ручне введення (2-3 секунди проти 20-30). Помилки знижуються з 10-30% до менше 1%. Крім того, DaData надає код якості та геодані, що неможливо при ручному введенні.

Інші функції DaData

• Підказки ПІБ — type: "NAME", розбиває на ім'я/прізвище/по батькові. Використовуємо для форм реєстрації.
• Підказки організацій — type: "PARTY", пошук за ЄДРПОУ або назвою зі збагаченням з ЄДР. Для B2B-порталів — must have.
• Банки — type: "BANK", пошук за МФО з автозаповненням реквізитів.
• Email-стандартизація — виправляє помилки в доменах (gmial.com → gmail.com).

Як замовити інтеграцію

Ми працюємо з DaData понад 5 років — реалізували більше 15 проектів для інтернет-магазинів та CRM. Гарантуємо стабільність під навантаженням до 10 000 запитів/хв. Оцінимо ваш проект за 1 день: напишіть, скільки полів потрібно, на якому стеку працює сайт. Термін встановлення — від 1 до 3 днів. Вартість розраховується індивідуально під ваші завдання. Отримайте консультацію — ми підберемо оптимальне рішення.