Guida all'implementazione di Google Checkout

Panoramica

Lo shopping e gli ordini online sono diventati onnipresenti nella nostra vita. Dai servizi di consegna in giornata alla prenotazione di un taxi o all'ordine di cena, i clienti si aspettano una procedura di pagamento senza problemi.

Tuttavia, in tutte queste applicazioni, l'inserimento dell'indirizzo per la fatturazione o la spedizione rimane un ostacolo nel flusso di pagamento, che può essere dispendioso in termini di tempo e di costi. Un'esperienza di pagamento fluida diventa ancora più importante nel mondo dei dispositivi mobili, dove l'inserimento di testo complesso su uno schermo piccolo può essere frustrante e un altro ostacolo alla conversione dei clienti.

Questo argomento fornisce indicazioni sull'implementazione che aiutano i tuoi clienti a velocizzare la procedura di pagamento con l'inserimento predittivo dell'indirizzo.

Il seguente diagramma mostra le API di base coinvolte nell'implementazione di Google Checkout (fai clic per ingrandire).

Abilitazione delle API in corso…

Per implementare Google Checkout, devi abilitare le seguenti API nella console Google Cloud:

• API Maps JavaScript
• API Places
• API Maps Static

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

Sezioni degli esercizi guidati

Di seguito sono riportati i suggerimenti e le personalizzazioni che tratteremo in questo argomento.

• check_circle_filled L'icona del segno di spunta è una prassi fondamentale.
• 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 di immissione rapida con previsione dell'indirizzo "type-ahead", che può essere utilizzata per compilare automaticamente un modulo per l'indirizzo di fatturazione o di spedizione.

Se incorpori la funzione di completamento automatico di luoghi nel tuo carrello degli acquisti online, puoi:

• Riduci gli errori di inserimento dell'indirizzo.
• Riduci il numero di passaggi della procedura di pagamento.
• Semplificare l'esperienza di inserimento dell'indirizzo su dispositivi mobili o indossabili.
• Riduci notevolmente le pressioni di tasti e il tempo totale necessario a un cliente per effettuare un ordine.

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 posizione. L'applicazione può quindi compilare i campi corretti del modulo di inserimento dell'indirizzo:

Guida introduttiva al completamento automatico dei luoghi

Per incorporare Place Autcomplete nel tuo sito, sono necessarie solo un paio di righe di codice JavaScript.

Il modo più semplice è includere l'API Maps JavaScript (anche se non stai visualizzando una mappa) nel tuo sito e specificare la libreria Places come mostrato nell'esempio seguente, che esegue anche la funzione di inizializzazione.

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=places&callback=initAutocomplete&solution_channel=GMP_guides_checkout_v1_a">
</script>

Quindi, aggiungi alla pagina una casella di testo per l'input dell'utente:

<input id="autocomplete" placeholder="Enter your address"></input>

Infine, inizializza il servizio Autocomplete e collegalo alla casella di testo denominata:

function initAutocomplete() {
  // Create the autocomplete object, restricting the search predictions to
  // addresses in the US and Canada.
  autocomplete = new google.maps.places.Autocomplete(address1Field, {
    componentRestrictions: { country: ["us", "ca"] },
    fields: ["address_components", "geometry"],
    types: ["address"],
  });
  address1Field.focus();
  // When the user selects an address from the drop-down, populate the
  // address fields in the form.
  autocomplete.addListener("place_changed", fillInAddress);
}

Nell'esempio precedente, il listener di eventi place_changed viene attivato quando l'utente seleziona una previsione di indirizzo e viene eseguita la funzione fillInAddress. La funzione, come mostrato nell'esempio seguente, prende la risposta selezionata ed estrae i componenti dell'indirizzo per visualizzarli all'interno di un modulo.

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components as google.maps.GeocoderAddressComponent[]) {
    // @ts-ignore remove once typings fixed
    const componentType = component.types[0];

    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.short_name;
        break;
      }

      case "postal_code": {
        postcode = `${component.long_name}${postcode}`;
        break;
      }

      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
        break;
      }

      case "locality":
        (document.querySelector("#locality") as HTMLInputElement).value =
          component.long_name;
        break;

      case "administrative_area_level_1": {
        (document.querySelector("#state") as HTMLInputElement).value =
          component.short_name;
        break;
      }

      case "country":
        (document.querySelector("#country") as HTMLInputElement).value =
          component.long_name;
        break;
    }
  }

  address1Field.value = address1;
  postalField.value = postcode;

  // After filling the form with address components from the Autocomplete
  // prediction, set cursor focus on the second address line to encourage
  // entry of subpremise information such as apartment, unit, or floor number.
  address2Field.focus();
}
index.ts

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components) {
    // @ts-ignore remove once typings fixed
    const componentType = component.types[0];

    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.short_name;
        break;
      }

      case "postal_code": {
        postcode = `${component.long_name}${postcode}`;
        break;
      }

      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
        break;
      }
      case "locality":
        document.querySelector("#locality").value = component.long_name;
        break;
      case "administrative_area_level_1": {
        document.querySelector("#state").value = component.short_name;
        break;
      }
      case "country":
        document.querySelector("#country").value = component.long_name;
        break;
    }
  }

  address1Field.value = address1;
  postalField.value = postcode;
  // After filling the form with address components from the Autocomplete
  // prediction, set cursor focus on the second address line to encourage
  // entry of subpremise information such as apartment, unit, or floor number.
  address2Field.focus();
}

