Guida all'implementazione della Registrazione rapida e verificata

Panoramica

Gli utenti si sono abituati a vivere e operare in un mondo digitale in cui praticità, velocità e sicurezza sono aspettative di base. Quando richiedono qualcosa come una carta di credito, un conto bancario o un prestito, si aspettano che la procedura sia rapida e semplice.

Più gli utenti devono digitare o inserire dati duplicati, meno probabilità hai di fidelizzarli come clienti. Creare un'esperienza di registrazione rapida, facile e verificata migliorerà l'esperienza utente e ti aiuterà a mantenere gli utenti sul tuo sito.

L'inserimento manuale degli indirizzi può causare la riduzione delle conversioni, errori nei dati CRM e costosi disguidi nelle consegne. La registrazione rapida e verificata consente di completare la registrazione più velocemente, suggerendo istantaneamente gli indirizzi nelle vicinanze con pochi tocchi e mostrando l'indirizzo inserito per una conferma visiva, aiutando l'utente ad avere la certezza di aver inserito l'indirizzo corretto. La verifica dell'indirizzo dell'utente tramite la sua posizione attuale contribuisce anche alla prevenzione delle attività fraudolente e rafforza la fiducia degli utenti nei tuoi prodotti e servizi. La verifica può anche aumentare la tua fiducia nel fornire immediatamente carte bancarie e di credito virtuali.

Questo argomento fornisce indicazioni di implementazione per creare un'esperienza di registrazione rapida e verificata con Google Maps Platform. Poiché è probabile che gli utenti si registrino su dispositivi mobili, la maggior parte degli esempi di implementazione in questo argomento si concentra su Android. Puoi vedere il codice sorgente completo dell'esempio qui. Puoi anche utilizzare gli SDK per iOS per ottenere gli stessi risultati.

Il seguente diagramma mostra le API di base coinvolte nella creazione della soluzione (fai clic per ingrandire).

Abilitazione delle API in corso…

Per implementare questi consigli, devi abilitare le seguenti API nella Console Google Cloud:

