Guida all'implementazione di Locator Plus

Panoramica

web iOS API

Google Maps Platform è disponibile per web (JS, TS), Android e iOS e offre anche API di servizi web per ottenere informazioni su luoghi, indicazioni e distanze. Gli esempi di questa guida sono scritti per una piattaforma, ma vengono forniti link alla documentazione per l'implementazione su altre piattaforme.

Crea ora!

Builder rapido nella console Google Cloud ti consente di creare rapidamente un localizzatore, inclusa l'importazione delle schede del profilo dell'attività e l'incorporamento automatico dei link di prenotazione degli appuntamenti da fornitori di terze parti. L'interfaccia utente interattiva ti consente di generare codice ed eseguire il deployment su Cloud in pochi minuti.

I tuoi utenti vogliono fare ricerche online su prodotti e servizi e trovare il luogo migliore e più comodo per visitare, fissare un appuntamento o ritirare un ordine. Vorrai offrire loro esperienze online coinvolgenti che aumentino le visite alle tue sedi fisiche, rafforzino la soddisfazione degli utenti e riducano le chiamate all'assistenza. Inoltre, dovrai misurare il successo del tuo localizzatore per determinare se i tuoi clienti riescono a trovare la tua sede e capire dove apportare miglioramenti.

Locator Plus, ovvero i suggerimenti per la guida e la personalizzazione che forniamo in questo documento, è la combinazione ottimale di API Google Maps Platform che consigliamo per creare ottime esperienze utente per il localizzatore. Seguendo queste pratiche, puoi aiutare gli utenti a trovare le tue sedi su una mappa, a visualizzare le informazioni dettagliate di cui hanno bisogno per prendere decisioni e a ricevere indicazioni stradali, che si tratti di guidare, andare in bicicletta, camminare o prendere i mezzi pubblici.

Per gli utenti di Locator Plus, una dashboard di analisi consente di analizzare e generare insight dai dati, fornendo un quadro chiaro di come gli acquirenti interagiscono con il tuo Store locator. Per accedere a questo report, vai alla sezione Report sul coinvolgimento della console. Per maggiori dettagli su questo report, consulta Report sul coinvolgimento.

Il seguente diagramma mostra le API principali coinvolte nell'implementazione di Locator Plus. Il diagramma mostra anche un database dei tuoi dati sulla posizione che puoi combinare con i dettagli del luogo per fornire agli utenti il set di informazioni migliore e più completo possibile. (Fai clic per ingrandire.)

Sul lato sinistro del diagramma, un browser web mostra una mappa con un popup Place Details.
              Sul lato destro del diagramma, un elenco di API che forniscono funzionalità diverse:
              API Maps JavaScript per la visualizzazione e i contenuti della posizione, lo stile della mappa, i marcatori avanzati, Street View personalizzato e la visualizzazione dei percorsi. Place Autocomplete per
              il completamento dell'indirizzo e la funzionalità di digitazione predittiva. API Places (novità) e API Geocoding per
              la posizione dell'indirizzo. API Routes per classificare le località in base a distanza, tempo e
              modalità di viaggio e per mostrare un itinerario in base al tempo di percorrenza e alla modalità di viaggio.
              Al centro del diagramma, un'icona di datastore che rappresenta i punti dati di posizione personalizzati
              fino a un'icona di server web con una freccia a doppia punta che indica la lettura e la scrittura dei dati
              tra il server web e il datastore. Le frecce tra il browser web
              e le API passano attraverso il server web come intermediario.

Abilitazione delle API in corso…

Per implementare queste pratiche, devi abilitare le seguenti API nella console Google Cloud: Per ulteriori informazioni sulla configurazione, consulta la sezione Inizia a utilizzare Google Maps Platform.

Sezioni di implementazione

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

  • L'icona del segno di spunta è una pratica fondamentale.
  • L'icona a forma di stella è una personalizzazione facoltativa ma consigliata per migliorare la soluzione.
Visualizzare le tue sedi su una mappa interattiva

Crea una mappa che consenta agli utenti di visualizzare i dettagli della posizione, spostarsi e aumentare e diminuire lo zoom.

In alternativa, esplora la soluzione Builder rapido Locator Plus per creare rapidamente una mappa, inclusa l'importazione dei dettagli aziendali dalle schede del tuo profilo dell'attività, l'incorporamento dei link di prenotazione degli appuntamenti e il deployment in Google Cloud Storage.

Fornire i dettagli del luogo Dopo che gli utenti hanno trovato le tue sedi più vicine su una mappa, fornisci loro dettagli significativi sulle sedi per aiutarli a prendere decisioni.
Visualizzazione delle località da una prospettiva a 45° Offri agli utenti una migliore visualizzazione della tua posizione nella vista satellitare da un angolo di 45 gradi.
Identificare la posizione dell'utente Aggiungi la funzionalità di digitazione in tempo reale per migliorare l'esperienza utente su tutte le piattaforme e migliorare l'accuratezza degli indirizzi con il minimo numero di battute.
Visualizzazione del tempo di percorrenza e della distanza dalle sedi più vicine Calcola la distanza e il tempo di percorrenza per più origini e destinazioni, specificando facoltativamente varie forme di trasporto come a piedi, in auto o in bicicletta.
Aiutare gli utenti a prenotare appuntamenti

Consente agli utenti di prenotare un appuntamento dal riquadro laterale Dettagli luogo.

In alternativa, esplora la soluzione Builder rapido Locator Plus per creare rapidamente una mappa, inclusa l'importazione dei dettagli aziendali dalle schede del tuo profilo dell'attività, l'incorporamento dei link di prenotazione degli appuntamenti e il deployment in Google Cloud Storage.

Visualizzazione delle offerte locali Mostra agli utenti offerte locali su cui è possibile fare clic nel riquadro laterale Dettagli del luogo.
Fornire indicazioni stradali Ottieni dati sulle indicazioni stradali dall'origine alla destinazione utilizzando varie forme di trasporto, come a piedi, in auto, in bicicletta e con il trasporto pubblico.
Personalizzare la mappa Crea indicatori personalizzati per mettere in evidenza le tue sedi e applica uno stile alla mappa in linea con i colori del tuo brand. Mostra (o nascondi) punti di interesse (PDI) specifici sulla tua mappa per aiutare gli utenti a orientarsi meglio e controlla la densità dei PDI per evitare che la mappa sia troppo affollata.
Ottenere approfondimenti sull'utilizzo con Analytics Configura e utilizza Google Analytics per ottenere approfondimenti sulla strategia e sull'implementazione del localizzatore.
Invio di indicazioni stradali al dispositivo mobile Oltre a mostrare le indicazioni sul localizzatore, puoi anche inviarle allo smartphone di un utente per la navigazione con Google Maps ovunque ti trovi.
Mostrare Street View per aiutare gli utenti a visualizzare le località Fornisci agli utenti immagini di Street View con visualizzazioni a 360 gradi per orientarli meglio e aiutarli a trovare più rapidamente le tue sedi.
Determinare la posizione dell'utente con la geolocalizzazione Se non vuoi fare affidamento sui servizi di localizzazione sul dispositivo, utilizza la geolocalizzazione per identificare la posizione dell'utente.
Combinazione di dati sulla posizione personalizzati con Place Details Combina i tuoi dettagli sulla posizione personalizzati con i dettagli del luogo per fornire agli utenti un ricco insieme di dati per prendere decisioni.

Visualizzare le tue posizioni su una mappa interattiva

