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 il tuo

Builder rapido nella console Google Cloud ti consente di creare rapidamente un locator, inclusa l'importazione delle schede del Profilo dell'attività e l'incorporamento automatico dei link di prenotazione degli appuntamenti di 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. Vogliono raggiungere la tua sede il più rapidamente possibile e tu vuoi 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, vuoi misurare il successo del tuo localizzatore per determinare se i tuoi clienti riescono a trovare la tua sede e vuoi capire dove apportare miglioramenti.

Locator Plus, ovvero i suggerimenti per la guida e la personalizzazione che forniamo in questo argomento, è la combinazione ottimale di API Google Maps Platform che consigliamo per creare esperienze utente di localizzazione eccellenti. Seguendo queste pratiche, puoi aiutare gli utenti a trovare le tue sedi su una mappa, visualizzare le informazioni dettagliate di cui hanno bisogno per prendere decisioni e fornire 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, vedi 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 di posizione e contenuti, lo stile della mappa, i marcatori della mappa, Street View personalizzato e la visualizzazione di itinerari. Place Autocomplete per
              il completamento automatico dell'indirizzo e la funzionalità di digitazione predittiva. API Places e Geocoding per
              la posizione dell'indirizzo. API Distance Matrix per classificare le località in base a distanza, tempo e
              modalità di viaggio. API Directions per mostrare un percorso 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 pagina Guida introduttiva a Google Maps Platform.

Sezioni di implementazione

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

  • 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 semplice dei dettagli aziendali dalle schede del tuo profilo dell'attività, l'incorporamento dei link di prenotazione degli appuntamenti e il deployment su 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.
Visualizzare le località da una prospettiva a 45° Offri agli utenti una visualizzazione migliore 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 semplice dei dettagli aziendali dalle schede del tuo profilo dell'attività, l'incorporamento dei link di prenotazione degli appuntamenti e il deployment su 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 personalizza lo stile della mappa in modo che corrisponda ai colori del tuo brand. Mostra (o nascondi) punti d'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 tua strategia di localizzazione e sulla sua implementazione.
Invio di indicazioni stradali al dispositivo mobile Oltre a mostrare le indicazioni stradali sul localizzatore, puoi anche inviarle allo smartphone di un utente per la navigazione tramite Google Maps in movimento.
Mostrare Street View per aiutare gli utenti a visualizzare le località Offri 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 personalizzati sulla posizione con Place Details per fornire agli utenti un ricco insieme di dati per prendere decisioni.

Mostrare le tue posizioni su una mappa interattiva

Il localizzatore è una parte importante dell'esperienza utente. Alcuni siti, tuttavia, potrebbero non avere nemmeno una semplice mappa, costringendo gli utenti a 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.

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 la tua implementazione di Mappe dinamiche. 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à visualizzata nello Store locator del 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.

Integrazione di Profilo dell'attività
Gestisci facilmente le tue sedi in Locator Plus importando i dettagli dell'attività dal tuo profilo

Esegui il deployment nel cloud
Implementa facilmente la tua soluzione Locator Plus utilizzando Google Cloud

Utilizzo della tua implementazione di Dynamic Maps

Questo esempio utilizza: API Maps JavaScript Disponibile anche: 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.

Innanzitutto, devi includere l'API Maps JavaScript nella pagina. A tale scopo, collega il seguente script nella pagina HTML.

<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&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 della copertura di Google Maps Platform per un elenco completo delle lingue e delle regioni supportate e scopri di più sull'utilizzo del parametro region.

Poi, 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, 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 riportato sopra.

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: 51.485925, lng: -0.129500 },
    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 viene aumentato lo zoom sulla mappa in 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 Disponibile anche: JavaScript

Potresti avere 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 corrispondente a ciascuna delle posizioni nel tuo database. Puoi effettuare una chiamata all' endpoint Trova luogo in Place Search dell'API Places e richiedere solo il campo place_id. Ecco un esempio di richiesta dell'ID luogo per la sede di Google a Londra:

https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=google%20london&inputtype=textquery&fields=place_id&key=YOUR_API_KEY&solution_channel=GMP_guides_locatorplus_v2_a

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 eseguire il geocoding, recuperare i dettagli del luogo e richiedere indicazioni stradali per raggiungere il luogo.

Geocoding delle tue sedi

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 di quell'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 alla mappa, anche se puoi utilizzare diverse altre opzioni, ad esempio livelli di dati.

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

var marker = new google.maps.Marker({
    position: { lat: 51.493073, lng: -0.146550 },
    label:"A",
    title:"Location Name"
});

