Guida all'implementazione della Registrazione rapida e verificata

Panoramica

Gli utenti si sono abituati a vivere e operare in un mondo digitale in cui comodità, velocità e sicurezza sono aspettative di base. Quando chiedono una carta di credito, un conto bancario o un prestito, si aspettano che la procedura sia facile e veloce.

Più utenti devono digitare o inserire dati duplicati, minori sono le possibilità di fidelizzarli. La creazione di un'esperienza di registrazione rapida, semplice e verificata migliorerà l'esperienza utente e ti fornirà un vantaggio per 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 funzionalità di registrazione rapida e verificata velocizza la registrazione, suggerendo immediatamente gli indirizzi nelle vicinanze con pochi tocchi con il pollice e visualizzando l'indirizzo inserito per una conferma visiva, aiutando l'utente a sentirsi sicuro di aver inserito l'indirizzo corretto. La verifica dell'indirizzo dell'utente tramite la sua posizione attuale aiuta anche a prevenire le attività fraudolente e rafforza la fiducia degli utenti nei confronti dei tuoi prodotti e servizi. La verifica può anche aumentare la fiducia nel fornire immediatamente carte di credito e banche virtuali.

Questo argomento fornisce indicazioni sull'implementazione per creare un'esperienza di registrazione rapida e verificata con Google Maps Platform. Poiché gli utenti molto probabilmente si registreranno sui dispositivi mobili, la maggior parte degli esempi di implementazione in questo argomento riguarda Android. (puoi visualizzare l'origine dell'esempio completo qui). Puoi anche usare gli SDK per iOS per fare le stesse cose.

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 suggerimenti, devi abilitare le API seguenti nella console Google Cloud:

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

Per ulteriori informazioni sulla configurazione, consulta la Guida introduttiva a Google Maps Platform.

Sezioni delle best practice

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

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

Place Autocomplete può semplificare l'inserimento degli indirizzi nell'applicazione, generando tassi di conversione più elevati e un'esperienza fluida per i clienti. Il completamento automatico fornisce un singolo campo a inserimento rapido con previsione degli indirizzi "type-ahead", che può essere utilizzato per compilare automaticamente un modulo per l'indirizzo di registrazione. Se incorpori la funzionalità Place Autocomplete nella procedura di registrazione, puoi:

• Riduci gli errori di inserimento dell'indirizzo.
• Riduci il numero di passaggi nella procedura di registrazione.
• Semplifica l'inserimento degli indirizzi su dispositivi mobili o indossabili.
• Ridurre significativamente le sequenze di tasti e il tempo totale necessario a un cliente per registrarsi.

Quando l'utente seleziona la casella di immissione 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 località. La richiesta potrà quindi compilare i campi corretti del modulo di inserimento dell'indirizzo, come mostrato nella figura seguente.

Google Maps Platform fornisce un widget Place Autocomplete per piattaforme mobile e web. Il widget, mostrato nelle figure precedenti, presenta una finestra di dialogo di ricerca con funzionalità di completamento automatico integrata che puoi persino ottimizzare per la ricerca con ambito basato sulla località.

Questa sezione descrive come implementare il completamento automatico di Place Auto per la registrazione rapida e verificata.

Aggiungere il widget Place Autocomplete

In Android, puoi aggiungere il widget di completamento automatico utilizzando un intent di completamento automatico che avvia Place Autocomplete dal campo di immissione Riga indirizzo 1, in cui l'utente inizierà a inserire l'indirizzo. Quando iniziano a digitare, potranno selezionare l'indirizzo dall'elenco delle previsioni di completamento automatico.

Innanzitutto, prepara un'Avvio attività utilizzando ActivityResultLauncher, che ascolta i risultati dell'attività avviata. Il callback risultato conterrà un oggetto Place corrispondente all'indirizzo selezionato dall'utente dalle previsioni di completamento automatico.

    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");
                }
            });

Quindi, definisci le proprietà dei campi, della posizione e del tipo dell'intent Place Autocomplete e crealo con Autocomplete.IntentBuilder. Infine, avvia l'intent utilizzando il 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 dal completamento automatico di Place

La definizione precedente di ActivityResultLauncher ha anche definito cosa deve essere fatto quando il risultato dell'attività viene restituito nel callback. Se l'utente ha selezionato una previsione, questa verrà consegnata nell'intent contenuto nell'oggetto risultato. Poiché l'intent è stato creato da Autocomplete.IntentBuilder, il metodo Autocomplete.getPlaceFromIntent() può estrarre l'oggetto Place 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 ogni componente dell'indirizzo al campo di immissione corrispondente nel modulo dell'indirizzo, compilando il campo con il valore del luogo selezionato dall'utente.

L'acquisizione dei dati degli indirizzi dalla previsione anziché un indirizzo inserito manualmente contribuisce a garantire la precisione degli indirizzi, garantisce che l'indirizzo sia noto e possa essere recapitato e riduce le sequenze di tasti degli utenti.

Considerazioni sull'implementazione del completamento automatico di Place Auto

Place Autocomplete offre una serie di opzioni che ne consentono l'implementazione in modo flessibile, se vuoi utilizzare qualcosa di più del widget. Puoi utilizzare una combinazione di servizi per ottenere esattamente ciò di cui hai bisogno per associare una località nel modo corretto.

• Per un modulo ADDRESS, imposta il parametro di tipo su address per limitare le corrispondenze agli indirizzi completi. Scopri di più sui tipi supportati nelle richieste Place Autocomplete.

• Imposta restrizioni e bias appropriati se non devi eseguire ricerche in tutto il mondo. Esistono numerosi parametri che possono essere utilizzati per differenziare o limitare qualsiasi corrispondenza solo ad aree geografiche specifiche.

  • Usa RectangularBounds per impostare i limiti rettangolari per limitare un'area, usa setLocationRestriction() per assicurarti che vengano restituiti solo gli indirizzi in queste aree.

  • Usa il criterio setCountries() per limitare le risposte a un determinato gruppo di paesi.