Un localizzatore è una parte importante dell'esperienza utente. Alcuni siti, tuttavia, potrebbero non avere nemmeno una mappa, il che richiede agli utenti di uscire dal sito o dall'app per trovare una posizione nelle vicinanze. Ciò significa un'esperienza non ottimale per gli utenti che devono navigare tra le pagine per ottenere le informazioni di cui hanno bisogno. Puoi invece migliorare questa esperienza incorporando e personalizzando le mappe nelle tue applicazioni.

Puoi attivare questa funzionalità in due modi: utilizzando la soluzione Locator Plus di Builder rapido per fornirla pronta all'uso oppure utilizzando la tua implementazione di Dynamic Maps. Questa sezione descrive in dettaglio queste opzioni.

Utilizzare Locator Plus di Builder rapido

Puoi utilizzare la soluzione Store Locator Plus di Builder rapido per importare i dettagli aziendali dal tuo profilo dell'attività. Pertanto, una modifica ai dettagli dell'attività del tuo profilo dell'attività verrà applicata allo Store locator sul tuo sito web. Queste modifiche possono includere orari, dati di contatto, foto, opzioni di servizio e altro ancora. Builder rapido ti consente di esplorare rapidamente la configurazione delle sedi dell'attività su una mappa, generare codice implementabile o eseguire il deployment direttamente in Google Cloud Storage in pochi minuti.

Importare i dettagli della sede dell'attività commerciale da Profilo dell'attività in Builder rapido
Gestisci le tue sedi in Locator Plus importando i dettagli dell'attività dal tuo profilo

Deployment di un'applicazione Locator Plus direttamente in Google Cloud Storage
Implementa la tua soluzione Locator Plus utilizzando Google Cloud

Utilizzo della tua implementazione di Dynamic Maps

Questo esempio utilizza: API Maps JavaScript Disponibile anche per: Android | iOS

L'aggiunta di una mappa dinamica alla tua pagina, ovvero una mappa che gli utenti possono spostare, ingrandire e rimpicciolire e ottenere dettagli su diverse località e punti di interesse, può essere eseguita con poche righe di codice.

Per prima cosa, devi includere l'API Maps JavaScript nella pagina. A questo scopo, collega il seguente script alla tua pagina HTML, incluso libraries=marker, in modo da poter aggiungere indicatori avanzati alla mappa.

<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=marker&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a"></script>

L'URL fa riferimento alla funzione JavaScript initMap che viene eseguita quando la pagina viene caricata. Nell'URL puoi anche definire la lingua o la regione della mappa per assicurarti che sia formattata nel modo corretto per il paese specifico che scegli come target. L'impostazione di una regione garantisce inoltre che il comportamento delle app utilizzate al di fuori degli Stati Uniti sia orientato verso la regione che hai impostato. Consulta i dettagli sulla copertura di Google Maps Platform per un elenco completo delle lingue e delle regioni supportate e scopri di più sull'utilizzo del parametro region.

Successivamente, devi inserire un div HTML per posizionare la mappa sulla pagina. Questo è il punto in cui verrà visualizzata la mappa.

<div id="map"></div>

Il passaggio successivo consiste nell'impostare la funzionalità di base della mappa. Questa operazione viene eseguita nella funzione di script initMap specificata nell'URL dello script. In questo script, mostrato nell'esempio seguente, puoi impostare la posizione iniziale, un ID mappa (obbligatorio per i marcatori avanzati e la personalizzazione dello stile della mappa basata su cloud), il tipo di mappa e i controlli che saranno disponibili sulla mappa per i tuoi utenti. Tieni presente che getElementById() fa riferimento all'ID "map" div nell'esempio precedente.

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: 51.485925, lng: -0.129500 },
    mapId: "DEMO_MAP_ID",
    zoomControl: false
  });
}

Per un localizzatore, in genere ti interessa impostare la posizione iniziale, il punto centrale o i limiti e il livello di zoom (quanto la mappa è ingrandita su quella posizione). La maggior parte degli altri elementi, come la regolazione dei controlli, sono facoltativi, in quanto determini il livello di interazione con la mappa.

Recupero degli ID luogo

Questo esempio utilizza: API Places (New) Disponibile anche: JavaScript

Probabilmente avrai un database delle tue sedi con informazioni di base come il nome della sede, l'indirizzo e il numero di telefono. Per recuperare le informazioni che Google Maps Platform ha su quel luogo, incluse le coordinate geografiche e le informazioni contribuite dagli utenti, trova l'ID luogo che corrisponde a ciascuna delle posizioni nel tuo database. Puoi effettuare una chiamata all' endpoint Text Search (New) in Places API (New) e richiedere solo il campo places.id nella maschera del campo (che attiva lo SKU Text Search Essentials IDs Only). Ecco un esempio di richiesta dell'ID luogo per la sede di Google a Londra:

curl -X POST -d '{
  "textQuery" : "Google London"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: places.id' \
'https://places.googleapis.com/v1/places:searchText'

Puoi memorizzare questo ID luogo nel tuo database e utilizzarlo come modo efficiente per richiedere informazioni sul luogo. Di seguito sono riportate le istruzioni per utilizzare l'ID luogo per la geocodifica, recuperare i dettagli del luogo e richiedere indicazioni stradali per raggiungere il luogo.

Geocodifica delle località

Questo esempio utilizza: API Geocoding Disponibile anche: JavaScript

Se il tuo database di località contiene indirizzi stradali, ma non coordinate geografiche, utilizza l'API Geocoding per ottenere la latitudine e la longitudine dell'indirizzo allo scopo di posizionare l'indicatore sulla mappa. Puoi geocodificare i tuoi indirizzi lato server, memorizzare le latitudini e le longitudini nel tuo database e aggiornare almeno ogni 30 giorni.

Ecco un esempio di utilizzo dell'API Geocoding per ottenere la latitudine e la longitudine dell'ID luogo restituito per la sede di Google a Londra:

https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_locatorplus_v2_a

Aggiunta di posizioni alla mappa

Il passaggio successivo consiste nell'aggiungere le tue sedi alla mappa. In genere, questa operazione viene eseguita aggiungendo indicatori avanzati alla mappa, anche se esistono diverse altre opzioni che puoi utilizzare, ad esempio livelli dati.

Una volta ottenute la latitudine e la longitudine della tua posizione, ecco un esempio di come aggiungere un indicatore avanzato con un glifo di testo personalizzato alla mappa:

const pin = new google.maps.marker.PinElement({
  glyphText: "A",
});

const marker = new google.maps.marker.AdvancedMarkerElement({
  map,
  position: { lat: 51.493073, lng: -0.146550 },
  title: "Location Name",
});
marker.append(pin);

Con pochi indicatori, puoi visualizzare la posizione di più luoghi contemporaneamente.

Se sono presenti molte località, potresti prendere in considerazione l'utilizzo di un'utilità di raggruppamento dei marcatori per JavaScript, Android o iOS. Ecco un esempio di clustering dei marker nell'esempio di localizzatore di negozi JavaScript di GitHub.

Fornire i dettagli del luogo

Questo esempio utilizza: API Maps JavaScript Disponibile anche: API Places (nuova) | Android | iOS

Puoi condividere i Place Details che gli utenti devono conoscere prima di visitare una delle tue sedi. Grazie a informazioni dettagliate sui luoghi, come dati di contatto, orari di apertura, valutazioni degli utenti, foto degli utenti e stato di chiusura temporanea, i tuoi utenti sapranno esattamente cosa aspettarsi quando visitano la tua sede. Dopo aver effettuato una chiamata all'API Places (New), puoi filtrare e visualizzare la risposta in una finestra informativa, in una barra laterale web o in qualsiasi altro modo preferisci.

