Guida all'implementazione di Locator Plus

Panoramica

Web iOS API

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

Crealo subito!

Builder rapido in Google Cloud Console ti consente di creare rapidamente un localizzatore, importando i profili delle attività e incorporando automaticamente i link di prenotazione degli appuntamenti da provider di terze parti. L'interfaccia utente interattiva ti consente di generare codice e di eseguirne il deployment su Cloud in pochi minuti.

I tuoi utenti vogliono cercare prodotti e servizi online e trovare la sede migliore e più comoda da visitare, prendere un appuntamento o ritirare un ordine. Vuole arrivare nella tua sede il più rapidamente possibile e vuoi offrire esperienze online complete che aumentino le visite alle tue sedi fisiche, rafforzino la soddisfazione degli utenti e restringano le chiamate di assistenza. Vuoi anche misurare il successo del localizzatore per determinare se i tuoi clienti possono trovare la tua località e capire dove apportare miglioramenti.

Locator Plus, i consigli e le personalizzazioni che forniamo in questo argomento, è ciò che consigliamo come combinazione ottimale di API di Google Maps Platform per creare esperienze utente di alta qualità nel localizzatore. Attraverso queste pratiche, puoi aiutare gli utenti a trovare le tue sedi su una mappa, visualizzare informazioni dettagliate di cui hanno bisogno per prendere decisioni e fornire loro indicazioni stradali, sia che stiano guidando, andando in bicicletta, a piedi o utilizzando il trasporto pubblico.

Per gli utenti di Locator Plus, una dashboard di analisi consente di analizzare e generare informazioni dai dati, fornendo un quadro chiaro del livello di interazione degli acquirenti con lo 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 dati sulla tua posizione che puoi combinare con Dettagli del luogo per offrire agli utenti la migliore e più completa serie di informazioni possibile. (Fai clic per ingrandire).

Sul lato sinistro del diagramma, un browser web mostra una mappa con un popup Dettagli luogo.
              A destra del diagramma, si trova un elenco di API che offrono diverse funzionalità: l'API Maps JavaScript per la visualizzazione e i contenuti delle località, lo stile delle mappe, gli indicatori e gli indicatori personalizzati di Street View, nonché la visualizzazione dei percorsi. Posiziona Autocomplete per
              il completamento dell'indirizzo e la funzionalità di digitazione. Luoghi e API di geocodifica per la posizione dell'indirizzo. API Distanza Matrice per classificare le località in base a distanza, tempo e modalità di viaggio. API Directions per mostrare un percorso in base a tempo e modalità di viaggio.
              Al centro del diagramma, vedi l'icona di un datastore che rappresenta i punti dati personalizzati sulla posizione, fino a un'icona di un server web con una freccia doppia che indica la lettura e la scrittura di dati tra il server web e l'archivio dati. Le frecce tra il browser web e le API passano attraverso il server web come intermediari.

Abilitazione delle API in corso…

Per implementare queste pratiche, devi abilitare le seguenti API in Google Cloud Console: Per saperne di più sulla configurazione, consulta la 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 vedere i dettagli della località, spostarsi, nonché aumentare e diminuire lo zoom.

Oppure esplora la soluzione Quick Builder Locator Plus per creare rapidamente una mappa, compresa l'importazione semplificata dei dettagli dell'attività dalle schede del profilo dell'attività, l'incorporamento dei link di prenotazione degli appuntamenti e il deployment in Google Cloud Storage.

Fornisci i dettagli del luogo Dopo che gli utenti hanno trovato le sedi più vicine su una mappa, fornisci loro dettagli significativi sui luoghi per aiutarli a prendere decisioni.
Visualizzazione delle località da una visualizzazione a 45° Offri agli utenti una visuale migliore della tua posizione nella vista satellitare da un'angolazione di 45°.
Identificazione della posizione dell'utente Aggiungi la funzionalità di digitazione a consumo per migliorare l'esperienza utente su tutte le piattaforme e ottenere una migliore accuratezza degli indirizzi con la pressione minima dei tasti.
Visualizzazione del tempo di percorrenza e della distanza per le località più vicine Calcola la distanza e il tempo di percorrenza per più origini e destinazioni, facoltativamente specificando varie forme di trasporto, ad esempio a piedi, in auto o in bicicletta.
Aiutare gli utenti a prenotare gli appuntamenti

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