window.initAutocomplete = initAutocomplete;
index.js

Una volta ottenuti questi dati, puoi utilizzarli come indirizzo corrispondente per l'utente. Con poche righe di codice, puoi assicurarti che il cliente inserisca l'indirizzo corretto in un breve lasso di tempo.

Visualizza una demo funzionante e un codice sorgente completo per compilare un modulo di inserimento dell'indirizzo in questo esempio di codice.

Considerazioni sull'implementazione del completamento automatico dei luoghi

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

• Per un modulo dell'indirizzo, imposta il parametro types su address per limitare le corrispondenze agli indirizzi 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 differenziare o limitare qualsiasi corrispondenza solo ad aree geografiche specifiche.
  • Usa bounds per impostare limiti rettangolari per vincolare un'area, usa strictBounds per assicurarti che vengano restituiti solo gli indirizzi in quelle aree.
  • Utilizza componentRestrictions per limitare le risposte a un determinato gruppo di paesi.
• Lascia i campi modificabili nel caso in cui alcuni campi non vengano rilevati dalla corrispondenza e consenti ai clienti di aggiornare l'indirizzo, se necessario. Poiché la maggior parte degli indirizzi restituiti dal completamento automatico di Place non contiene numeri di sottopremesse, come numeri di appartamenti, appartamenti o unità, questo esempio sposta lo stato attivo sulla Riga indirizzo 2 per incoraggiare l'utente a inserire queste informazioni, se necessario.

Dopo l'inserimento dell'indirizzo, fornisci all'utente una conferma visiva della località di consegna o ritiro con una semplice mappa statica. Ciò offrirà al cliente un'ulteriore garanzia che l'indirizzo sia corretto e ridurrà gli errori di consegna/ritiro. La mappa statica può essere visualizzata nella pagina in cui viene inserito l'indirizzo o persino inviata nell'email di conferma quando hanno completato la transazione.

Entrambi questi casi d'uso possono essere realizzati con l'API Maps Static, che aggiunge una versione immagine della mappa a qualsiasi tag immagine all'interno di una pagina o di un'email.

Introduzione all'API Maps Static

Puoi utilizzare l'API Maps Static utilizzando una chiamata al servizio web, che creerà una versione immagine di una mappa in base ai parametri specificati. Come per la mappa dinamica, puoi specificare il tipo di mappa, utilizzare gli stessi stili basati su cloud e aggiungere indicatori per distinguere il luogo.

La chiamata seguente mostra una roadmap con dimensioni di 600 x 300 px, centrata sul Googleplex a Mountain View, in California, a livello di zoom 13. Specifica inoltre un indicatore di posizione di consegna blu e uno stile di mappa online.

      https://maps.googleapis.com/maps/api/staticmap?center=37.422177,-122.084082
      &zoom=13
      &size=600x300
      &maptype=roadmap
      &markers=color:blue%7Clabel:S%7C37.422177,-122.084082
      &map_id=8f348d1b5a61d4bb
      &key=YOUR_API_KEY
      &solution_channel=GMP_guides_checkout_v1_a
      

La sezione è suddivisa nelle seguenti sezioni:

Questa diventa l'immagine mostrata di seguito:

Per ulteriori informazioni sulle opzioni dell'API Maps Static, consulta la documentazione.

Puoi migliorare ulteriormente l'esperienza dei tuoi clienti sfruttando alcune delle funzionalità avanzate offerte da Place Autocomplete. Ecco alcuni suggerimenti per migliorare la casella di inserimento dell'indirizzo con completamento automatico:

• stars 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 l'inserimento dei nomi delle attività o dei punti di riferimento. Dopo che un utente inserisce il nome di un'attività, è facile recuperare l'indirizzo con una chiamata a Dettagli luogo. Per consentire l'inserimento sia di indirizzi che di nomi di attività, rimuovi la proprietà types dalla definizione di completamento automatico.
• stars Personalizza l'aspetto della casella Completamento automatico di un luogo in base allo stile del tuo sito web. Puoi anche modificare lo stile del widget di completamento automatico in base all'aspetto e al design del tuo carrello degli acquisti. È disponibile una serie di classi CSS da personalizzare. Per ulteriori informazioni su come applicare uno stile alla casella di completamento automatico, leggi la documentazione.
• stars Se vuoi creare una UI personalizzata. Crea un'interfaccia utente personalizzata anziché utilizzare quella progettata da Google, chiama il servizio Place Autocomplete in modo programmatico per recuperare le previsioni per un determinato input. Puoi recuperare le previsioni di Place Autocomplete in modo programmatico in JavaScript, Android e iOS, oltre a chiamare l'API dei servizi web direttamente tramite l'API Places.