Per richiedere i dettagli del luogo, avrai bisogno dell'ID luogo di ciascuna delle tue sedi. Consulta Recuperare gli ID luogo per recuperare l'ID luogo della tua sede.

Espandi per visualizzare i video per la richiesta di dettagli del luogo:

Visualizzare gli orari di apertura

Controllare le chiusure

Costi sotto controllo

Il seguente esempio utilizza la classe Place nella libreria Places dell'API Maps JavaScript per recuperare i dettagli del luogo e aggiungerli a una finestra informativa. Questa implementazione utilizza la strategia di risparmio dei costi di attivare una richiesta di dettagli sul luogo solo quando l'utente richiede i dettagli facendo clic sull'indicatore anziché recuperare in modo preventivo i dettagli per tutte le località, indipendentemente dall'interesse dell'utente.

     
  const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: { lat: 51.493073, lng: -0.14655 },
    gmpClickable: true,
  });
  const place = new google.maps.places.Place({
    id: "ChIJVSZzVR8FdkgRTyQkxxLQmVU",
  });
  const infowindow = new google.maps.InfoWindow();

  marker.addEventListener("gmp-click", async () => {
    await place.fetchFields({
      fields: ["displayName", "formattedAddress", "rating", "websiteURI"],
    });

    infowindow.setContent(
      "<div><strong>" +
        place.displayName +
        "</strong><br>" +
        place.formattedAddress +
        "<br>" +
        "Rating: " +
        place.rating +
        " stars<br>" +
        place.websiteURI +
        "</div>"
    );

    infowindow.open({
      map,
      anchor: marker,
    });
  });
  
  

Visualizzazione delle posizioni da una visuale a 45°

Questo esempio utilizza: API Maps JavaScript Disponibile anche per: Android | iOS

Offrire agli utenti una vista aerea della tua sede li aiuta a farsi un'idea più chiara del suo aspetto, il che li aiuta a trovarla. Quando un utente seleziona una singola posizione per visualizzare maggiori dettagli, puoi ingrandire la posizione per visualizzare le immagini satellitari disponibili da un angolo di 45°.

Il seguente esempio di codice imposta la mappa su un livello di zoom elevato, un tipo di mappa compatibile e un angolo di inclinazione che visualizzerà immagini a 45° se disponibili. I dettagli sulla disponibilità delle immagini a 45° sono illustrati nella documentazione.

function seeDetail(location) {
  map.setCenter(location);
  map.setZoom(19);
  map.setMapTypeId(google.maps.MapTypeId.HYBRID);
  map.setTilt(45);
}

Ripristino della visualizzazione mappa originale

Gli utenti spesso vogliono passare dalla visualizzazione dettagliata di una singola posizione alla visualizzazione riepilogativa di diverse posizioni vicine e viceversa. Per facilitare questa operazione, aggiungi un listener per rilevare quando l'utente esce dalla visualizzazione dettagli nelle interazioni con la mappa o nella visualizzazione elenco. Ad esempio, l'ascolto dell'evento zoom_changed sull'oggetto map indica che l'utente ha eseguito manualmente lo zoom indietro dalla visualizzazione dettagliata o ha chiamato un'altra funzione che ha aggiornato il livello di zoom. In questo esempio, la riduzione dello zoom reimposta la mappa sul tipo di mappa e sull'inclinazione originali.

let originalMapTypeId = google.maps.MapTypeId.ROADMAP;
map.addListener("zoom_changed", () => {
  const newZoom = map.getZoom()!;

  if (newZoom < 19) {
    map.setTilt(0);
    map.setMapTypeId(originalMapTypeId);
  }
});

Identificare la posizione dell'utente

Questo esempio utilizza: API Maps JavaScript Disponibile anche per: Android | iOS

Il componente chiave successivo di qualsiasi localizzatore è l'identificazione della posizione di partenza dell'utente. Per impostazione predefinita, potrai utilizzare i servizi di localizzazione mobile e la geolocalizzazione del browser web per richiedere le autorizzazioni utente per impostare l'origine come posizione attuale dell'utente. Tuttavia, l'utente potrebbe negare queste autorizzazioni o voler impostare una posizione diversa come punto di partenza.

Gli utenti di oggi sono abituati alla funzionalità di completamento automatico nella versione consumer di Google Maps. Questa funzionalità può essere integrata in qualsiasi applicazione utilizzando le librerie Places di Google Maps Platform su dispositivi mobili e web. Quando un utente digita un indirizzo, il completamento automatico compila il resto utilizzando i widget. Puoi anche fornire la tua funzionalità di completamento automatico utilizzando direttamente l'API Place Autocomplete Data.

Aggiungere la libreria Place Autocomplete al tuo sito è solo una questione di aggiungere un paio di parametri di query all'URL dello script dell'API Maps JavaScript. Nell'esempio seguente, l'aggiunta è libraries=places,marker.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places,marker&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a" defer></script>

Successivamente, aggiungi un elemento contenitore alla tua pagina in cui verrà aggiunto il widget PlaceAutocompleteElement.

<div id="autocomplete-container"></div>

Infine, inizializza il widget PlaceAutocompleteElement e aggiungilo al container. Limitare le Place Autocomplete predictions con includedPrimaryTypes: ["geocode"] configura il widget in modo che accetti indirizzi stradali, quartieri, città e codici postali, in modo che gli utenti possano inserire qualsiasi livello di specificità per descrivere la loro origine. Quando un utente seleziona una previsione, viene attivato l'evento gmp-select e puoi chiamare place.fetchFields() per richiedere il campo location contenente la latitudine e la longitudine dell'origine dell'utente. Utilizzerai queste coordinate della mappa per ricentrare la mappa e indicare la relazione delle tue sedi con l'origine.

  // Create the PlaceAutocompleteElement, restricting predictions to
  // geographical location types in the United Kingdom.
  const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({
    includedPrimaryTypes: ["geocode"],
    includedRegionCodes: ["gb"],
  });
  placeAutocomplete.placeholder = "Enter starting address, city, or zip code";
  document.getElementById("autocomplete-container").appendChild(placeAutocomplete);

  // When the user selects an address from the drop-down,
  // zoom to the selected location and add an advanced marker.
  placeAutocomplete.addEventListener("gmp-select", async ({ placePrediction }) => {
    const place = placePrediction.toPlace();
    await place.fetchFields({
      fields: ["location", "formattedAddress"],
    });
    addUserLocation(place);
  });
}

In questo esempio, una volta selezionato l'indirizzo, viene eseguita la funzione addUserLocation(). Viene presa la posizione del risultato corrispondente, la mappa viene spostata in quella posizione e viene aggiunto un indicatore avanzato.

function addUserLocation(place) {
  const pin = new google.maps.marker.PinElement({
    glyphText: "C",
  });

  // Add an advanced marker to the map.
  const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: place.location,
  });
  marker.append(pin);

  // Pan and zoom the map to the marker.
  map.panTo(place.location);
  map.setZoom(12);
}

Puoi quindi visualizzare la relazione tra l'utente e le località specifiche, come mostrato nell'immagine seguente.

Espandi questa sezione per visualizzare le procedure dettagliate video per aggiungere il completamento automatico dei luoghi alla tua app:

Sito web

App Android

App per iOS

Visualizzazione del tempo di percorrenza e della distanza dalle sedi più vicine

Questo esempio utilizza: API Routes Disponibile anche: Libreria Routes, API Maps JavaScript