// To add the marker to the map, call setMap();
marker.setMap(map);

Con alcuni indicatori, puoi visualizzare la posizione di più sedi contemporaneamente.

Se sono presenti molte località, ti consigliamo di utilizzare un'utilità di clustering 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 dei luoghi

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

Puoi condividere i Place Details che gli utenti devono conoscere prima di visitare una delle tue sedi. Grazie ai dettagli avanzati del luogo, 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, puoi filtrare e visualizzare la risposta in una finestra informativa, in una barra laterale web o in qualsiasi altro modo preferisci.

Per richiedere Places Details, devi disporre dell'ID luogo di ciascuna delle tue sedi. Consulta Recuperare gli ID luogo per recuperare l'ID luogo della tua posizione.

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

Visualizzare gli orari di apertura

Controllare le chiusure

Costi sotto controllo

L'esempio seguente utilizza la 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 attivazione di una richiesta di dettagli del 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({
    map,
    position: { lat: 51.493073, lng: -0.14655 },
  });
  const request = {
    placeId: "ChIJVSZzVR8FdkgRTyQkxxLQmVU",
    fields: ["name", "formatted_address", "rating", "website"],
  };
  const infowindow = new google.maps.InfoWindow();
  const service = new google.maps.places.PlacesService(map);

  google.maps.event.addListener(marker, "click", function () {
    service.getDetails(request, (place, status) => {
      if (status === google.maps.places.PlacesServiceStatus.OK && place) {
        infowindow.setContent(
          "<div><strong>" +
            place.name +
            "</strong><br>" +
            place.formatted_address +
            "<br>" +
            "Rating: " +
            place.rating +
            " stars<br>" +
            place.website +
            "</div>"
        );

        infowindow.open(map, this);
      }
    });
  });
  
  

Visualizzazione delle posizioni da una visuale a 45°

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

Offrire agli utenti una visualizzazione aerea della tua posizione li aiuta a farsi un'idea più chiara di come appare, il che li aiuta a trovarla più facilmente. Quando un utente seleziona una singola posizione per visualizzare maggiori dettagli, puoi aumentare lo zoom su quella posizione per mostrare 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. Per facilitare questa operazione, aggiungi un listener per rilevare quando l'utente esce dalla visualizzazione dettagliata 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 ridotto manualmente lo zoom 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 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, puoi 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 tramite l'utilizzo di widget. Puoi anche fornire la tua funzionalità di completamento automatico utilizzando direttamente le librerie Places.

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.

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

Poi, aggiungi una casella di testo alla pagina per l'input dell'utente.

<input id="autocomplete" placeholder="Enter starting
      address, city, or zip code" type="text"></input>

Infine, devi inizializzare il servizio Autocomplete e collegarlo alla casella di testo denominata. Limitare le previsioni di Place Autocomplete ai tipi di geocodifica configura il campo di immissione 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. Assicurati di richiedere il campo geometry in modo che la risposta contenga la latitudine e la longitudine dell'origine dell'utente. Utilizzerai queste coordinate della mappa per ricentrare la mappa e indicare la relazione tra le tue posizioni e l'origine.

  // Create the autocomplete object, restricting the search predictions to
  // geographical location types.
  const autocomplete = new google.maps.places.Autocomplete(
    document.getElementById("autocomplete"),
    { types: ["geocode"],
      componentRestrictions: {'country': ['gb']},
      fields: ['place_id', 'geometry', 'formatted_address'] }
  );
  // When the user selects an address from the drop-down
  // zoom to the select location and add a marker.
  autocomplete.addListener("place_changed", addUserLocation);
}

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

function addUserLocation() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();

  // Add a marker to the map.
  const marker = new google.maps.Marker({
          map: map
        });

  marker.setLabel("C");
  marker.setPosition(place.geometry.location);

  // Zoom the map to the marker.
  map.panTo(place.geometry.location);
  map.setZoom(12);
}

Puoi quindi vedere 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 dai luoghi più vicini in corso…

Questo esempio utilizza: API Distance Matrix (legacy) Disponibile anche: Servizio Distance Matrix, API Maps JavaScript (legacy)

Una volta ottenuta la posizione dell'utente, puoi confrontarla con quella delle tue sedi. Se lo fai con il servizio Distance Matrix, API Maps JavaScript (legacy), i tuoi utenti possono selezionare la posizione più comoda per loro in base al tempo di guida o alla distanza stradale.