Oppure esplora la soluzione Quick Builder Locator Plus per creare rapidamente una mappa, compresa l'importazione semplificata dei dettagli dell'attività dalle schede del profilo dell'attività, l'incorporamento dei link di prenotazione degli appuntamenti e il deployment in Google Cloud Storage.

Mostrare offerte locali Mostra agli utenti offerte locali selezionabili nel riquadro laterale Dettagli luogo.
Fornire indicazioni stradali Ottieni dati relativi alle indicazioni stradali da origine a destinazione utilizzando vari tipi di trasporto, ad esempio a piedi, in auto, in bicicletta e con il trasporto pubblico.
Personalizzare la mappa Crea indicatori personalizzati per mettere in risalto le località e definisci lo stile della mappa in base ai colori del brand. Mostra (o nascondi) punti di interesse specifici (PDI) sulla mappa per aiutare gli utenti a orientarsi meglio e regola la densità dei PDI per prevenire il disordine.
Ottenere informazioni sull'utilizzo con dati e analisi Configura e utilizza Google Analytics per ottenere insight sulla strategia e sull'implementazione del tuo locator.
Inviare le indicazioni stradali al dispositivo mobile Oltre a mostrare le indicazioni stradali sul localizzatore, puoi anche inviarle al telefono di un utente per navigare utilizzando Google Maps ovunque ti trovi.
Visualizzazione di Street View per aiutare gli utenti a visualizzare le sedi Offri agli utenti immagini di Street View con viste a 360 gradi per orientarli meglio e aiutare gli utenti a trovare le tue sedi più velocemente.
Individuazione della posizione dell'utente con geolocalizzazione Se non vuoi fare affidamento sui servizi di geolocalizzazione sul dispositivo, utilizza la geolocalizzazione per identificare la posizione dell'utente.
Combinare i dati sulla posizione personalizzati con i dettagli del luogo Combina i dettagli personalizzati sulla tua posizione con Dettagli luogo per offrire agli utenti un set di dati completo per prendere decisioni.

Visualizzazione delle località su una mappa interattiva

Un locator è una parte importante dell'esperienza utente. Ad alcuni siti, tuttavia, potrebbe mancare anche una semplice mappa, 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.

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 Dynamic Maps. In questa sezione vengono descritte in dettaglio queste opzioni.

Utilizzo di Builder rapido Plus

Puoi utilizzare la soluzione Quick Builder Locator Plus per importare i dettagli dell'attività dal profilo della tua attività. Per questo motivo, una modifica ai dettagli dell'attività verrà applicata nel localizzatore del sito web. Queste modifiche possono includere orari, dati di contatto, foto, opzioni di servizio e altro ancora. Builder rapido consente di esplorare rapidamente la configurazione delle sedi dell'attività su una mappa, generare codice di cui è possibile eseguire il deployment o eseguire il deployment direttamente su Google Cloud Storage in pochi minuti.

Integrazione del profilo dell'attività
Gestisci facilmente le tue sedi in Locator Plus importando i dettagli della tua attività dal profilo della tua attività

Deployment nel cloud
Esegui facilmente il deployment della tua soluzione Locator Plus utilizzando Google Cloud

Utilizzo della tua implementazione di Dynamic Maps

In questo esempio vengono utilizzate: l'API Maps JavaScript Disponibile anche: Android | iOS

L'aggiunta di una mappa dinamica alla tua pagina, ovvero una mappa che gli utenti possono spostare, aumentare o diminuire lo zoom e ottenere dettagli su diversi luoghi e punti di interesse può essere eseguita con alcune 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 al caricamento della pagina. Nell'URL puoi anche definire la lingua o l'area geografica della mappa per assicurarti che sia formattata nel modo corretto per il paese specifico scelto 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 aree geografiche supportate e scopri di più sull'utilizzo dei parametri region.

Successivamente, hai bisogno di un HTML div per posizionare la mappa sulla pagina. È il luogo in cui verrà visualizzata la mappa.

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