Una volta ottenuta la posizione dell'utente, puoi confrontarla con le tue sedi. Se lo fai con la funzionalità Compute Route Matrix nell'API Routes (o nella classeRouteMatrix nella libreria Routes, API Maps JavaScript), aiuterai gli utenti a selezionare la posizione più comoda per loro in base al tempo di guida o alla distanza stradale.

Mostrare le sedi vicine a un utente implica che le tue sedi siano già popolate. Quando utilizzi il tuo database di località, la cosa fondamentale è assicurarsi che i dati siano in un formato utilizzabile in una mappa, come GeoJSON, descritto nell'argomento Livello dati.

Il modo standard di organizzare un elenco di località è ordinarle in base alla distanza. Spesso questa distanza viene calcolata utilizzando la linea retta da un utente alla posizione, ma questo può essere fuorviante. La linea retta potrebbe passare sopra un fiume impraticabile o attraverso strade trafficate in un momento in cui un'altra posizione potrebbe essere più comoda. Questo è importante quando hai più sedi a pochi chilometri di distanza l'una dall'altra.

Il metodo computeRouteMatrix funziona prendendo un elenco di località di origine e di destinazione e restituendo non solo la distanza di viaggio, ma anche il tempo di percorrenza tra le due località. Nel caso di un utente, l'origine sarebbe la sua posizione attuale o il suo punto di partenza preferito, mentre le destinazioni sarebbero quelle delle località. Le origini e le destinazioni possono essere specificate come coppie di coordinate, ID luogo o indirizzi. Puoi utilizzare computeRouteMatrix con le preferenze di routing, ad esempio TRAFFIC_AWARE, per mostrare i risultati in base ai tempi di guida attuali o futuri.

L'esempio seguente chiama l'endpoint computeRouteMatrix nell'API Routes, specificando l'origine dell'utente e gli ID luogo di destinazione. Questo esempio calcola la distanza e la durata del viaggio dal centro della mappa a tre uffici Google a Londra:

curl -X POST -d '{
  "origins": [
    {
      "waypoint": {
        "location": {
          "latLng": {
            "latitude": 51.493490,
            "longitude": -0.097288
          }
        }
      }
    }
  ],
  "destinations": [
    {
      "waypoint": {
        "placeId": "ChIJVSZzVR8FdkgRTyQkxxLQmVU"
      }
    },
    {
      "waypoint": {
        "placeId": "ChIJVSZzVR8FdkgR-HklrBMO0Hc"
      }
    },
    {
      "waypoint": {
        "placeId": "ChIJ4abvVDwbdkgRDZVFR7A6Bcc"
      }
    }
  ],
  "travelMode": "DRIVE",
  "routingPreference": "TRAFFIC_AWARE"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: originIndex,destinationIndex,duration,distanceMeters,status,condition' \
'https://routes.googleapis.com/distanceMatrix/v2:computeRouteMatrix'

La risposta del servizio contiene la distanza (in metri) e la durata per ogni coppia di origine e destinazione, simile a quella mostrata nel seguente esempio:

Espandi per visualizzare la risposta di esempio:

[
  {
    "originIndex": 0,
    "destinationIndex": 0,
    "status": {},
    "distanceMeters": 4540,
    "duration": "924s",
    "condition": "ROUTE_EXISTS"
  },
  {
    "originIndex": 0,
    "destinationIndex": 1,
    "status": {},
    "distanceMeters": 5043,
    "duration": "1044s",
    "condition": "ROUTE_EXISTS"
  },
  {
    "originIndex": 0,
    "destinationIndex": 2,
    "status": {},
    "distanceMeters": 6919,
    "duration": "1357s",
    "condition": "ROUTE_EXISTS"
  }
]

La seguente immagine mostra l'origine (indicatore rosso C) e le destinazioni su una mappa:

L'immagine mostra una mappa della città con la posizione dell'utente come indicatore rosso
               e le posizioni circostanti come indicatori verdi.

La distanza in linea retta e la distanza del percorso spesso differiscono, come illustrato nella tabella seguente.

Località Distanza in linea retta Strada nel traffico / tempo
Località A 3,32 km 4,5 km / 15 minuti
Posizione B 3,20 km 5 km / 17 minuti
Posizione C 4,84 km 6,9 km / 23 minuti

Anche se la posizione B è la più vicina in termini di distanza, il percorso e il tempo per raggiungerla sono più lunghi perché la posizione A è accessibile tramite un'autostrada.

Una volta effettuata questa richiesta, puoi elaborare la corrispondenza per ordinare le risposte in base alla durata del tempo di guida. Puoi trovare esempi di questa funzione nel codelab del localizzatore.

Questo esempio utilizza: Libreria Routes, API Maps JavaScript Disponibile anche: API Routes servizio web da utilizzare su Android e iOS, direttamente dall'applicazione o da remoto tramite un proxy server

Mostrare agli utenti le indicazioni stradali all'interno del tuo sito o delle tue applicazioni significa che non devono uscire dal tuo sito, quindi non verranno distratti da altre pagine o non vedranno i concorrenti sulla mappa. Con l'API Routes puoi anche richiedere percorsi ecosostenibili per stimare il consumo di carburante o energia e mostrare l'impatto ambientale di un viaggio.

La classe Route nella libreria Routes, API Maps JavaScript, dispone anche di metodi come createPolylines() e createWaypointAdvancedMarkers() che consentono di elaborare i risultati e visualizzarli su una mappa.

Di seguito è riportato un esempio di richiesta e visualizzazione di un percorso su una mappa. Per saperne di più sull'esempio, vedi Ottieni un itinerario.

Per scoprire di più su queste funzionalità di Maps, leggi la documentazione dell'API Maps JavaScript o dai un'occhiata al codelab passo passo per creare un localizzatore.

Aiutare gli utenti a prenotare appuntamenti

Quando gli utenti visualizzano i dettagli del luogo della tua sede in un riquadro laterale, puoi offrire la comodità di prenotare un appuntamento con un clic del pulsante, come illustrato nella figura seguente.

Esistono diversi modi per attivare questa funzionalità: (1) utilizzando la soluzione Builder rapido Locator Plus per fornire questa funzionalità pronta all'uso e (2) utilizzando il tuo profilo dell'attività. Questa sezione descrive in dettaglio queste opzioni.

Utilizzare Locator Plus di Builder rapido

Puoi utilizzare la soluzione Store Locator Plus di Builder rapido per importare rapidamente i dettagli dell'attività dal tuo profilo dell'attività. Una volta importati nello strumento Builder rapido, puoi attivare i link di prenotazione degli appuntamenti incorporati, se disponibili, per le sedi della tua attività utilizzando Prenota con Google. Anche se non hai un profilo dell'attività associato a un Account Google, puoi comunque utilizzare Builder rapido per incorporare link di prenotazione per le attività che hai già attivato con fornitori di servizi di prenotazione di terze parti tramite Prenota con Google*.

Attivare i link di prenotazione degli appuntamenti in un localizzatore di negozi con Prenota con Google
Aggiungi funzionalità di prenotazione al tuo localizzatore di negozi

*Prenota con Google è disponibile solo in determinati paesi e regioni in cui le attività collaborano con un fornitore di servizi di prenotazione . Se ti interessa Prenota con Google, ma non collabori con un partner di Prenota con Google, invita il tuo fornitore a inviare la sua richiesta compilando questo modulo di interesse e consulta la nostra documentazione per scoprire come iniziare. Se non collabori già con un fornitore di servizi di prenotazione, puoi visualizzare i fornitori idonei nella sezione Prenotazioni di Gestione dei profili delle attività.

Utilizzare il profilo dell'attività per attivare la prenotazione di appuntamenti