La visualizzazione delle 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 semplicemente 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 servizio Distance Matrix funziona prendendo un elenco di località di origine e di destinazione e restituendo non solo la distanza di viaggio, ma anche il tempo necessario per spostarsi tra le due località. Nel caso di un utente, l'origine sarebbe la sua posizione attuale o il punto di partenza desiderato, mentre le destinazioni sarebbero quelle delle sedi. Le origini e le destinazioni possono essere specificate come coppie di coordinate o come indirizzi; questi ultimi verranno abbinati quando viene chiamato il servizio. Puoi utilizzare Distance Matrix con una serie di parametri aggiuntivi per mostrare i risultati in base ai tempi di guida attuali o futuri.

L'esempio seguente chiama il servizio Distance Matrix, specificando l'origine e le posizioni dell'utente. Questo esempio mostra la distanza dal centro della mappa a tre uffici Google a Londra.

Riferimento rapido alla codifica URL: %2C = , (virgola), %3A = : (due punti), e %7C = | (barra verticale).

      https://maps.googleapis.com/maps/api/distancematrix/json?origins=51.493490%2C-0.097288
      &destinations=place_id%3AChIJVSZzVR8FdkgRTyQkxxLQmVU%7Cplace_id%3AChIJVSZzVR8FdkgR-HklrBMO0Hc%7Cplace_id%3AChIJ4abvVDwbdkgRDZVFR7A6Bcc
      &units=metric
      &mode=driving
      &key=YOUR_API_KEY
      &solution_channel=GMP_guides_locatorplus_v2_a

Ecco una versione che puoi copiare ed eseguire:

      https://maps.googleapis.com/maps/api/distancematrix/json?key=YOUR_API_KEY&origins=51.493490%2C-0.097288&destinations=place_id%3AChIJVSZzVR8FdkgRTyQkxxLQmVU%7Cplace_id%3AChIJVSZzVR8FdkgR-HklrBMO0Hc%7Cplace_id%3AChIJ4abvVDwbdkgRDZVFR7A6Bcc&units=metric&mode=driving&solution_channel=GMP_guides_locatorplus_v2_a

La risposta effettiva del servizio sarà un elenco di indirizzi, distanze e durate corrispondenti, simile a quella mostrata nell'esempio seguente:

Espandi per visualizzare la risposta di esempio:

{
    "destination_addresses": [
        "123 Buckingham Palace Rd, Victoria, London SW1W 9SH, UK",
        "1-13 St Giles High St, West End, London WC2H 8AG, UK",
        "6 Pancras Square, Kings Cross, London N1C 4AG, UK"
    ],
    "origin_addresses": [
        "Unnamed Road, London, UK"
    ],
    "rows": [
        {
            "elements": [
                {
                    "distance": {
                        "text": "4.5 km",
                        "value": 4540
                    },
                    "duration": {
                        "text": "15 mins",
                        "value": 924
                    },
                    "status": "OK"
                },
                {
                    "distance": {
                        "text": "5.0 km",
                        "value": 5043
                    },
                    "duration": {
                        "text": "17 mins",
                        "value": 1044
                    },
                    "status": "OK"
                },
                {
                    "distance": {
                        "text": "6.9 km",
                        "value": 6919
                    },
                    "duration": {
                        "text": "23 mins",
                        "value": 1357
                    },
                    "status": "OK"
                }
            ]
        }
    ],
    "status": "OK"
}

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

L&#39;immagine mostra una mappa della città con la posizione dell&#39;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
Posizione 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 nei codelab.

Questo esempio utilizza: Servizio Directions dell'API Maps JavaScript Disponibile anche: API Directions (legacy) 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. Potresti persino mostrare le emissioni di carbonio della modalità di viaggio specifica e l'impatto di un determinato viaggio.

Il servizio Directions dispone anche di funzioni che consentono di elaborare i risultati e visualizzarli facilmente su una mappa.

Di seguito è riportato un esempio di visualizzazione di un riquadro delle indicazioni. Per ulteriori informazioni sul campione, vedi Visualizzazione delle indicazioni stradali testuali.