• Lascia i campi modificabili nel caso in cui alcuni campi non vengano trovati e consenti ai clienti di aggiornare l'indirizzo, se necessario. Poiché la maggior parte degli indirizzi restituiti da Place Autocomplete non contiene numeri di premesse come numeri di appartamenti, appartamenti o unità, puoi spostare lo stato attivo sulla Riga indirizzo 2 per incoraggiare l'utente a inserire queste informazioni, se necessario.

Come parte dell'inserimento dell'indirizzo, fornisci agli utenti una conferma visiva dell'indirizzo su una mappa. In questo modo gli utenti possono avere la certezza che l'indirizzo sia corretto.

La figura seguente mostra una mappa sotto l'indirizzo con un segnaposto in corrispondenza dell'indirizzo inserito.

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

• Aggiunta di SupportMapFragment (in questo caso, aggiunta di un frammento in modo dinamico)
• Recupero di un handle per il frammento e registrazione del callback
• Applicare uno stile e aggiungere un indicatore alla mappa
• Disattivare i controlli della mappa

Aggiunta di SupportMapFragment in corso...

Innanzitutto, aggiungi un frammento SupportMapFragment al file XML di 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"/>

Quindi, aggiungi il frammento in modo programmatico 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 per il frammento, chiama il metodo FragmentManager.findFragmentById e trasmettilo all'ID risorsa del frammento nel file di layout. Se hai aggiunto il frammento in modo dinamico, salta questo passaggio perché hai già recuperato l'handle.

2. Richiama 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);

      

Applicare uno stile e aggiungere un indicatore alla mappa

Quando la mappa è pronta, imposta lo stile, centra la fotocamera e aggiungi un indicatore alle coordinate dell'indirizzo inserito. Il seguente codice utilizza uno stile definito in un oggetto JSON. In alternativa, puoi caricare un ID mappa che è stato definito con Personalizzazione di Maps 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 un esempio di codice completo)

Disattivazione dei controlli mappa in corso...

Per semplificare la mappa mostrando la posizione senza ulteriori controlli della mappa (come bussola, barra degli strumenti o altre funzionalità integrate), puoi disattivare i controlli che ritieni non necessari. Su Android, un'altra opzione è abilitare la modalità Lite per offrire interattività limitata.

Ottenere una prova dell'indirizzo, ovvero avere la certezza che l'utente si trovi all'indirizzo inserito, può essere complicato da fattori quali la località dell'utente remoto, gli utenti che si spostano a un nuovo indirizzo o le attività digitali (come le banche digitali) che non hanno una sede fisica che gli utenti possono visitare per fornire una prova dell'indirizzo con bollette o altra documentazione. Se fornisci modalità digitali per verificare gli indirizzi degli utenti, offre un'esperienza di registrazione più rapida e fluida.

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

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 dispositivo.
3. Calcolo della distanza tra l'indirizzo inserito e la posizione del dispositivo. Puoi determinare la distanza massima che viene conteggiata per una corrispondenza indirizzo-località.

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 di eseguire la verifica dell'indirizzo (toccando "Verifica di essere lì 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 l'indirizzo con Place Autocomplete, assicurati di richiedere Place.Field.LAT_LNG nell'elenco di campi Place Autocomplete, come mostrato nello snippet di codice 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 apportato modifiche dopo che il completamento automatico di Place ha compilato i campi, utilizza il servizio Android Geocoder 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 per la codifica dell'URL: %20 = spazio, %2B = + (più), %2C = , (virgola)

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

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

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

• Se l'utente concede l'accesso alla posizione, recupera la posizione dell'utente.

• Se l'utente rifiuta l'accesso alla posizione, gestisci il rifiuto con grazia. Ad esempio, puoi presentare il seguente tipo di messaggio (supponendo che tu non stia memorizzando la posizione attuale dell'utente):

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

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

Per verificare l'autorizzazione di accesso alla posizione, prepara un'Avvio attività che ascolterà un risultato dell'attività avviata con ActivityResultLauncher. Il callback 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");
                }
            });

Quindi, controlla se l'app ha già l'autorizzazione ACCESS_FINE_LOCATION. In caso contrario, chiedi all'utente di farlo avviando l'attività di richiesta di autorizzazione utilizzando Avvio app definita 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, usa il provider di posizione fusa per recuperare l'ultima posizione nota del dispositivo e creare un oggetto LatLng al suo interno.

        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 il calcolo matematico per calcolare la distanza tra due coordinate di latitudine/longitudine (indirizzo inserito e posizione del dispositivo). La libreria di utilità open source di Maps SDK for Android offre alcuni pratici metodi 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 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.0'
}

Tornando al file delle attività dopo aver ottenuto l'ultima posizione nota del dispositivo, definisci un raggio in metri per considerare le due località come "corrispondenti". Il raggio deve essere abbastanza grande da tenere conto della variabilità della precisione GPS e delle dimensioni del luogo all'indirizzo inserito dall'utente. Ad esempio:

private static final double acceptableProximity = 150;

Quindi, usa il metodo della libreria di utilità computeDistanceBetween() per calcolare la distanza tra la posizione del dispositivo e quella dell'indirizzo inserito 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 un esempio di codice completo)

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

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

Personalizza l'aspetto della casella di completamento automatico di Place in base allo stile del tuo sito web. Se preferisci controllare l'aspetto di Place Autocomplete nell'app anziché utilizzare il widget di Google, puoi utilizzare Place Autocomplete in modo programmatico per supportare la UI che crei con il servizio Place Autocomplete.