Quando gestisci la tua presenza online con il Profilo dell'attività, le sedi dell'attività che crei sono associate agli ID luogo di Google Maps Platform per attivare la funzionalità di mappatura integrata con i dati aziendali.

Le API Business Profile ti consentono di creare azioni, ad esempio la prenotazione di appuntamenti, che puoi recuperare e visualizzare nelle tue app, ma richiedono alcuni passaggi manuali per l'abilitazione, come descritto di seguito.

Quando gli utenti visualizzano i dettagli del luogo per una delle tue sedi in un riquadro laterale, puoi fornire un link per fissare un appuntamento. Questa sezione descrive come fare.

  1. Crea un'API Business Profile placeActionLink per la località di tipo APPOINTMENT, ONLINE_APPOINTMENT, o DINING_RESERVATION. placeActionLink sarà l'oggetto che utilizzerai per il link all'appuntamento nel riquadro laterale. (Se hai già creato il link all'azione di prenotazione che ti interessa, vai al passaggio successivo.) Ecco un esempio di risposta di un'operazione placeActionLinks.create POST riuscita:

    {
        "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc",
        "providerType": "MERCHANT",
        "isEditable": true,
        "uri": "https://example.com/reservation-uri",
        "placeActionType": "DINING_RESERVATION",
        "createTime": "2021-05-01T01:17:41.609161Z",
        "updateTime": "2021-05-01T01:17:41.609161Z"
    }
  2. Trova la sede del profilo dell'attività associata all'ID luogo di Google Maps Platform.

    Quando gli utenti visualizzano Place Details, visualizzano i dettagli di un ID luogo di Google Maps Platform. L'ID luogo è associato a un ID località del profilo dell'attività, quindi devi trovare l'ID località in base all'ID luogo della mappa per recuperare e visualizzare il link di prenotazione degli appuntamenti che hai creato. Esegui le seguenti chiamate API Business Profile:

    1. Elenca gli account del progetto.
    2. Elenca tutte le sedi all'interno di un account.
    3. Nelle posizioni dell'account, il LocationKey contiene l'ID luogo di Google Maps Platform, che puoi confrontare con l'ID luogo della posizione visualizzata.
  3. Con l'ID località, puoi ottenere il link all'azione che ti interessa. Per recuperare un appuntamento esistente placeActionLink, elenca placeActionLinks esistenti per la sede e filtra per placeActionType per trovare il link per la prenotazione di appuntamenti che vuoi utilizzare (APPOINTMENT, ONLINE_APPOINTMENT o DINING_RESERVATION).

    L'esempio seguente mostra un APPOINTMENT placeActionLink nella risposta della chiamata LIST.

     {
       "placeActionLinks": [
           {
               "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc",
               "providerType": "MERCHANT",
               "isEditable": true,
               "uri": "https://example.com/",
               "placeActionType": "APPOINTMENT",
               "createTime": "2021-05-01T01:17:41.609161Z",
               "updateTime": "2021-05-01T01:17:41.609161Z"
           }
       ]
     }
  4. Crea e compila un <div> nel riquadro laterale con i dati pertinenti dell'oggetto placeActionLink, in particolare l'URI del link di prenotazione dell'appuntamento.

Altre alternative per aggiungere link agli appuntamenti

Se non gestisci un Profilo dell'attività o non vuoi utilizzare la soluzione Builder rapido Locator Plus, controlla la documentazione della tua piattaforma di prenotazione di appuntamenti per informazioni sull'incorporamento di un widget di prenotazione in un sito web o un'app. Un'altra opzione è utilizzare Google Cloud, ad esempio Cloud Spanner per la gestione dell'inventario (video).

Visualizzazione delle offerte locali

Nel riquadro laterale Dettagli luogo di una sede, puoi mostrare le offerte locali su cui gli utenti possono fare clic. L'API Google My Business ti consente di creare e recuperare "post" (ad esempio offerte locali) associati alle tue sedi. La figura seguente mostra un esempio di offerta locale in un riquadro laterale Dettagli del luogo.