Per saperne di più su queste funzionalità di Maps, leggi la documentazione dell'API Maps JavaScript o dai un'occhiata ai 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 facilmente i dettagli aziendali 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à tramite 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 prenotazioni di terze parti tramite Prenota con Google*.

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 supportato. Se ti interessa Prenota con Google, ma al momento non collabori con un partner di Prenota con Google, invita il tuo fornitore a inviare la sua dichiarazione di interesse 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, come la prenotazione di appuntamenti, che puoi recuperare e visualizzare nelle tue app, ma richiedono alcuni passaggi manuali per l'attivazione, 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.

  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 POST placeActionLinks.create 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 i dettagli del luogo, 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. Effettua le seguenti chiamate alle 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 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 placeActionLink esistente, elenca i 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 per gli 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 di 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 dei 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 sedi, devi trovare l'ID località del profilo dell'attività associato all'ID luogo di Google Maps Platform per la sede che gli utenti stanno visualizzando. Se hai l'ID località del Profilo dell'attività, puoi recuperare l'offerta pertinente come localPost da visualizzare nel riquadro laterale di Place Details. Procedi nel modo seguente:

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

    Quando gli utenti visualizzano i dettagli del luogo, 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 all'offerta locale per la tua località. Effettua le seguenti chiamate alle 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 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 per 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 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 segnaposti 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.

Creazione di indicatori per mappe personalizzate

Puoi personalizzare i tuoi indicatori modificando il colore predefinito (che potrebbe indicare se una località è attualmente aperta) o sostituendo l'indicatore con un'immagine personalizzata, ad esempio il logo del tuo brand. Le finestre informative, o finestre popup, possono fornire informazioni aggiuntive agli utenti, come orari di apertura, numero di telefono o persino foto. Puoi anche creare indicatori personalizzati raster, vettoriali, trascinabili e persino animati.

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

Per informazioni dettagliate, consulta la documentazione sui marcatori 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.

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 dei seguenti stili ottimizzati per il settore: viaggi, logistica, immobiliare e vendita al dettaglio. Man mano che fai clic su ogni pulsante, la descrizione dello stile di mappa e l&#39;anteprima
              grafica cambiano.

Controllo dei punti di interesse

Questa animazione imposta il colore dell'indicatore per i punti di interesse e aumenta la densità dei PDI nello stile di 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&#39;editor di stili. Nell&#39;editor di stili, i clic del mouse
                selezionano la funzionalità Punti di interesse, quindi l&#39;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 compaiono 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 a questo 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 seguenti 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 l'analisi, 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 insight, fornendo un'immagine del livello di coinvolgimento dei visitatori del sito con lo Store locator, in base a dati anonimizzati.

Locator Plus Analytics
La dashboard di analisi dello Store locator fornisce metriche sul rendimento

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

Data la potenza e la flessibilità di Google Analytics, non tenteremo di fornire informazioni complete su configurazione e utilizzo. Ti indirizzeremo invece alla documentazione chiave per ulteriori letture e istruzioni, evidenziando al contempo le considerazioni chiave relative all'analisi per la tua app di localizzazione.

Impostazione di Google Analytics

Se già utilizzi 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 svolgere le seguenti operazioni:

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

Utilizzo di eventi personalizzati

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

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, 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 Ispezione 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, l'evento "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 della tua app di localizzazione. Puoi anche sviluppare le tue strategie da app a sede, ad esempio offerte online riscattabili nelle 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 il 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 sulle offerte, le metriche LOCAL_POST_VIEWS_SEARCH e LOCAL_POST_ACTIONS_CALL_TO_ACTION sarebbero 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 sede sulla Ricerca Google.
  • 3 richieste di indicazioni stradali per raggiungere la sede.
  • 42 clic sull'offerta LOCAL_POST_ACTIONS_CALL_TO_ACTION.
  • 11 visualizzazioni dei post locali 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, 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 degli utenti, puoi migliorare ulteriormente l'esperienza utente.

Invio di 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. Non è previsto alcun costo per comporre o utilizzare gli URL di Maps, pertanto non è necessario includere una chiave API nell'URL.

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

Puoi fornire facoltativamente un parametro di query origin utilizzando lo stesso formato dell'indirizzo della destinazione. Se lo ometti, le indicazioni stradali 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 aggiuntive per i parametri di query, ad esempio travelmode e dir_action=navigate, per avviare le indicazioni stradali con la navigazione attivata.

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

Per inviare un messaggio o un'email contenente questo URL, al momento 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à del 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 verificarsi situazioni in cui è necessario 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 i dettagli del luogo

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

È utile comprendere il costo dei diversi campi di dati in Place Details, che sono classificati come dati di base, di contatto e sull'ambiente. Per gestire i costi, una strategia consiste nel combinare le informazioni che già possiedi sulle tue sedi con le informazioni aggiornate (di solito dati di base e di contatto) di Google Maps, come chiusura temporanea, 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 Place Details e puoi limitare la richiesta per recuperare solo i campi Basic o Atmosphere Data a seconda di ciò 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.