Il passaggio successivo consiste nell'impostare le funzionalità di base della mappa. Questo viene fatto nella funzione script initMap specificata nell'URL script. In questo script, mostrato nell'esempio seguente, puoi impostare la località iniziale, il tipo di mappa e quali controlli saranno disponibili sulla mappa per i tuoi utenti. Nota che getElementById() fa riferimento all'ID div "mappe" 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, solitamente ti interessa impostare la posizione iniziale, il punto centrale o i limiti e il livello di zoom (in che misura la mappa è ingrandita in quel luogo). La maggior parte degli altri elementi, come l'ottimizzazione dei controlli, è facoltativa in quanto determina il livello di interazione con la mappa.

Acquisizione degli ID dei luoghi

In questo esempio vengono utilizzate: l'API Places Disponibile anche: JavaScript

Potresti avere un database delle tue sedi con informazioni di base, come il nome della sede, il suo indirizzo e il suo numero di telefono. Per recuperare le informazioni su Google Maps Platform relative a quel luogo, incluse le coordinate geografiche e le informazioni fornite dagli utenti, trova l'ID luogo corrispondente a ciascuna sede nel tuo database. Puoi chiamare l' endpoint Trova luogo nella ricerca di luoghi dell'API Places e richiedere solo il campo place_id. Ecco un esempio di richiesta dell'ID luogo della 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 per richiedere informazioni sul luogo. Di seguito sono riportate le istruzioni per utilizzare l'ID luogo per geocodificare, recuperare i dettagli del luogo e richiedere le indicazioni stradali per raggiungerlo.

Geocodifica di luoghi

In questo esempio vengono usate: API Geocoding Disponibile anche: JavaScript

Se il database delle località include indirizzi stradali, ma non coordinate geografiche, utilizza l'API Geocoding per ottenere la latitudine e la longitudine di quell'indirizzo al fine di posizionare l'indicatore sulla mappa. Puoi geocodificare i tuoi indirizzi sul lato server, archiviare le latitudine e la longitudine del database e aggiornarlo almeno ogni 30 giorni.

Ecco un esempio di utilizzo dell'API Geocoding per ottenere la latitudine e 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

Aggiungere località alla mappa

Il passaggio successivo consiste nell'aggiungere le tue sedi alla mappa. A tal fine, aggiungi indicatori alla mappa, anche se puoi utilizzare altre numerose opzioni, come i livelli di dati.

Una volta ottenuti i valori di latitudine e longitudine per la tua posizione, di seguito è riportato un esempio di aggiunta di 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ù località insieme.

Se sono presenti molte località, puoi utilizzare un'utilità di clustering degli indicatori per JavaScript, Android o iOS. Ecco un esempio di clustering di indicatori nell'esempio di GitHub del negozio JavaScript.

Specificare i dettagli del luogo

In questo esempio viene utilizzata: API Maps JavaScript Disponibile anche: API | Android | iOS

Puoi condividere i dettagli del luogo che gli utenti devono conoscere prima di visitare una delle tue sedi. Grazie a informazioni dettagliate sul luogo, ad esempio dati di contatto, orari di apertura, valutazioni degli utenti, foto degli utenti e stato di chiusura temporanea, gli utenti sapranno esattamente cosa aspettarsi quando visitano la sede. Dopo aver effettuato una chiamata all'API Places, puoi filtrare e visualizzare la risposta in una finestra informativa, in una barra laterale del Web o in qualsiasi altro modo.

Per richiedere i dettagli del luogo, è necessario l'ID di ciascuna sede. Consulta la sezione Recupero degli ID luogo per recuperare l'ID del luogo.

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

Sapere gli orari di apertura

Controllare le chiusure

Costi sotto controllo

L'esempio seguente utilizza la libreria Places, l'API Maps JavaScript per recuperare i dettagli dei luoghi e aggiungerli a un'infoInfo. Questa implementazione utilizza la strategia di risparmio sui costi di attivazione di una richiesta Dettagli luogo solo quando l'utente richiede dettagli facendo clic sull'indicatore anziché recuperarli preventivamente per tutte le località, a prescindere 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 località da una visualizzazione a 45°

In questo esempio viene utilizzata: API Maps JavaScript Disponibile anche: Android | iOS