(Il diagramma dell'architettura nella sezione Builder rapido mostra le tecnologie disponibili per aggiungere offerte al localizzatore.)

Poiché le offerte locali sono associate alle località, devi trovare l'ID località del profilo dell'attività associato all'ID luogo di Google Maps Platform per la località visualizzata dagli utenti. Se hai l'ID località del profilo dell'attività, puoi recuperare l'offerta pertinente come localPost da visualizzare nel riquadro laterale dei dettagli del luogo. Procedi nel modo seguente:

  1. Con l'API Google My Business, crea tutti i post di offerte che vuoi mostrare, di tipo OFFER.
  2. Trova la sede / l'ID località del profilo dell'attività associato all'ID luogo sulla mappa.

    Quando gli utenti visualizzano Place Details, visualizzano i dettagli di un ID luogo di Google Maps Platform. L'ID luogo è associato a un ID sede del profilo dell'attività, quindi devi trovare l'ID sede in base all'ID luogo della mappa per recuperare e visualizzare il link all'offerta locale per la tua sede. Esegui le seguenti chiamate API Business Profile:

    1. Elenca gli account del tuo progetto.
    2. Elenca tutte le sedi all'interno di un account.
    3. Nelle posizioni dell'account, il LocationKey contiene l'ID luogo di Maps, che puoi confrontare con l'ID luogo della posizione visualizzata.

    Di seguito è riportato un esempio di richiesta dei dettagli di una località nelle API Business Profile:

    https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700

    La risposta contiene un campo locationKey, ovvero l'ID luogo che puoi utilizzare con le richieste di Google Maps Platform.

    Espandi per visualizzare la risposta di esempio.

          {
        "name": "accounts/111098884960588804666/locations/15899957830169237700",
        "locationName": "Sushi Sushi",
        "primaryPhone": "+49 2222 22222",
        "primaryCategory": {
            "displayName": "Restaurant",
            "categoryId": "gcid:restaurant",
        },
        "regularHours": {
            "periods": [
                {
                    "openDay": "MONDAY",
                    "openTime": "09:00",
                    "closeDay": "MONDAY",
                    "closeTime": "09:10"
                },
                {
                    "openDay": "TUESDAY",
                    "openTime": "11:30",
                    "closeDay": "TUESDAY",
                    "closeTime": "24:00"
                }
            ]
        },
        "locationKey": {
            "placeId": "ChIJs4wtL04X2jERbc8qHd_wZzk",
            "requestId": "2c72cbcb-ea2e-4d66-b684-0ef5f090300c"
        },
        "latlng": {
            "latitude": 1.3670033,
            "longitude": 103.8556385
        },
        "openInfo": {
            "status": "OPEN",
            "canReopen": true
        },
        "locationState": {
            "isGoogleUpdated": true,
            "canUpdate": true,
            "canDelete": true,
            "isVerified": true,
            "isPublished": true,
            "canHaveFoodMenus": true
        },
        "attributes": [
            {
                "attributeId": "has_delivery",
                "valueType": "BOOL",
                "values": [
                    false
                ]
            },
            {
                "attributeId": "requires_masks_customers",
                "valueType": "BOOL",
                "values": [
                    true
                ]
            },
            {
                "attributeId": "url_order_ahead",
                "valueType": "URL",
                "urlValues": [
                    {
                        "url": "https://example.com/"
                    },
                ]
            },
            {
                "attributeId": "pay_credit_card_types_accepted",
                "valueType": "REPEATED_ENUM",
                "repeatedEnumValue": {
                    "setValues": [
                        "visa"
                    ],
                    "unsetValues": [
                        "american_express"
                    ]
                }
            }
        ],
        "address": {
            "regionCode": "SG",
            "languageCode": "en-US",
            "postalCode": "560445",
            "addressLines": [
                "445 Ang Mo Kio Ave 10"
            ]
        },
        "profile": {
            "description": "Example restaurant"
        }
    }
          
  3. Ora che hai l'ID località, puoi ottenere l'offerta che ti interessa. Per recuperare un post di offerta esistente, elenca i localPosts esistenti per la località e filtra in base a topicType di OFFER per trovare i contenuti dell'offerta che vuoi utilizzare.

    Ecco una richiesta di esempio per elencare i post locali attivi per una località:

    https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700/localPosts

    L'esempio seguente mostra un OFFER localPost nella risposta.

    Espandi per visualizzare la risposta di esempio.

    {
        "localPosts": [
            {
                "name": "accounts/111098884960588804666/locations/15899957830169237700/localPosts/2524928563578730680",
                "languageCode": "en",
                "summary": "Buy One Get One Free on all order-ahead bento boxes today!",
                "state": "LIVE",
                "event": {
                    "title": "Bento BOGO",
                    "schedule": {
                        "startDate": {
                            "year": 2020,
                            "month": 1,
                            "day": 20
                        },
                        "startTime": {},
                        "endDate": {
                            "year": 2021,
                            "month": 1,
                            "day": 21
                        },
                        "endTime": {}
                    }
                },
                "updateTime": "2020-09-11T10:56:22.594Z",
                "createTime": "2020-09-11T10:56:22.594Z",
                "searchUrl": "https://local.google.com/place?id=4156539623820808045&use=posts&lpsid=2524928563578730680",
                "media": [
                    {
                        "name": "accounts/111098884960588804666/locations/15899957830169237700/media/localPosts/AF1QipOBQCIf40SbF_PPJxb_zvfCHmaTbv9Zw02PoYPS",
                        "mediaFormat": "PHOTO",
                        "googleUrl": "https://lh3.googleusercontent.com/p/AF1QipOBQCIf40SbF_PPJxb_zvfCHmaTbv9Zw02PoYPS"
                    }
                ],
                "topicType": "OFFER",
                "offer": {
                    "couponCode": "BOGO-JET-CODE",
                    "redeemOnlineUrl": "https://www.example.com/redeem",
                    "termsConditions": "Offer only valid for order-ahead orders placed online."
                }
            },
        ],
    }
            
  4. Crea e compila un <div> nel riquadro laterale con i dati pertinenti dell'oggetto localPost.

Personalizzare la mappa

Puoi modificare l'aspetto e i dettagli della mappa in diversi modi. Ad esempio, puoi:

  • Crea indicatori personalizzati per sostituire i segnaposto predefiniti.
  • Modifica i colori degli elementi della mappa in modo che riflettano il tuo brand.
  • Controlla quali punti di interesse visualizzare (attrazioni, cibo, alloggi e così via) e con quale densità, in modo da concentrare l'attenzione degli utenti sulle tue sedi, evidenziando i punti di riferimento che aiutano gli utenti a raggiungere la sede più vicina.

Creare indicatori per mappa personalizzata

Puoi personalizzare i marcatori avanzati modificando lo sfondo, il bordo o il colore del glifo del segnaposto predefinito (ad esempio, per indicare se una località è aperta), sostituendo il marcatore con un'immagine grafica personalizzata come il logo del tuo brand o creando marcatori HTML e CSS personalizzati. Le finestre informative possono fornire informazioni aggiuntive agli utenti, come orari di apertura, numero di telefono o foto.

Di seguito è riportata una mappa di esempio che utilizza indicatori grafici personalizzati. (Vedi il codice sorgente nell' argomento sui marcatori grafici personalizzati dell'API Maps JavaScript.)

Per informazioni dettagliate, consulta la documentazione sui marcatori avanzati per JavaScript (web), Android e iOS.

Applicare uno stile alla mappa

Google Maps Platform ti consente di personalizzare lo stile della mappa in modo da aiutare gli utenti a trovare la posizione più vicina, raggiungerla il più rapidamente possibile e rafforzare il tuo brand. Ad esempio, puoi modificare i colori della mappa in base al tuo brand e ridurre le distrazioni sulla mappa controllando i punti di interesse visibili agli utenti. Google Maps Platform fornisce anche una serie di modelli iniziali di mappe, alcuni dei quali sono ottimizzati per diversi settori, come viaggi, logistica, immobiliare e vendita al dettaglio.

Puoi creare o modificare gli stili di mappa nella pagina Stili mappa della console Google Cloud del tuo progetto.

Espandi per visualizzare le animazioni della creazione e dello stile degli stili di mappa nella console Cloud:

Stili di mappa per settore

Questa animazione mostra gli stili di mappa predefiniti specifici per settore che puoi utilizzare. Questi stili forniscono un punto di partenza ottimale per ogni tipo di settore. Ad esempio, lo stile di mappa Retail riduce i punti d'interesse sulla mappa, consentendo agli utenti di concentrarsi sulle tue sedi, nonché sui punti di riferimento per aiutarli a raggiungere la sede più vicina nel modo più rapido e sicuro possibile.

Nella pagina Stile mappa, il mouse fa clic su Crea nuovo stile mappa. Nella pagina
              Nuovo stile della mappa, il mouse fa clic sul pulsante di opzione accanto a ciascuno degli
              stili ottimizzati per il settore seguenti: viaggi, logistica, immobiliare e
              vendita al dettaglio. Man mano che fai clic su ogni pulsante, la descrizione dello stile di mappa e l'anteprima
              grafica cambiano.

Controllo dei punti d'interesse

Questa animazione imposta il colore del marcatore per i punti di interesse e aumenta la densità dei PDI nello stile della mappa. Maggiore è la densità, più indicatori PDI vengono visualizzati sulla mappa.

Nella pagina Stile mappa, il mouse fa clic su Crea nuovo stile mappa. Nella pagina
                Nuovo stile mappa, nella sezione Crea il tuo stile, è selezionato il pulsante di opzione
                Google Maps. Il mouse fa clic sul pulsante di opzione Atlas per lo stile Atlas,
                poi fa clic su Apri nell'editor di stili. Nell'editor di stili, i clic del mouse
                selezionano la funzionalità Punti di interesse, poi l'elemento Icona, impostando il
                colore su rosso. Il mouse seleziona quindi la casella di controllo Densità PDI e sposta
                il controllo della densità verso destra per la densità massima. Man mano che la densità aumenta, nella preview della mappa
                appaiono sempre più indicatori rossi. Il mouse si sposta
                sul pulsante Salva.

Ogni stile di mappa ha un proprio ID. Dopo aver pubblicato uno stile nella console Cloud, fai riferimento all'ID mappa nel codice, il che significa che puoi aggiornare uno stile di mappa in tempo reale senza eseguire il refactoring dell'app. Il nuovo aspetto verrà visualizzato automaticamente nell'applicazione esistente e verrà utilizzato su tutte le piattaforme. Gli esempi riportati di seguito mostrano come aggiungere un ID mappa a una pagina web utilizzando l'API Maps JavaScript.

Se includi uno o più map_ids nell'URL dello script, l'API Maps JavaScript rende automaticamente disponibili questi stili per un rendering più rapido della mappa quando li richiami nel codice.

<script
 src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&map_ids=MAP_IDs&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a">
</script>

Il seguente codice mostra una mappa con stile nella pagina web. (Non viene mostrato un elemento HTML <div id="map"></div> in cui la mappa verrà visualizzata sulla pagina.)

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 51.485925, lng: -0.129500},
  zoom: 12,
  mapId: '1234abcd5678efgh'
});