• Maps SDK for Android (o l'API per la tua piattaforma preferita)
• API Places
• API Geocoding

Per ulteriori informazioni sulla configurazione, consulta la Guida introduttiva all'utilizzo di Google Maps Platform.

Sezioni Best practice

Di seguito sono riportate le pratiche e le personalizzazioni che tratteremo in questo argomento.

• check_circle_filled L'icona a forma di segno di spunta è una best practice di base.
• stars L'icona a forma di stella è una personalizzazione facoltativa, ma consigliata, per migliorare la soluzione.

Il completamento automatico dei luoghi può semplificare l'inserimento dell'indirizzo nella tua applicazione, portando a tassi di conversione più elevati e a un'esperienza fluida per i tuoi clienti. Il completamento automatico fornisce un unico campo di immissione rapida con la previsione dell'indirizzo "predizione di battitura" che può essere utilizzato per compilare automaticamente un modulo per l'indirizzo di registrazione. Se incorpori il completamento automatico dei luoghi nel flusso di registrazione, puoi:

• Riduci gli errori di inserimento degli indirizzi.
• Riduci il numero di passaggi nella procedura di registrazione.
• Semplifica l'esperienza di inserimento dell'indirizzo su dispositivi mobili o indossabili.
• Riduci in modo significativo le battute e il tempo totale necessario per la registrazione di un cliente.

Quando l'utente seleziona la casella di immissione del completamento automatico e inizia a digitare, viene visualizzato un elenco di previsioni di indirizzi.

Quando l'utente seleziona un indirizzo dall'elenco delle previsioni, puoi utilizzare la risposta per verificare l'indirizzo e ottenere la posizione. La tua applicazione potrà quindi compilare i campi corretti del modulo di inserimento dell'indirizzo, come mostrato nella figura seguente.

Google Maps Platform fornisce un widget di completamento automatico dei luoghi per le piattaforme mobile e il web. Il widget, mostrato nelle figure precedenti, fornisce una finestra di dialogo di ricerca con funzionalità di completamento automatico integrata che puoi anche ottimizzare per la ricerca basata sulla località.

Questa sezione descrive come implementare la funzionalità di completamento automatico dei luoghi per la registrazione rapida e verificata.

Aggiunta del widget Place Autocomplete

In Android, puoi aggiungere il widget di completamento automatico utilizzando un intent di completamento automatico che avvia il completamento automatico dei luoghi dal campo di immissione riga 1 dell'indirizzo, dove l'utente inizierà a inserire il proprio indirizzo. Quando inizia a digitare, potrà selezionare il proprio indirizzo dall'elenco delle previsioni del completamento automatico.

Innanzitutto, prepara un comando di avvio attività utilizzando ActivityResultLauncher, che ascolterà un risultato dall'attività lanciata. Il callback del risultato conterrà un oggetto Place corrispondente all'indirizzo selezionato dall'utente dalle previsioni di Autocomplete.

    private final ActivityResultLauncher<Intent> startAutocomplete = registerForActivityResult(
            new ActivityResultContracts.StartActivityForResult(),
            result -> {
                if (result.getResultCode() == Activity.RESULT_OK) {
                    Intent intent = result.getData();
                    if (intent != null) {
                        Place place = Autocomplete.getPlaceFromIntent(intent);

                        // Write a method to read the address components from the Place
                        // and populate the form with the address components
                        Log.d(TAG, "Place: " + place.getAddressComponents());
                        fillInAddress(place);
                    }
                } else if (result.getResultCode() == Activity.RESULT_CANCELED) {
                    // The user canceled the operation.
                    Log.i(TAG, "User canceled autocomplete");
                }
            });

A questo punto, definisci le proprietà di campi, posizione e tipo dell'intent di completamento automatico dei luoghi e creane uno con Autocomplete.IntentBuilder. Infine, avvia l'intent utilizzando ActivityResultLauncher definito nell'esempio di codice precedente.

    private void startAutocompleteIntent() {

        // Set the fields to specify which types of place data to
        // return after the user has made a selection.
        List<Place.Field> fields = Arrays.asList(Place.Field.ADDRESS_COMPONENTS,
                Place.Field.LAT_LNG, Place.Field.VIEWPORT);

        // Build the autocomplete intent with field, country, and type filters applied
        Intent intent = new Autocomplete.IntentBuilder(AutocompleteActivityMode.OVERLAY, fields)
                .setCountries(Arrays.asList("US"))
                .setTypesFilter(new ArrayList<String>() {{
                    add(TypeFilter.ADDRESS.toString().toLowerCase());
                }})
                .build(this);
        startAutocomplete.launch(intent);
    }

Gestione dell'indirizzo restituito da Place Autocomplete

La definizione di ActivityResultLauncher in precedenza ha definito anche cosa deve essere fatto quando il risultato dell'attività viene restituito nel callback. Se l'utente ha selezionato una previsione, questa verrà inviata nell'intent contenuto nell'oggetto risultato. Poiché l'intent è stato creato da Autocomplete.IntentBuilder, il metodo Autocomplete.getPlaceFromIntent() può estrarre l'oggetto Luogo dall'intent.

    private final ActivityResultLauncher<Intent> startAutocomplete = registerForActivityResult(
            new ActivityResultContracts.StartActivityForResult(),
            result -> {
                if (result.getResultCode() == Activity.RESULT_OK) {
                    Intent intent = result.getData();
                    if (intent != null) {
                        Place place = Autocomplete.getPlaceFromIntent(intent);

                        // Write a method to read the address components from the Place
                        // and populate the form with the address components
                        Log.d(TAG, "Place: " + place.getAddressComponents());
                        fillInAddress(place);
                    }
                } else if (result.getResultCode() == Activity.RESULT_CANCELED) {
                    // The user canceled the operation.
                    Log.i(TAG, "User canceled autocomplete");
                }
            });

Da qui, chiama Place.getAddressComponents() e associa ciascun componente dell'indirizzo al relativo campo di immissione nel modulo dell'indirizzo, compilando il campo con il valore del luogo selezionato dall'utente.

L'acquisizione dei dati dell'indirizzo dalla previsione anziché da un indirizzo inserito manualmente contribuisce a garantire l'accuratezza dell'indirizzo, assicura che l'indirizzo sia noto e possa essere recapitato e riduce le battute dell'utente.

Considerazioni sull'implementazione della compilazione automatica dei luoghi

La funzionalità di completamento automatico dei luoghi offre una serie di opzioni che consentono di adattarla alle esigenze dell'implementazione, se vuoi utilizzare più del semplice widget. Puoi utilizzare una combinazione di servizi per ottenere esattamente ciò che ti serve per associare una località nel modo corretto.

• Per un modulo ADDRESS, imposta il parametro types su address per limitare le corrispondenze agli indirizzi stradali completi. Scopri di più sui tipi supportati nelle richieste di completamento automatico dei luoghi.

• Imposta le limitazioni e i bias appropriati se non devi eseguire ricerche in tutto il mondo. Esistono diversi parametri che possono essere utilizzati per orientare o limitare qualsiasi corrispondenza solo a regioni specifiche.

  • Utilizza RectangularBounds per impostare i limiti rettangolari da limitare per un'area, utilizza setLocationRestriction() per assicurarti che vengano restituiti solo gli indirizzi di queste aree.

  • Utilizza setCountries() per limitare le risposte a un determinato insieme di paesi.

• Lascia i campi modificabili nel caso in cui alcuni non siano presenti nella corrispondenza e consenti ai clienti di aggiornare l'indirizzo, se necessario. Poiché la maggior parte degli indirizzi restituito dalla compilazione automatica dei luoghi non contiene numeri di unità secondarie come appartamenti, suite o unità, puoi spostare lo stato attivo su Indirizzo riga 2 per incoraggiare l'utente a compilare queste informazioni, se necessario.

Nell'ambito dell'inserimento dell'indirizzo, fornisci agli utenti una conferma visiva dell'indirizzo su una mappa. In questo modo, gli utenti hanno la certezza che l'indirizzo sia corretto.

La figura seguente mostra una mappa sotto l'indirizzo con un segnaposto nell'indirizzo inserito.

L'esempio seguente segue i passaggi di base per l'aggiunta di una mappa su Android. Per ulteriori dettagli, consulta la documentazione.

• Aggiunta di SupportMapFragment (in questo caso, aggiunta di un frammento in modo dinamico)
• Ottenere un handle del frammento e registrare il callback
• Aggiungi uno stile e un indicatore alla mappa
• Disattivare i controlli della mappa

Aggiunta di SupportMapFragment

Innanzitutto, aggiungi un frammento SupportMapFragment al file XML del layout.

    <fragment
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:id="@+id/confirmation_map"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

Aggiungi poi il frammento tramite programmazione se non esiste ancora.

    private void showMap(Place place) {
        coordinates = place.getLatLng();

        // It isn't possible to set a fragment's id programmatically so we set a tag instead and
        // search for it using that.
        mapFragment = (SupportMapFragment)
                getSupportFragmentManager().findFragmentByTag(MAP_FRAGMENT_TAG);

        // We only create a fragment if it doesn't already exist.
        if (mapFragment == null) {
            mapPanel = ((ViewStub) findViewById(R.id.stub_map)).inflate();
            GoogleMapOptions mapOptions = new GoogleMapOptions();
            mapOptions.mapToolbarEnabled(false);

            // To programmatically add the map, we first create a SupportMapFragment.
            mapFragment = SupportMapFragment.newInstance(mapOptions);

            // Then we add it using a FragmentTransaction.
            getSupportFragmentManager()
                    .beginTransaction()
                    .add(R.id.confirmation_map, mapFragment, MAP_FRAGMENT_TAG)
                    .commit();
            mapFragment.getMapAsync(this);
        } else {
            updateMap(coordinates);
        }
    }

Ottenere un handle per il frammento e registrare il callback

1. Per ottenere un handle del frammento, chiama il metodo FragmentManager.findFragmentById e passagli l'ID risorsa del frammento nel file di layout. Se hai aggiunto il frammento dinamicamente, salta questo passaggio perché hai già recuperato l'handle.

2. Chiama il metodo getMapAsync per impostare il callback sul frammento.

Ad esempio, se hai aggiunto il frammento in modo statico:

val mapFragment = supportFragmentManager
    .findFragmentById(R.id.map) as SupportMapFragment
mapFragment.getMapAsync(this)

      

SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
    .findFragmentById(R.id.map);
mapFragment.getMapAsync(this);

      

Aggiunta di uno stile e di un indicatore alla mappa

Quando la mappa è pronta, imposta lo stile, centra la visuale e aggiungi un indicatore alle coordinate dell'indirizzo inserito. Il codice seguente utilizza lo stile definito in un oggetto JSON oppure, in alternativa, puoi caricare un ID mappa definito con la personalizzazione delle mappe basata su cloud.

    @Override
    public void onMapReady(@NonNull GoogleMap googleMap) {
        map = googleMap;
        try {
            // Customise the styling of the base map using a JSON object defined
            // in a string resource.
            boolean success = map.setMapStyle(
                    MapStyleOptions.loadRawResourceStyle(this, R.raw.style_json));

            if (!success) {
                Log.e(TAG, "Style parsing failed.");
            }
        } catch (Resources.NotFoundException e) {
            Log.e(TAG, "Can't find style. Error: ", e);
        }
        map.moveCamera(CameraUpdateFactory.newLatLngZoom(coordinates, 15f));
        marker = map.addMarker(new MarkerOptions().position(coordinates));
    }

(vedi l'esempio di codice completo)

Disattivare i controlli della mappa

Per mantenere la mappa semplice mostrando la posizione senza controlli aggiuntivi (come bussola, barra degli strumenti o altre funzionalità integrate), ti consigliamo di disattivare i controlli che non ritieni necessari. Su Android, un'altra opzione è attivare la modalità Lite per offrire un'interattività limitata.

L'ottenimento della prova dell'indirizzo, ovvero la certezza che l'utente si trovi all'indirizzo inserito, può essere complicato da fattori quali la posizione remota dell'utente, il trasferimento dell'utente a un nuovo indirizzo o le attività digitali (come le banche digitali) che non dispongono di una sede fisica che gli utenti possano visitare per fornire la prova dell'indirizzo con le bollette o altra documentazione. Fornendo modi digitali per verificare gli indirizzi degli utenti, puoi offrire un'esperienza di registrazione più rapida e senza problemi.

La sicurezza è fondamentale per ottenere un controllo dell'indirizzo, soprattutto con una procedura di registrazione digitale. Questa sezione fornisce indicazioni e esempi per verificare se la posizione di un utente durante la registrazione corrisponde all'indirizzo inserito come proprio.

La procedura per confrontare un indirizzo inserito con la posizione di un dispositivo prevede i seguenti passaggi:

1. Conversione dell'indirizzo inserito dall'utente in coordinate geografiche.
2. Chiedere all'utente l'autorizzazione per ottenere la posizione del suo dispositivo.
3. Calcolo della distanza tra l'indirizzo inserito e la posizione del dispositivo. Puoi determinare la distanza massima che viene presa in considerazione per una corrispondenza tra indirizzo e posizione.

La figura seguente è un esempio di come puoi chiedere agli utenti di confrontare l'indirizzo inserito con la loro posizione attuale.

Conversione dell'indirizzo inserito dall'utente in coordinate geografiche

Dopo che gli utenti hanno accettato la verifica dell'indirizzo (toccando "Verifica che sono qui ora" nella figura precedente), il primo passaggio per confrontare l'indirizzo con la posizione attuale è convertire l'indirizzo inserito in coordinate geografiche.

Se l'utente ha selezionato il proprio indirizzo con Place Autocomplete, assicurati di richiedere Place.Field.LAT_LNG nell'elenco dei campi di Place Autocomplete come mostrato nello snippet di codice Aggiunta del widget Place Autocomplete e chiama il metodo Place.getLatLng() per ottenere le coordinate geografiche dell'indirizzo selezionato.

coordinates = place.getLatLng();

Se l'utente ha inserito manualmente il proprio indirizzo o ha apportato modifiche dopo che la funzionalità di completamento automatico di Places ha compilato i campi, utilizza il servizio Geocoder di Android o l'API Geocoding per cercare le coordinate corrispondenti a quell'indirizzo.

Esempio

https://maps.googleapis.com/maps/api/geocode/json?address=1600%20Amphitheatre%2BParkway%2C%20Mountain%20View%2C%20CA%2094043&key=YOUR_API_KEY

Assicurati di codificare l'URL della chiamata all'API Geocoding.

Riferimento rapido alla codifica dell'URL: %20 = spazio, %2B = + (più), %2C = , (virgola)

Richiesta all'utente dell'autorizzazione per ottenere la posizione del suo dispositivo

Per ottenere la posizione del dispositivo dell'utente, devi richiedere all'utente l'autorizzazione per attivare i servizi di geolocalizzazione. Utilizzando le indicazioni riportate nella documentazione di Android sulla creazione di app con conoscenza della posizione, implementa il seguente flusso:

• Richiedi l'autorizzazione di accesso alla posizione come concessione una tantum a un livello preciso (ACCESS_FINE_LOCATION).

• Se l'utente concede l'accesso alla posizione, ottieni la sua posizione.

• Se l'utente rifiuta l'accesso alla posizione, gestisci il rifiuto in modo appropriato. Ad esempio, potresti presentare il seguente tipo di messaggio (supponendo di non memorizzare la posizione attuale dell'utente):

  "Se non consenti all'app di conoscere la tua posizione esatta, dovrai eseguire la verifica tramite posta per attivare il tuo account. [OK]"

La figura seguente mostra un esempio di richiesta di autorizzazione per ottenere la posizione del dispositivo.

Per verificare l'autorizzazione di accesso alla posizione, prepara un comando di avvio dell'attività che ascolti un risultato dall'attività avviata con ActivityResultLauncher. Il callback del risultato conterrà una stringa che indica se l'utente ha concesso o negato l'autorizzazione richiesta.

    // Register the permissions callback, which handles the user's response to the
    // system permissions dialog. Save the return value, an instance of
    // ActivityResultLauncher, as an instance variable.
    private final ActivityResultLauncher<String> requestPermissionLauncher =
            registerForActivityResult(new ActivityResultContracts.RequestPermission(), isGranted -> {
                if (isGranted) {
                    // Since ACCESS_FINE_LOCATION is the only permission in this sample,
                    // run the location comparison task once permission is granted.
                    // Otherwise, check which permission is granted.
                    getAndCompareLocations();
                } else {
                    // Fallback behavior if user denies permission
                    Log.d(TAG, "User denied permission");
                }
            });

Poi, controlla se l'app dispone già dell'autorizzazione ACCESS_FINE_LOCATION. In caso contrario, chiedila all'utente avviando l'attività di richiesta di autorizzazione utilizzando il programma di avvio definito nel passaggio precedente.

    private void checkLocationPermissions() {
        if (ContextCompat.checkSelfPermission(this, ACCESS_FINE_LOCATION)
                == PackageManager.PERMISSION_GRANTED) {
            getAndCompareLocations();
        } else {
            requestPermissionLauncher.launch(
                    ACCESS_FINE_LOCATION);
        }
    }

Una volta concessa l'autorizzazione ACCESS_FINE_LOCATION, utilizza il fornitore di posizione combinato per ottenere l'ultima posizione nota del dispositivo e creare un oggetto LatLng.

        FusedLocationProviderClient fusedLocationClient =
                LocationServices.getFusedLocationProviderClient(this);

        fusedLocationClient.getLastLocation()
                .addOnSuccessListener(this, location -> {
                    // Got last known location. In some rare situations this can be null.
                    if (location == null) {
                        return;
                    }

                    deviceLocation = new LatLng(location.getLatitude(), location.getLongitude());
                    // ...
                });
    }

Calcolo della distanza tra l'indirizzo inserito e la posizione del dispositivo

Utilizza la matematica per calcolare la distanza tra due coordinate di latitudine/longitudine (indirizzo inserito e posizione del dispositivo). La libreria di utilità di Maps SDK for Android open source offre alcuni metodi utili per calcolare la distanza sferica tra due punti sulla Terra.

Innanzitutto, installa la libreria di utilità di Maps SDK for Android aggiungendo la seguente dipendenza al file build.gradle.kts della tua app:

dependencies {


    // Utility Library for Maps SDK for Android
    // You do not need to add a separate dependency for the Maps SDK for Android
    // since this library builds in the compatible version of the Maps SDK.
    implementation("com.google.maps.android:android-maps-utils:3.8.2")
}

Poi, nel file dell'attività, dopo aver recuperato l'ultima posizione nota del dispositivo, definisci un raggio in metri per considerare le due posizioni come "corrispondenti". Il raggio deve essere sufficientemente ampio da tenere conto della variabilità dell'accuratezza del GPS e delle dimensioni del luogo all'indirizzo inserito dall'utente. Ad esempio:

private static final double acceptableProximity = 150;

Quindi, utilizza il metodo della libreria di utilità computeDistanceBetween() per calcolare la distanza tra la posizione del dispositivo e la posizione dell'indirizzo inserita dall'utente. Se la distanza rientra nel raggio definito sopra, considera le località corrispondenti.

// Use the computeDistanceBetween function in the Maps SDK for Android Utility Library
// to use spherical geometry to compute the distance between two Lat/Lng points.
double distanceInMeters = computeDistanceBetween(deviceLocation, enteredLocation);
if (distanceInMeters <= acceptedProximity) {
    Log.d(TAG, "location matched");
    // TODO: Display UI based on the locations matching
} else {
    Log.d(TAG, "location not matched");
    // TODO: Display UI based on the locations not matching
}

(vedi l'esempio di codice completo)

Se l'indirizzo e la posizione corrispondono, viene visualizzata una conferma nell'app, come mostrato nella figura seguente.

Consenti agli utenti di inserire un indirizzo in base al nome di un'attività commerciale o di un punto d'interesse. Il servizio di previsione "Precompleta" non funziona solo per gli indirizzi, ma puoi anche scegliere di consentire agli utenti di inserire i nomi di attività o punti di riferimento. Per consentire l'inserimento sia di indirizzi che di nomi di stabilimenti, rimuovi la proprietà types dalla definizione di completamento automatico.

Personalizza l'aspetto della casella di completamento automatico dei luoghi in base allo stile del tuo sito web. Se preferisci controllare l'aspetto di Completamento automatico dei luoghi nella tua app anziché utilizzare il widget di Google, puoi utilizzare il Completamento automatico dei luoghi in modo programmatico per migliorare l'interfaccia utente creata con il servizio.