Offrire agli utenti una vista aerea della tua posizione permette loro di avere un'idea più chiara di come appare, in modo da ritrovare più facilmente ciò che cerchi. Quando un utente seleziona una singola località per visualizzare ulteriori dettagli, può aumentare lo zoom su quella località per visualizzare le immagini satellitari disponibili da un angolo di 45°.

Il seguente esempio di codice imposta una mappa a un livello di zoom elevato, a un tipo di mappa compatibile e a 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 vista mappa originale

Gli utenti spesso vogliono passare dalla visualizzazione dettagliata della singola località alla visualizzazione di riepilogo delle località più vicine. Per facilitare questa operazione, aggiungi un listener per rilevare quando l'utente esce dalla visualizzazione dei dettagli nelle interazioni mappa o nella visualizzazione elenco. Ad esempio, in ascolto dell'evento zoom_changed sull'oggetto map indica che l'utente ha diminuito manualmente lo zoom dalla visualizzazione dettagliata o ha chiamato un'altra funzione che ha aggiornato il livello di zoom. In questo esempio, con lo zoom si reimposta la mappa sul tipo di mappa originale e si inclina.

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

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

Identificazione della posizione dell'utente

In questo esempio viene utilizzata: API Maps JavaScript Disponibile anche: Android | iOS

Il prossimo componente chiave in qualsiasi localizzatore è l'identificazione della posizione iniziale dell'utente. Per impostazione predefinita, puoi utilizzare i servizi di geolocalizzazione per dispositivi mobili e la geolocalizzazione del browser web per richiedere alle autorizzazioni dell'utente di impostare l'origine come posizione corrente dell'utente. Tuttavia, l'utente potrebbe negare queste autorizzazioni o impostare una località 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 di Google Maps Platform Places sui dispositivi mobili e sul Web. Quando un utente digita un indirizzo, il completamento automatico inserisce le altre informazioni mediante i widget. Puoi anche fornire la tua funzionalità di completamento automatico utilizzando direttamente le librerie Places.

Aggiungere la libreria Place Autocomplete al tuo sito è sufficiente aggiungere un paio di parametri di ricerca all'URL dello script dell'API JavaScript di Maps. Nel seguente esempio, 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>

Successivamente, aggiungi alla tua pagina una casella di testo per inserire gli utenti.

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

Infine, devi inizializzare il servizio di completamento automatico e collegarlo alla casella di testo con il nome. Limitando il numero di previsioni di completamento automatico ai tipi di geocodifica viene configurato il campo di immissione per accettare indirizzi, quartieri, città e codici postali, in modo che gli utenti possano inserire qualsiasi livello di specificità per descrivere la propria 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 per centrare la mappa e indicare la relazione tra le tue località 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, dopo che l'utente ha selezionato l'indirizzo, viene eseguita la funzione addUserLocation(). In questo modo, la geometria del risultato corrispondente viene indicata nella posizione dell'utente, quindi viene spostata la mappa in quella località 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 una località specifica, mostrata nell'immagine seguente.

Espandi questa pagina per vedere le procedure dettagliate per l'aggiunta del completamento automatico di un luogo alla tua app:

Sito web

App Android

App per iOS

Visualizzazione del tempo di percorrenza e della distanza per le località più vicine

Questo esempio utilizza: API DIST Matrix Disponibile anche: Servizio Array Matrix, API Maps JavaScript

Dopo aver individuato la località dell'utente, puoi confrontarla con la località in cui ti trovi. Grazie a questo servizio, l'API Maps JavaScript aiuta gli utenti a selezionare la località più adatta per loro in base al tempo di guida o alla distanza dalla strada.

La visualizzazione delle sedi vicino a un utente implica la presenza di tali sedi. Quando utilizzi il tuo database delle località, la chiave è assicurarti che i dati siano in un formato che può essere utilizzato in una mappa, ad esempio 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 tra un utente e la località, ma può essere fuorviante. La linea retta potrebbe essere sopra un fiume impraticabile o attraverso strade trafficate in un momento in cui un'altra località potrebbe essere più comoda. Ciò è importante se hai più sedi nel raggio di pochi chilometri l'una dall'altra.