Scopri di più sull'incorporamento della personalizzazione delle mappe basata su cloud in JavaScript (web), Android, e iOS.

Ottenere approfondimenti sull'utilizzo con Analytics

Utilizzando Analytics, puoi ottenere informazioni preziose su come gli utenti interagiscono con il tuo localizzatore. Questa sezione fornisce indicazioni sulla configurazione e sul monitoraggio di Google Analytics e delle analisi del profilo dell'attività per monitorare i dati che ti interessano di più. Per gli utenti di Builder rapido Locator Plus, una dashboard di analisi consente di analizzare e generare approfondimenti, fornendo un quadro del livello di coinvolgimento dei visitatori del sito con lo Store locator, in base a dati anonimizzati.

Dashboard di analisi del localizzatore di negozi che mostra le metriche sul rendimento e sul coinvolgimento degli utenti
La dashboard di analisi dello Store locator fornisce metriche di rendimento

Per accedere a questo report, vai alla sezione dei report sul coinvolgimento della console Cloud. Per maggiori dettagli su questo report, consulta la sezione Report sul coinvolgimento.

Poiché Google Analytics offre molte funzionalità, non forniremo informazioni complete su configurazione e utilizzo. Ti indirizzeremo invece alla documentazione chiave per ulteriori letture e istruzioni, evidenziando al contempo le considerazioni chiave sull'analisi per la tua app di localizzazione.

Impostazione di Google Analytics

Se utilizzi già Google Analytics con la tua app, puoi saltare questa sezione.

Di seguito è riportato un esempio di "tag globale" da incollare sul tuo sito per attivare Google Analytics.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/
gtag/js?id=G-XR5B5D4NW0"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XR5B5D4NW0');
</script>

Che tu stia utilizzando Google Tag Manager o aggiungendo Google Analytics direttamente al tuo sito, la chiave è capire come utilizzare l'implementazione di Google Analytics per:

  • Attiva le interazioni degli utenti, ad esempio i clic, che possono essere misurati indipendentemente dalle visualizzazioni di pagina del sito web (eventi).
  • Visualizza i dati non elaborati (metriche) in raggruppamenti significativi (dimensioni o dimensioni personalizzate).

Utilizzo degli eventi personalizzati

Di seguito è riportato un esempio di definizione di un evento personalizzato nel locator:

gtag('event', 'location', {
  'method': 'address'
});

È importante denominare event e method in modo sufficientemente chiaro da poter comprendere gli eventi nei report. Attivali per le interazioni specifiche che vuoi misurare, ad esempio quando un utente seleziona un indirizzo dall'elenco a discesa del completamento automatico, come mostrato nella figura seguente.

Puoi inviare la seguente chiamata di monitoraggio a Google Analytics che utilizza l'evento e il metodo che hai definito. Mostreremo ogni parametro di query su una riga separata per facilitarne la lettura.

https://www.google-analytics.com/g/collect?v=2
&tid=G-XR5B5D4NW0
>m=2oe550
&_p=64678170
&sr=1920x1200
&ul=fr
&cid=489856786.1598861364
&_s=2
&dl=http%3A%2F%2.storelocator.html
&dt=Store%20Locator
&sid=1620827159
&sct=1
&seg=1
&en=location
&_et=6032
&ep.method=address

La figura seguente mostra come viene visualizzata la chiamata Google Analytics nella visualizzazione Ispeziona del browser, nella scheda Rete. (Fai clic per ingrandire).

Puoi verificare che i tag evento personalizzati vengano acquisiti correttamente visualizzando la visualizzazione "In tempo reale" in Google Analytics. Ad esempio, il set di eventi "location" configurato in precedenza per Place Autocomplete viene visualizzato in Google Analytics come mostrato nelle figure seguenti.

 

In alternativa, puoi monitorare gli eventi in tempo reale utilizzando DebugView, come mostrato nella figura seguente. Tieni presente che devi attendere 24 ore prima di accedere a un report Eventi completo nella sezione Coinvolgimento > Eventi di Google Analytics.

Puoi anche sviluppare e misurare strategie per aumentare le visite nei punti vendita verso le tue sedi fisiche dall'app di localizzazione. Ad esempio, Google Analytics offre una funzionalità di visite in negozio in Analytics che collega l'analisi delle visite in negozio (misurate da Google Ads) all'analisi dell'app di localizzazione. Puoi anche sviluppare le tue strategie da app a posizione, ad esempio offerte online riscattabili presso le tue sedi fisiche.

Metriche del profilo dell'attività

Oltre a monitorare gli eventi, le metriche e le dimensioni che ti interessano con Google Analytics, anche Profilo dell'attività ha le sue metriche. Ad esempio, se aggiungi link di prenotazione di appuntamenti e offerte locali al tuo localizzatore, puoi ottenere metriche su queste visualizzazioni e questi clic.

La seguente richiesta di esempio alle API Business Profile richiede più tipi di metriche. Per il monitoraggio dei clic sull'offerta, le metriche LOCAL_POST_VIEWS_SEARCH e LOCAL_POST_ACTIONS_CALL_TO_ACTION sono le più pertinenti.

Espandi per visualizzare la richiesta di esempio.

POST https://mybusiness.googleapis.com/v4/accounts/111098884960528804666/locations:reportInsights
Body:
{
 "locationNames": [
   "accounts/111098884960528804666/locations/15899957830169237700"
 ],
 "basicRequest": {
         "metricRequests": [
            {
              "metric": "QUERIES_DIRECT"
            },
            {
              "metric": "QUERIES_INDIRECT"
            },
            {
              "metric": "VIEWS_MAPS"
            },
            {
              "metric": "VIEWS_SEARCH"
            },
            {
                "metric": "ACTIONS_DRIVING_DIRECTIONS"
            },
            {
                "metric": "LOCAL_POST_VIEWS_SEARCH"
            },
            {
                "metric": "LOCAL_POST_ACTIONS_CALL_TO_ACTION"
            }
         ],
         "timeRange": {
              "startTime": "2021-01-01T01:01:23.045123456Z",
              "endTime": "2021-04-30T23:59:59.045123456Z"
         }
   }
}

Espandi per visualizzare la risposta di esempio.

{
   "locationMetrics": [
       {
           "locationName": "accounts/111098884960528804666/locations/15899957830169237700",
           "timeZone": "Asia/Singapore",
           "metricValues": [
               {
                   "metric": "QUERIES_DIRECT",
                   "totalValue": {
                       "metricOption": "AGGREGATED_TOTAL",
                       "timeDimension": {
                           "timeRange": {
                               "startTime": "2021-01-01T01:01:23.045123456Z",
                               "endTime": "2021-04-30T23:59:59.045123456Z"
                           }
                       },
                       "value": "82"
                   }
               },
               {
                   "metric": "QUERIES_INDIRECT",
                   "totalValue": {
                       "metricOption": "AGGREGATED_TOTAL",
                       "timeDimension": {
                           "timeRange": {
                               "startTime": "2021-01-01T01:01:23.045123456Z",
                               "endTime": "2021-04-30T23:59:59.045123456Z"
                           }
                       },
                       "value": "1493"
                   }
               },
               {
                   "metric": "VIEWS_MAPS",
                   "totalValue": {
                       "metricOption": "AGGREGATED_TOTAL",
                       "timeDimension": {
                           "timeRange": {
                               "startTime": "2021-01-01T01:01:23.045123456Z",
                               "endTime": "2021-04-30T23:59:59.045123456Z"
                           }
                       },
                       "value": "1571"
                   }
               },
               {
                   "metric": "VIEWS_SEARCH",
                   "totalValue": {
                       "metricOption": "AGGREGATED_TOTAL",
                       "timeDimension": {
                           "timeRange": {
                               "startTime": "2021-01-01T01:01:23.045123456Z",
                               "endTime": "2021-04-30T23:59:59.045123456Z"
                           }
                       },
                       "value": "631"
                   }
               },
               {
                   "metric": "ACTIONS_DRIVING_DIRECTIONS",
                   "totalValue": {
                       "metricOption": "AGGREGATED_TOTAL",
                       "timeDimension": {
                           "timeRange": {
                               "startTime": "2021-01-01T01:01:23.045123456Z",
                               "endTime": "2021-04-30T23:59:59.045123456Z"
                           }
                       },
                       "value": "3"
                   }
               },
               {
                   "metric": "LOCAL_POST_ACTIONS_CALL_TO_ACTION",
                   "totalValue": {
                       "metricOption": "AGGREGATED_TOTAL",
                       "timeDimension": {
                           "timeRange": {
                               "startTime": "2021-01-01T01:01:23.045123456Z",
                               "endTime": "2021-04-30T23:59:59.045123456Z"
                           }
                       },
                       "value": "42"
                   }
               },
               {
                   "metric": "LOCAL_POST_VIEWS_SEARCH",
                   "totalValue": {
                       "metricOption": "AGGREGATED_TOTAL",
                       "timeDimension": {
                           "timeRange": {
                               "startTime": "2021-01-01T01:01:23.045123456Z",
                               "endTime": "2021-04-30T23:59:59.045123456Z"
                           }
                       },
                       "value": "11"
                   }
               }
           ]
       }
   ]
}

La risposta contiene le metriche, in particolare:

  • 1571 visualizzazioni della posizione su Google Maps
  • 631 visualizzazioni della posizione sulla Ricerca Google.
  • 3 richieste di indicazioni stradali per la località.
  • 42 clic sull'offerta LOCAL_POST_ACTIONS_CALL_TO_ACTION.
  • 11 visualizzazioni dei Post su Google sulla Ricerca Google.

Un'altra opzione per le metriche prevede l'utilizzo di Prenota con Google per creare link di azione. Quando gli utenti fanno clic sui link di azione creati in Prenota con Google, puoi registrare queste azioni in Google Analytics, il che ti consente di monitorare le conversioni in Google Analytics. Per saperne di più, consulta la documentazione sul monitoraggio delle conversioni.

Indipendentemente dalla strategia di metriche che utilizzi, la misurazione non si limita a mostrare i tuoi risultati rispetto ai KPI. I numeri ti aiutano anche a capire l'impatto di questi miglioramenti dello strumento di ricerca sulla tua attività. Inoltre, puoi confrontare le metriche di Google Analytics sul tuo localizzatore con le metriche del profilo dell'attività. Ad esempio, confrontando queste metriche, puoi vedere quanti clienti ricevono indicazioni dal tuo localizzatore e da Google Maps per poi visitare le tue sedi fisiche.


Miglioramento di Locator Plus

A seconda delle esigenze della tua attività o dei tuoi utenti, puoi migliorare ulteriormente l'esperienza utente.

Invio delle indicazioni stradali al dispositivo mobile

Per consentire agli utenti di raggiungere più facilmente una località, puoi inviare loro un messaggio o un'email con un link alle indicazioni stradali. Quando l'utente fa clic, l'app Google Maps si avvia sul suo smartphone, se è installata, oppure maps.google.com si carica nel browser web del dispositivo. Entrambe le esperienze offrono all'utente la possibilità di utilizzare la navigazione passo passo, inclusa la guida vocale, per raggiungere la destinazione.

Utilizza gli URL di Maps per comporre un URL di indicazioni stradali come il seguente, con il nome del luogo codificato nell'URL come parametro destination e l'ID luogo come parametro destination_place_id. La composizione o l'utilizzo degli URL di Maps non comporta costi, pertanto non è necessario includere una chiave API nell'URL.

      https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU

Se vuoi, puoi fornire un parametro di query origin utilizzando lo stesso formato dell'indirizzo della destinazione. Tuttavia, se lo ometti, le indicazioni iniziano dalla posizione attuale dell'utente, che potrebbe essere diversa da quella in cui utilizzava l'app Locator Plus. Gli URL di Maps forniscono opzioni di parametri di query aggiuntivi, come travelmode e dir_action=navigate, per avviare le indicazioni con la navigazione attivata.

Questo link selezionabile, che estende l'URL di esempio riportato sopra, imposta origin come stadio di calcio di Londra e utilizza travelmode=transit per fornire indicazioni sul trasporto pubblico per raggiungere la destinazione.

Per inviare un messaggio o un'email contenente questo URL, ti consigliamo di utilizzare un'applicazione di terze parti come Twilio. Se utilizzi App Engine, puoi utilizzare società terze per inviare SMS o email. Per saperne di più, consulta Invio di messaggi con servizi di terze parti.

Mostrare Street View per aiutare gli utenti a visualizzare le località

Per molte località in tutto il mondo, Street View può essere utilizzato per mostrare l'esterno di una località, offrendo agli utenti una visualizzazione della località prima del loro arrivo. Puoi fornire Street View in formato interattivo (web) o statico (API), a seconda che tu voglia che i tuoi utenti "si guardino intorno" nell'area a 360 gradi. Street View è disponibile anche per Android e iOS.

Determinare la posizione dell'utente con la geolocalizzazione

Nella maggior parte dei casi, puoi individuare la posizione dell'utente utilizzando i servizi di localizzazione integrati nei suoi dispositivi o browser. Forniamo un esempio di utilizzo della funzionalità di geolocalizzazione HTML5 di un browser per visualizzare la posizione geografica di un utente o un dispositivo su una mappa di Google. Inoltre, è disponibile la documentazione sulla richiesta di autorizzazioni e sull'ottenimento della posizione in Android e iOS. Tuttavia, potrebbero esserci situazioni in cui vuoi un localizzatore alternativo, ad esempio se i servizi di localizzazione del dispositivo sono disattivati o se hai dubbi sulla falsificazione della posizione del dispositivo.

L' API Geolocation è un'API lato server che restituisce una posizione e un raggio di precisione in base alle informazioni sulle torri cellulari e sui nodi Wi-Fi che il client può rilevare. Puoi utilizzare la geolocalizzazione come meccanismo di backup per determinare la posizione dell'utente oppure per verificare la posizione segnalata dal dispositivo.

Combinare dati sulla posizione personalizzati con Place Details

Nella sezione precedente Fornire dettagli sui luoghi, abbiamo trattato l'utilizzo di Place Details per fornire agli utenti un livello elevato di informazioni sulle tue sedi, come orari di apertura, foto e recensioni.

È utile comprendere i livelli di prezzi e SKU dei diversi campi di dati nell'API Places (New). Per gestire i costi, una strategia consiste nel combinare le informazioni che già possiedi sulle tue sedi con le informazioni aggiornate di Google Maps, come chiusure temporanee, orari festivi e valutazioni, foto e recensioni degli utenti. Se hai già i dati di contatto delle tue sedi, non devi richiedere questi campi da Dettagli luogo e puoi limitare la maschera dei campi per recuperare solo i campi che vuoi visualizzare.

Potresti avere i tuoi dati sui luoghi da integrare o utilizzare al posto di Place Details. Il codelab per il localizzatore full-stack fornisce un esempio di utilizzo di GeoJSON con un database per archiviare e recuperare i dettagli della tua posizione.