Il servizio di matrice delle distanze si basa su un elenco di località di origine e di destinazione e non solo sulla distanza percorsa, ma anche sul tempo intercorso tra una località e l'altra. Nel caso di un utente, l'origine sarà dove si trova attualmente o il punto di partenza desiderato e le destinazioni saranno quelle delle località. Le origini e le destinazioni possono essere specificate come coppie di coordinate o come indirizzi; queste ultime verranno abbinate quando il servizio viene chiamato. Puoi utilizzare la matrice delle distanze 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 Matrice delle distanze, specificando l'origine dell'utente e le posizioni. Questo esempio mostra la distanza dal centro della mappa a tre uffici Google a Londra.

Riferimento rapido per la codifica dell'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 quello mostrato 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"
}

L'immagine seguente mostra l'origine (indicatore 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 località circostanti come indicatori verdi.

La distanza retta e la distanza del percorso spesso sono diverse, come illustrato nella tabella seguente.

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

Anche se la località B è la distanza più vicina, il percorso e il tempo di percorrenza sono più lunghi, dato che la località A è accessibile tramite un'autostrada.

Dopo aver fatto questa richiesta, puoi elaborare la corrispondenza per ordinare le risposte in base alla durata del tempo di guida. Puoi trovare esempi di tale funzione nei codelab del localizzatore.

In questo esempio vengono utilizzati: Maps Directions API di Google Maps Disponibile anche: servizio web API Directions da utilizzare su Android e iOS, direttamente dall'applicazione o da remoto tramite un proxy server

Mostrare agli utenti le indicazioni stradali dall'interno del tuo sito o delle tue applicazioni significa che non è necessario che tu esca dal tuo sito, il che significa che gli utenti non saranno distratti da altre pagine o non vedranno i concorrenti sulla mappa. Puoi persino mostrare le emissioni di anidride carbonica della specifica modalità di viaggio e mostrare l'impatto di un viaggio particolare.

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

Di seguito è riportato un esempio di visualizzazione di un riquadro delle indicazioni stradali. Per saperne di più sull'esempio, vedi Visualizzazione delle indicazioni stradali con testo.

Per saperne di più su queste funzionalità di Maps, leggi la documentazione relativa all'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 su un pulsante, come illustrato nella figura seguente.

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

Utilizzo di Builder rapido Plus

Puoi utilizzare la soluzione Quick Builder Locator Plus per importare facilmente i dettagli dell'attività dal 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 i 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 allo store locator

*Prenota con Google è disponibile solo in alcuni paesi/aree geografiche in cui le attività collaborano con un fornitore di prenotazioni supportato. Se ti interessa Prenota con Google, ma al momento non stai collaborando con un partner Prenota con Google, invita il tuo fornitore a inviare il suo interesse compilando questo modulo e consulta la nostra documentazione per scoprire come può iniziare. Se non collabori già con un fornitore di prenotazioni, puoi visualizzare i fornitori idonei nella sezione Prenotazioni di Gestione dei profili delle attività.

Utilizzare Profilo dell'attività per attivare la prenotazione degli appuntamenti

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

Le API di Profilo dell'attività ti consentono di creare azioni, come la prenotazione degli appuntamenti, che puoi recuperare e mostrare nelle tue app, ma richiedono alcuni passaggi manuali per abilitarle, come descritto di seguito.

Quando gli utenti visualizzano i dettagli del luogo per una delle tue sedi in un riquadro laterale, puoi fornire loro un link per prendere un appuntamento. In questa sezione viene spiegato come fare.

  1. Crea un'API di Profilo dell'attività placeActionLink per la località di tipo APPOINTMENT, ONLINE_APPOINTMENT o DINING_RESERVATION. placeActionLink sarà l'oggetto che utilizzi per il link dell'appuntamento nel riquadro laterale. (Se hai già creato il link all'azione per l'appuntamento che preferisci, 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 posizione del profilo dell'attività, pertanto devi trovare l'ID località in base all'ID luogo sulla mappa per recuperare e visualizzare il link di prenotazione dell'appuntamento che hai creato. Effettua le seguenti chiamate API di Profilo dell'attività:

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

    L'esempio seguente mostra un APPUNTAMENTO 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 per il 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, verifica la tua piattaforma di prenotazione degli appuntamenti per la documentazione sull'incorporamento di un widget di prenotazione in un sito web o in un'app. Un'altra opzione è Google Cloud, come Cloud Spanner per la gestione dell'inventario (video).

Visualizzazione delle offerte locali

Nel riquadro laterale dei dettagli di una sede, puoi mostrare le offerte locali su cui gli utenti possono fare clic. L'API Google My Business 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.

Lo schema architetturale nella sezione precedente mostra le tecnologie disponibili per l'aggiunta di offerte al tuo localizzatore.

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

  1. Con l'API Google My Business, crea i post di qualsiasi offerta che vuoi visualizzare, di tipo OFFER.
  2. Trova la posizione del profilo dell'attività / ID località 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 posizione dell'attività, pertanto devi trovare l'ID località in base all'ID luogo sulla mappa per recuperare e visualizzare il link dell'offerta locale per la tua sede. Effettua le seguenti chiamate API di Profilo dell'attività:

    1. Elenca gli account del progetto.
    2. Elenca tutte le sedi di un account.
    3. Nelle sedi dell'account, la LocationKey contiene l'ID luogo della mappa, che puoi confrontare con l'ID del luogo visualizzato.

    Di seguito è riportato un esempio di richiesta di dettagli sulla sede nelle API di Profilo dell'attività:

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

    La risposta contiene un campo locationKey, che è l'ID del 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 disponi dell'ID località, puoi visualizzare l'offerta che ti interessa. Per recuperare un post dell'offerta esistente, elenca localPosts esistente per la località e filtra topicType di OFFER per trovare i contenuti dell'offerta che vuoi utilizzare.

    Ecco un esempio di richiesta per elencare i post locali attivi per una sede:

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

    L'esempio seguente mostra un localPost OFFER 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 elemento <div> nel riquadro laterale con i dati pertinenti dell'oggetto localPost.

Personalizzare la mappa

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

  • Crea i tuoi indicatori personalizzati per sostituire i segnaposto predefiniti sulla mappa.
  • Modifica i colori degli elementi della mappa per riflettere il tuo brand.
  • Controlla i punti di interesse visualizzati (attrazioni, cibo, alloggi e così via) e il relativo livello di densità. In questo modo puoi concentrare l'attenzione degli utenti sulle tue località, evidenziando i punti di riferimento che aiutano gli utenti a raggiungere la sede più vicina.

Creazione di indicatori di mappa personalizzati

Puoi personalizzare gli 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 ulteriori informazioni agli utenti, ad esempio orari di apertura, numero di telefono o foto. Puoi anche creare indicatori personalizzati raster, vettori, trascinabili e persino animati.

Di seguito è riportata una mappa di esempio che utilizza indicatori personalizzati. Consulta il codice sorgente nell' argomento degli indicatori personalizzati dell'API JavaScript di Maps.

Per informazioni dettagliate, consultate la documentazione sugli indicatori per JavaScript (Web), Android e iOS.

Stili della mappa

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

Puoi creare o modificare gli stili delle mappe nella pagina Stili mappa di Google Cloud Console nel tuo progetto.

Espandi per visualizzare le animazioni di creazione e stile degli stili delle mappe in Cloud Console:

Stili mappa di settore

Questa animazione mostra gli stili di mappa predefiniti di settore che puoi utilizzare. che rappresentano un punto di partenza ottimale per ogni tipo di settore. Ad esempio, lo stile della mappa Retail riduce i punti di interesse sulla mappa, consentendo agli utenti di concentrarsi sulle tue sedi, nonché per i 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 mappa, il mouse fa clic sul pulsante di opzione accanto a ciascuno
              dei seguenti stili ottimizzati del settore: Viaggi, Logistica, Immobili e
              Vendita al dettaglio. Quando viene fatto clic su ogni pulsante, la descrizione dello stile 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à del PDI sullo stile della mappa. Maggiore è la densità, maggiore è il numero di indicatori PDI 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
                e poi su Apri nell&#39;editor di stile. Nell&#39;editor di stile, il mouse fa clic sulla funzionalità Punti di interesse, poi sull&#39;elemento Icona, impostando il colore rosso. Quindi, il mouse seleziona la casella di controllo Densità PDI e scorre
                il controllo della densità a destra per ottenere la densità massima. Nell&#39;anteprima della mappa vengono visualizzati sempre più indicatori rossi man mano che la densità aumenta. Quindi il mouse passa
                al pulsante Salva.

Ogni stile mappa ha il proprio ID. Dopo aver pubblicato uno stile in Cloud Console, fai riferimento all'ID mappa nel tuo codice, il che significa che puoi aggiornare uno stile mappa in tempo reale senza effettuare il refactoring dell'app. Il nuovo aspetto verrà visualizzato automaticamente nell'applicazione esistente e usato su tutte le piattaforme. I seguenti esempi 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 tali stili disponibili per una visualizzazione più rapida delle mappe quando chiami tali stili 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 sulla pagina web. (Non viene mostrato un elemento HTML <div id="map"></div> in cui la mappa verrà visualizzata nella pagina.)

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

Scopri di più su come incorporare gli stili delle mappe basati su cloud in JavaScript (Web), Android e iOS.

Ottenere informazioni sull'utilizzo con Analytics

Puoi utilizzare Analytics per ottenere informazioni preziose su come gli utenti interagiscono con il tuo localizzatore. Questa sezione fornisce indicazioni sulla configurazione e il monitoraggio dei dati e delle analisi di Google Analytics e Profilo dell'attività per monitorare i dati a cui sei più interessato. Per gli utenti di Quick Builder Locator Plus, una dashboard di analisi consente di analizzare e generare approfondimenti, offrendoti un'immagine del grado di interazione dei visitatori del sito con il tuo store locator in base a dati anonimizzati.

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

Per accedere a questo report, vai alla sezione relativa ai report sul coinvolgimento di Cloud Console. Per maggiori dettagli su questo report, consulta la sezione Report sul coinvolgimento.

Considerata la potenza e la flessibilità di Google Analytics, non cercheremo di fornire informazioni complete sulla configurazione e sull'utilizzo. Ti indicheremo invece la documentazione principale per ulteriori letture e istruzioni, evidenziando le principali considerazioni sulle analisi per la tua app locator.

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 misurate indipendentemente dalle visualizzazioni di pagina del sito web (eventi).
  • Visualizzare i dati non elaborati (metriche) in raggruppamenti significativi (dimensioni o dimensioni personalizzate).

Utilizzare eventi personalizzati

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

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

È importante nominare event e method in modo abbastanza chiaro da poter comprendere gli eventi nei report. Attivale per le interazioni specifiche che vuoi misurare, ad esempio quando un utente seleziona e specifica un indirizzo nell'elenco a discesa Completamento automatico, mostrato nella figura seguente.

Puoi inviare a Google Analytics la seguente chiamata di monitoraggio che utilizza l'evento e il metodo da te definiti. Per maggiore facilità di lettura, mostriamo ogni parametro di ricerca su una riga separata.

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 appare la chiamata a Google Analytics nella visualizzazione Ispezionato 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" impostato 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 e eventi di Google Analytics.

Puoi anche sviluppare e misurare strategie per aumentare le visite nei tuoi punti vendita fisici dall'app locator. Ad esempio, Google Analytics offre un'offerta di Visite in negozio in Analytics che collega le analisi delle visite in negozio fisiche (misurate da Google Ads) all'analisi del tuo locator. Puoi anche sviluppare le tue strategie di app da località, ad esempio le offerte online utilizzabili 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, Profilo dell'attività dispone di proprie metriche. Ad esempio, se aggiungi al tuo locator i link di prenotazione degli appuntamenti e delle offerte locali, puoi ottenere metriche su tali visualizzazioni e clic.

La seguente richiesta di esempio alle API di Profilo dell'attività 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 saranno 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 località su Google Maps
  • 631 visualizzazioni della posizione sulla Ricerca Google.
  • Tre richieste di indicazioni stradali per raggiungere la sede.
  • 42 LOCAL_POST_ACTIONS_CALL_TO_ACTION clic per offerta.
  • 11 visualizzazioni di post locali nella 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 delle azioni creati in Prenota con Google, puoi registrare tali 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 misurazione che utilizzi, la misurazione è più di un semplice controllo dei tuoi KPI. Le cifre ti aiutano anche a capire l'impatto di questi miglioramenti del locator sulla tua attività. Inoltre, puoi confrontare le metriche di Google Analytics sul tuo locator con le metriche di Profilo dell'attività. Ad esempio, confrontando queste metriche, puoi vedere quanti clienti ricevono indicazioni stradali dal tuo locator e da Google Maps per visitare le tue sedi fisiche.


Ottimizzazione di Locator Plus

A seconda delle tue esigenze aziendali o degli utenti, puoi migliorare ulteriormente l'esperienza utente.

Invio delle indicazioni stradali al dispositivo mobile

Per consentire agli utenti di raggiungere una località ancora più facilmente, puoi inviare loro un SMS o un link via email. Quando un utente fa clic sull'app, l'app Google Maps viene avviata sul suo telefono, se Maps.google.com viene caricato nel browser web del dispositivo. Entrambe queste esperienze offrono all'utente la possibilità di utilizzare la navigazione passo passo, inclusa la guida vocale, per raggiungere la destinazione.

Utilizza URL di Maps per comporre un URL di indicazioni stradali come il seguente, con il nome del luogo codificato come URL come parametro destination e l'ID luogo come parametro destination_place_id. Non è previsto alcun costo per scrivere o utilizzare gli URL di Maps, quindi non devi includere una chiave API nell'URL.

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

Facoltativamente, puoi fornire un parametro di ricerca origin utilizzando lo stesso formato di indirizzo della destinazione. Tuttavia, omettendole, le indicazioni stradali iniziano dall'attuale posizione 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 ricerca, come travelmode e dir_action=navigate per avviare le indicazioni stradali con la navigazione attivata.

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

Per inviare un SMS o un'email contenente questo URL, consigliamo al momento di usare un'applicazione di terze parti come twilio. Se utilizzi App Engine, puoi ricorrere a società di terze parti per inviare messaggi SMS o email. Per maggiori informazioni, vedi Inviare messaggi con servizi di terze parti.

Visualizzazione di Street View per aiutare gli utenti a visualizzare le sedi

Per molte località del mondo, Street View può essere utilizzato per mostrare l'esterno di un luogo, offrendo agli utenti un'immagine del luogo prima di arrivare. Puoi fornire Street View in formato interattivo (web) o statico (API), a seconda che tu voglia o meno "guardare" l'area a 360 gradi. Street View è disponibile anche per Android e iOS.

Determinazione della posizione dell'utente con geolocalizzazione

Nella maggior parte dei casi, puoi individuare la posizione dell'utente utilizzando i servizi di geolocalizzazione 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 di un dispositivo su una mappa Google, nonché la documentazione per richiedere le autorizzazioni e ottenere la posizione in Android e iOS. Tuttavia, potrebbero verificarsi situazioni in cui vuoi una ricerca di località alternativa; ad esempio, se i servizi di geolocalizzazione del dispositivo sono disattivati o temi che la geolocalizzazione del dispositivo sia oggetto di spoofing.

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 puoi eseguire un controllo incrociato della posizione segnalata dal dispositivo.

Combinare i dati sulla posizione personalizzati con i dettagli del luogo

Nella sezione Fornire i dettagli di un luogo precedente, abbiamo parlato dell'utilizzo dei dettagli del luogo per fornire agli utenti un livello avanzato di informazioni sulle tue sedi, come orari di apertura, foto e recensioni.

È utile comprendere il costo dei diversi campi di dati in Dettagli luogo, che sono classificati come Dati di base, Contatto e Ambiente. Per gestire i costi, una strategia prevede l'unione delle informazioni di cui già disponi sulle tue sedi con quelle aggiornate (di solito i dati di base e di contatto) di Google Maps, come chiusura temporanea, orari di apertura e valutazioni degli utenti, foto e recensioni. Se disponi già delle informazioni di contatto per le tue sedi, non dovrai richiedere questi campi dai dettagli del luogo e potresti vincolare la tua richiesta di recuperare solo i campi di dati di base o sull'atmosfera, a seconda di ciò che vuoi mostrare.

Potresti avere i tuoi dati sui luoghi da integrare o utilizzare al posto dei dettagli del luogo. Il codelab per il localizzatore completo offre un esempio di utilizzo di GeoJSON con un database per archiviare e recuperare i dettagli sulla tua posizione.