Przegląd
Google Maps Platform jest dostępna w wersji internetowej (JS, TS), na Androida i iOS, a także udostępnia interfejsy API usług internetowych do uzyskiwania informacji o miejscach, wskazówek dojazdu i odległości. Przykłady w tym przewodniku są napisane dla jednej platformy, ale podajemy linki do dokumentacji dotyczącej implementacji na innych platformach.
Szybki konstruktor w konsoli Google Cloud umożliwia szybkie tworzenie lokalizatora, w tym importowanie wizytówek w Profilu Firmy i automatyczne osadzanie linków do rezerwacji wizyt od dostawców zewnętrznych. Interaktywny interfejs umożliwia wygenerowanie kodu i wdrożenie go w Cloud w ciągu kilku minut.
Użytkownicy chcą wyszukiwać informacje o produktach i usługach w internecie oraz znajdować najlepsze i najwygodniejsze lokalizacje, w których mogą umówić się na spotkanie lub odebrać zamówienie. Chcą jak najszybciej dotrzeć do Twojej lokalizacji, a Ty chcesz im zapewnić bogate wrażenia online, które zwiększą liczbę wizyt w Twoich lokalizacjach, poprawią zadowolenie użytkowników i zmniejszą liczbę połączeń z zespołem pomocy. Warto też mierzyć skuteczność lokalizatora, aby sprawdzić, czy klienci mogą znaleźć Twoją lokalizację, i dowiedzieć się, co można poprawić.
Lokalizator Plus – wskazówki i porady dotyczące dostosowywania, które znajdziesz w tym dokumencie – to optymalne połączenie interfejsów Google Maps Platform API, które zalecamy do tworzenia doskonałych lokalizatorów. Dzięki temu użytkownicy będą mogli znaleźć Twoje lokalizacje na mapie, zobaczyć szczegółowe informacje, które pomogą im podjąć decyzję, oraz uzyskać wskazówki dojazdu samochodem, rowerem, pieszo lub transportem publicznym.
Użytkownicy usługi Lokalizator Plus mają do dyspozycji panel analityczny, który pomaga analizować dane i generować na ich podstawie statystyki. Dzięki temu możesz uzyskać jasny obraz tego, jak klienci korzystają z lokalizatora sklepów. Aby uzyskać dostęp do tego raportu, otwórz sekcję Raporty dotyczące zaangażowania w konsoli. Więcej informacji o tym raporcie znajdziesz w artykule Raporty dotyczące zaangażowania.
Poniższy diagram przedstawia podstawowe interfejsy API, które są używane do wdrażania usługi Lokalizator Plus. Diagram pokazuje też bazę danych z Twoimi danymi o lokalizacji, które możesz połączyć z informacjami o miejscu, aby zapewnić użytkownikom najlepszy i najpełniejszy zestaw informacji. (Kliknij, aby powiększyć).
Włączam interfejsy API
Aby wdrożyć te praktyki, musisz włączyć te interfejsy API w konsoli Google Cloud: Więcej informacji o konfiguracji znajdziesz w artykule Pierwsze kroki z Google Maps Platform.Sekcje implementacji
W tym dokumencie omówimy te praktyki i dostosowania.
- Ikona znacznika wyboru to podstawowa praktyka.
- Ikona gwiazdki to opcjonalne, ale zalecane dostosowanie, które zwiększa skuteczność rozwiązania.
| Wyświetlanie lokalizacji na interaktywnej mapie |
Utwórz mapę, która umożliwia użytkownikom wyświetlanie szczegółów lokalizacji, przesuwanie, powiększanie i pomniejszanie. Możesz też skorzystać z rozwiązania Szybki konstruktor Lokalizator Plus, aby szybko utworzyć mapę, w tym zaimportować informacje o firmie z profilu firmy, osadzić linki do rezerwacji wizyt i wdrożyć rozwiązanie w Google Cloud Storage. |
|
| Podawanie informacji o miejscu | Gdy użytkownicy znajdą na mapie Twoje najbliższe lokalizacje, podaj im przydatne informacje o miejscu, aby pomóc im w podjęciu decyzji. | |
| Wyświetlanie lokalizacji z perspektywy 45° | Zapewnij użytkownikom lepszy widok swojej lokalizacji w widoku satelitarnym pod kątem 45 stopni. | |
| Określanie lokalizacji użytkownika | Dodaj funkcję wpisywania w trakcie pisania, aby zwiększyć wygodę użytkowników na wszystkich platformach i poprawić dokładność adresu przy minimalnej liczbie naciśnięć klawiszy. | |
| Pokazuję czas podróży i odległość do najbliższych lokalizacji | Obliczaj odległość i czas podróży dla wielu punktów początkowych i docelowych, opcjonalnie określając różne formy transportu, takie jak pieszy, samochodowy lub jazda na rowerze. | |
| Pomoc użytkownikom w rezerwowaniu terminów |
Umożliwia użytkownikom rezerwowanie spotkań w panelu bocznym informacji o miejscu. Możesz też skorzystać z rozwiązania Szybki konstruktor Lokalizator Plus, aby szybko utworzyć mapę, w tym zaimportować informacje o firmie z profilu firmy, osadzić linki do rezerwacji wizyt i wdrożyć rozwiązanie w Google Cloud Storage. |
|
| Wyświetlanie ofert lokalnych | Wyświetlaj użytkownikom klikalne oferty lokalne w panelu bocznym informacji o miejscu. | |
| Podawanie wskazówek nawigacyjnych | uzyskiwać dane o wskazówkach dojazdu z miejsca początkowego do miejsca docelowego różnymi środkami transportu, np. pieszo, samochodem, rowerem i transportem publicznym; | |
| Dostosowywanie mapy | Twórz niestandardowe znaczniki mapy, aby wyróżnić swoje lokalizacje, i dostosuj styl mapy do kolorów swojej marki. Wyświetlaj (lub ukrywaj) na mapie określone ważne miejsca, aby ułatwić użytkownikom orientację, i kontroluj ich gęstość, aby uniknąć przeładowania mapy. | |
| Uzyskiwanie statystyk wykorzystania za pomocą Analytics | Skonfiguruj i używaj Google Analytics, aby uzyskiwać statystyki dotyczące strategii i wdrażania lokalizatora. | |
| Wysyłanie trasy na urządzenie mobilne | Oprócz wyświetlania wskazówek na lokalizatorze możesz też wysyłać je na telefon użytkownika, aby mógł korzystać z nawigacji w Mapach Google w podróży. | |
| Wyświetlanie Street View, aby pomóc użytkownikom w wizualizacji lokalizacji | Udostępniaj użytkownikom zdjęcia Street View z widokiem 360°, aby ułatwić im orientację i szybsze znajdowanie Twoich lokalizacji. | |
| Określanie lokalizacji użytkownika za pomocą geolokalizacji | Jeśli nie chcesz korzystać z usług lokalizacyjnych na urządzeniu, użyj geolokalizacji, aby określić lokalizację użytkownika. | |
| Łączenie niestandardowych danych o lokalizacji z informacjami o miejscu | Łącz własne szczegóły lokalizacji niestandardowej z informacjami o miejscu, aby udostępniać użytkownikom bogaty zestaw danych, który pomoże im podejmować decyzje. |
Wyświetlanie lokalizacji na interaktywnej mapie
Lokalizator jest ważnym elementem wrażeń użytkownika. Niektóre witryny nie mają jednak nawet mapy, co zmusza użytkowników do opuszczenia witryny lub aplikacji, aby znaleźć pobliską lokalizację. Oznacza to, że użytkownicy, którzy muszą przechodzić między stronami, aby uzyskać potrzebne informacje, nie będą zadowoleni z obsługi. Zamiast tego możesz ulepszyć to rozwiązanie, osadzając i dostosowując mapy w swoich aplikacjach.
Tę funkcję można włączyć na 2 sposoby: korzystając z rozwiązania Szybki konstruktor Lokalizator Plus, które zapewnia ją od razu, lub używając własnej implementacji Map dynamicznych. W tej sekcji znajdziesz szczegółowe informacje o tych opcjach.
Korzystanie z Szybkiego konstruktora – Lokalizator Plus
Aby zaimportować informacje o firmie z jej Profilu Firmy, możesz użyć rozwiązania Lokalizator Plus w Szybkim konstruktorze. Dzięki temu zmiana danych firmy w profilu Twojej firmy zostanie odzwierciedlona w lokalizatorze sklepów w Twojej witrynie. Zmiany mogą dotyczyć godzin otwarcia, danych kontaktowych, zdjęć, opcji usług i innych informacji. Szybki konstruktor umożliwia szybkie poznanie sposobu konfigurowania lokalizacji firmy na mapie, generowanie kodu do wdrożenia lub bezpośrednie wdrażanie w Google Cloud Storage w ciągu kilku minut.
Korzystanie z własnej implementacji Map dynamicznych
| Ten przykład korzysta z: Maps JavaScript API | Dostępne również na: Android | iOS |
Dodanie do strony mapy dynamicznej, czyli mapy, po której użytkownicy mogą się poruszać, powiększać i pomniejszać oraz uzyskiwać szczegółowe informacje o różnych lokalizacjach i interesujących miejscach, wymaga tylko kilku wierszy kodu.
Najpierw musisz dodać do strony interfejs Maps JavaScript API.
W tym celu połącz ten skrypt ze stroną HTML, w tym libraries=marker, aby można było dodawać do mapy zaawansowane znaczniki.
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=marker&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a"></script>
Adres URL odwołuje się do funkcji JavaScript initMap, która jest uruchamiana po wczytaniu strony. W adresie URL możesz też zdefiniować język lub region mapy, aby mieć pewność, że jest ona sformatowana w odpowiedni sposób dla kraju, na który kierujesz reklamy. Ustawienie regionu zapewnia też, że działanie aplikacji używanych poza Stanami Zjednoczonymi będzie dostosowane do wybranego regionu. Pełną listę obsługiwanych języków i regionów znajdziesz w szczegółach dotyczących zasięgu Google Maps Platform. Dowiedz się więcej o użyciu parametru region.
Następnie potrzebujesz elementu HTML div, aby umieścić mapę na stronie.
To miejsce, w którym będzie wyświetlana mapa.
<div id="map"></div>
Następnym krokiem jest ustawienie podstawowych funkcji mapy. Odbywa się to w funkcji skryptu initMap określonej w adresie URL skryptu. W tym skrypcie, który pokazujemy w przykładzie poniżej, możesz ustawić lokalizację początkową, identyfikator mapy (wymagany w przypadku zaawansowanych znaczników i definiowania stylów map w Google Cloud), typ mapy oraz to, które elementy sterujące będą dostępne na mapie dla użytkowników. Zwróć uwagę, że getElementById() odwołuje się do identyfikatora „map” div w poprzednim przykładzie.
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: { lat: 51.485925, lng: -0.129500 }, mapId: "DEMO_MAP_ID", zoomControl: false }); }
W przypadku lokalizatora zwykle interesuje Cię ustawienie początkowej lokalizacji, punktu środkowego lub granic oraz poziomu powiększenia (jak bardzo mapa jest powiększona w tej lokalizacji). Większość pozostałych elementów, takich jak dostrajanie elementów sterujących, jest opcjonalna, ponieważ to Ty określasz poziom interakcji z mapą.
Pobieranie identyfikatorów miejsc
| Ten przykład korzysta z: Places API (nowość) | Dostępne również: JavaScript |
Prawdopodobnie masz bazę danych swoich lokalizacji z podstawowymi informacjami, takimi jak nazwa lokalizacji, jej adres i numer telefonu. Aby pobrać informacje o danym miejscu, które są dostępne w Google Maps Platform, w tym współrzędne geograficzne i informacje dodane przez użytkowników, znajdź identyfikator miejsca, który odpowiada każdej lokalizacji w Twojej bazie danych. Możesz wywołać
punkt końcowy wyszukiwania tekstowego (nowy) w interfejsie Places API (nowy) i w masce pola zażądać tylko pola places.id (co spowoduje wywołanie jednostki SKU Wyszukiwanie tekstowe – Essentials (tylko identyfikatory)).
Oto przykład żądania identyfikatora miejsca dla biura Google w Londynie:
curl -X POST -d '{
"textQuery" : "Google London"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: places.id' \
'https://places.googleapis.com/v1/places:searchText'Możesz przechowywać ten identyfikator miejsca w bazie danych i używać go jako skutecznego sposobu na wysyłanie próśb o informacje o miejscu. Poniżej znajdziesz instrukcje dotyczące używania identyfikatora miejsca do geokodowania, pobierania informacji o miejscu i wyznaczania do niego trasy.
Geokodowanie lokalizacji
| Ten przykład korzysta z: Geocoding API | Dostępne również: JavaScript |
Jeśli w bazie danych lokalizacji masz adresy ulic, ale nie współrzędne geograficzne, użyj interfejsu Geocoding API, aby uzyskać szerokość i długość geograficzną tego adresu na potrzeby umieszczenia znacznika na mapie. Możesz geokodować adresy po stronie serwera, przechowywać szerokości i długości geograficzne w bazie danych i odświeżać je co najmniej raz na 30 dni.
Oto przykład użycia interfejsu Geocoding API do uzyskania szerokości i długości geograficznej identyfikatora miejsca zwróconego dla biura Google w Londynie:
https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_locatorplus_v2_aDodawanie lokalizacji do mapy
Następnym krokiem jest dodanie lokalizacji do mapy. Zwykle polega to na dodaniu do mapy zaawansowanych znaczników, ale możesz też skorzystać z innych opcji, takich jak warstwy danych.
Gdy uzyskasz szerokość i długość geograficzną lokalizacji, możesz dodać do mapy znacznik zaawansowany z niestandardowym glifem tekstowym, jak w tym przykładzie:
const pin = new google.maps.marker.PinElement({ glyphText: "A", }); const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: { lat: 51.493073, lng: -0.146550 }, title: "Location Name", }); marker.append(pin);
Za pomocą kilku znaczników możesz wyświetlić lokalizację wielu miejsc jednocześnie.
Jeśli lokalizacji jest dużo, możesz użyć narzędzia do grupowania znaczników w przypadku JavaScript, Android lub iOS. Oto przykład grupowania znaczników w przykładowym lokalizatorze sklepów w JavaScript na GitHubie.
Podawanie informacji o miejscu
| Ten przykład korzysta z: Maps JavaScript API | Dostępne są też: Places API (nowy) | Android | iOS |
Możesz udostępniać użytkownikom szczegóły miejsca, które powinni znać, zanim odwiedzą jedną z Twoich lokalizacji. Dzięki szczegółowym informacjom o miejscu, takim jak dane kontaktowe, godziny otwarcia, oceny użytkowników, zdjęcia użytkowników i informacje o tymczasowym zamknięciu, Twoi użytkownicy będą dokładnie wiedzieć, czego się spodziewać, gdy odwiedzą Twoją lokalizację. Po wywołaniu interfejsu Places API (nowego) możesz filtrować i wyświetlać odpowiedź w oknie informacyjnym, na pasku bocznym w internecie lub w inny dowolny sposób.
Aby poprosić o informacje o miejscu, musisz mieć identyfikator miejsca każdej z Twoich lokalizacji. Aby pobrać identyfikator miejsca, w którym znajduje się Twoja lokalizacja, zapoznaj się z artykułem Uzyskiwanie identyfikatorów miejsc.
Rozwiń, aby zobaczyć filmy dotyczące żądania informacji o miejscu:
Pobieranie godzin otwarcia
Sprawdzanie zamknięć
Kontrola kosztów
W tym przykładzie użyto klasy Place w bibliotece Miejsc w interfejsie Maps JavaScript API do pobierania szczegółów miejsca i dodawania ich do okna informacyjnego. Ta implementacja korzysta ze strategii oszczędzania kosztów, która polega na wysyłaniu żądania informacji o miejscu tylko wtedy, gdy użytkownik poprosi o szczegóły, klikając znacznik, zamiast z wyprzedzeniem pobierać szczegóły wszystkich lokalizacji niezależnie od zainteresowania użytkownika.
const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: { lat: 51.493073, lng: -0.14655 }, gmpClickable: true, }); const place = new google.maps.places.Place({ id: "ChIJVSZzVR8FdkgRTyQkxxLQmVU", }); const infowindow = new google.maps.InfoWindow(); marker.addEventListener("gmp-click", async () => { await place.fetchFields({ fields: ["displayName", "formattedAddress", "rating", "websiteURI"], }); infowindow.setContent( "<div><strong>" + place.displayName + "</strong><br>" + place.formattedAddress + "<br>" + "Rating: " + place.rating + " stars<br>" + place.websiteURI + "</div>" ); infowindow.open({ map, anchor: marker, }); });
Wyświetlanie lokalizacji z perspektywy 45°
| Ten przykład korzysta z: Maps JavaScript API | Dostępne również na: Android | iOS |
Widok z lotu ptaka pomaga użytkownikom lepiej wyobrazić sobie, jak wygląda Twoja lokalizacja, co ułatwia jej znalezienie. Gdy użytkownik wybierze jedną lokalizację, aby wyświetlić więcej szczegółów, możesz powiększyć tę lokalizację, aby wyświetlić dostępne zdjęcia satelitarne pod kątem 45°.
Poniższy przykładowy kod ustawia mapę na wysoki poziom powiększenia, zgodny typ mapy i kąt nachylenia, który w razie dostępności wyświetli zdjęcia pod kątem 45°. Szczegółowe informacje o dostępności zdjęć pod kątem 45° znajdziesz w dokumentacji.
function seeDetail(location) {
map.setCenter(location);
map.setZoom(19);
map.setMapTypeId(google.maps.MapTypeId.HYBRID);
map.setTilt(45);
}Przywracanie oryginalnego widoku mapy
Użytkownicy często chcą przełączać się między widokiem szczegółowym pojedynczej lokalizacji a widokiem podsumowania kilku pobliskich lokalizacji. Aby to ułatwić, dodaj detektor, który wykrywa, kiedy użytkownik opuszcza widok szczegółów w wyniku interakcji z mapą lub widokiem listy. Na przykład nasłuchiwanie zdarzenia zoom_changed na obiekcie map wskazuje, że użytkownik ręcznie oddalił widok szczegółowy lub wywołał inną funkcję, która zaktualizowała poziom powiększenia. W tym przykładzie oddalenie powoduje przywrócenie pierwotnego typu mapy i pochylenia.
let originalMapTypeId = google.maps.MapTypeId.ROADMAP; map.addListener("zoom_changed", () => { const newZoom = map.getZoom()!; if (newZoom < 19) { map.setTilt(0); map.setMapTypeId(originalMapTypeId); } });
Określanie lokalizacji użytkownika
| Ten przykład korzysta z: Maps JavaScript API | Dostępne również na: Android | iOS |
Kolejnym kluczowym elementem każdego lokalizatora jest określenie lokalizacji początkowej użytkownika. Domyślnie możesz używać usług lokalizacyjnych na urządzeniach mobilnych i geolokalizacji w przeglądarce, aby prosić użytkowników o uprawnienia do ustawiania źródła jako bieżącej lokalizacji użytkownika. Użytkownik może jednak odmówić przyznania tych uprawnień lub ustawić inną lokalizację jako punkt początkowy.
Użytkownicy są przyzwyczajeni do funkcji autouzupełniania w konsumenckiej wersji Map Google. Tę funkcję można zintegrować z dowolną aplikacją za pomocą bibliotek Miejsc Google Maps Platform na urządzeniach mobilnych i w internecie. Gdy użytkownik wpisze adres, autouzupełnianie wypełni resztę za pomocą widżetów. Możesz też udostępnić własną funkcję autouzupełniania miejsc bezpośrednio za pomocą interfejsu Place Autocomplete Data API.
Aby dodać do witryny bibliotekę Autouzupełnianie miejsc, wystarczy dodać kilka parametrów zapytania do adresu URL skryptu interfejsu Maps JavaScript API. W tym przykładzie dodawana wartość to libraries=places,marker.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places,marker&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a" defer></script>
Następnie dodaj do strony element kontenera, do którego zostanie dołączony widżet PlaceAutocompleteElement.
<div id="autocomplete-container"></div>
Na koniec zainicjuj widżet PlaceAutocompleteElement i dołącz go do kontenera. Ograniczenie prognoz autouzupełniania miejsc za pomocą includedPrimaryTypes: ["geocode"] konfiguruje widżet tak, aby akceptował adresy ulic, dzielnice, miasta i kody pocztowe, dzięki czemu użytkownicy mogą wprowadzać dowolny poziom szczegółowości, aby opisać miejsce pochodzenia. Gdy użytkownik wybierze prognozę, zostanie wywołane zdarzenie gmp-select i możesz wywołać funkcję place.fetchFields(), aby poprosić o pole location zawierające szerokość i długość geograficzną miejsca pochodzenia użytkownika. Użyjesz tych współrzędnych mapy, aby wyśrodkować mapę i określić relację między Twoimi lokalizacjami a punktem początkowym.
// Create the PlaceAutocompleteElement, restricting predictions to // geographical location types in the United Kingdom. const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({ includedPrimaryTypes: ["geocode"], includedRegionCodes: ["gb"], }); placeAutocomplete.placeholder = "Enter starting address, city, or zip code"; document.getElementById("autocomplete-container").appendChild(placeAutocomplete); // When the user selects an address from the drop-down, // zoom to the selected location and add an advanced marker. placeAutocomplete.addEventListener("gmp-select", async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: ["location", "formattedAddress"], }); addUserLocation(place); }); }
W tym przykładzie po wybraniu adresu przez użytkownika wykonywana jest funkcja addUserLocation(). Spowoduje to pobranie lokalizacji pasującego wyniku, przeniesienie mapy do tej lokalizacji i dodanie zaawansowanego znacznika.
function addUserLocation(place) { const pin = new google.maps.marker.PinElement({ glyphText: "C", }); // Add an advanced marker to the map. const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: place.location, }); marker.append(pin); // Pan and zoom the map to the marker. map.panTo(place.location); map.setZoom(12); }
Możesz wtedy zobaczyć relację między użytkownikiem a dowolnymi lokalizacjami, co pokazano na poniższym obrazie.
Rozwiń tę sekcję, aby obejrzeć filmy z instrukcjami dodawania autouzupełniania miejsc do aplikacji:
Witryna
Aplikacje na Androida
Aplikacje na iOS
Pokazuję czas podróży i odległość do najbliższych lokalizacji
| Ten przykład korzysta z: interfejsu Routes API | Dostępne również: Biblioteka tras, Maps JavaScript API |
Gdy uzyskasz lokalizację użytkownika, możesz ją porównać z lokalizacjami swoich firm. Wykorzystanie funkcji Obliczanie macierzy tras w interfejsie Routes API (lub klasyRouteMatrix w bibliotece tras interfejsu Maps JavaScript API) pomoże użytkownikom wybrać lokalizację, która jest dla nich najwygodniejsza pod względem czasu dojazdu lub odległości drogowej.
Wyświetlanie lokalizacji w pobliżu użytkownika oznacza, że masz już wypełnione lokalizacje. Jeśli używasz własnej bazy danych lokalizacji, kluczowe jest, aby dane były w formacie, którego można używać na mapie, np. GeoJSON, opisanym w temacie Warstwa danych.
Standardowym sposobem porządkowania listy lokalizacji jest sortowanie ich według odległości. Często odległość ta jest obliczana na podstawie linii prostej od użytkownika do lokalizacji, ale może to być mylące. Linia prosta może przebiegać nad nieprzejezdną rzeką lub przez ruchliwe drogi w czasie, gdy inne miejsce może być wygodniejsze. Jest to ważne, gdy masz kilka lokalizacji w odległości kilku kilometrów od siebie.
Metoda computeRouteMatrix pobiera listę lokalizacji początkowych i docelowych i zwraca nie tylko odległość, ale też czas podróży między nimi. W przypadku użytkownika punktem początkowym będzie jego bieżąca lokalizacja lub preferowany punkt początkowy, a miejscami docelowymi będą lokalizacje.
Punkty początkowe i docelowe można określać jako pary współrzędnych, identyfikatory miejsc lub adresy. Możesz użyć
computeRouteMatrix z ustawieniami routingu, takimi jak TRAFFIC_AWARE
, aby wyświetlać wyniki na podstawie aktualnego lub przyszłego czasu dojazdu.
W tym przykładzie wywoływany jest punkt końcowy computeRouteMatrix w interfejsie Routes API, w którym podano identyfikatory miejsca docelowego i miejsca wyjazdu użytkownika. W tym przykładzie obliczamy odległość i czas podróży z centrum mapy do 3 biur Google w Londynie:
curl -X POST -d '{
"origins": [
{
"waypoint": {
"location": {
"latLng": {
"latitude": 51.493490,
"longitude": -0.097288
}
}
}
}
],
"destinations": [
{
"waypoint": {
"placeId": "ChIJVSZzVR8FdkgRTyQkxxLQmVU"
}
},
{
"waypoint": {
"placeId": "ChIJVSZzVR8FdkgR-HklrBMO0Hc"
}
},
{
"waypoint": {
"placeId": "ChIJ4abvVDwbdkgRDZVFR7A6Bcc"
}
}
],
"travelMode": "DRIVE",
"routingPreference": "TRAFFIC_AWARE"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: originIndex,destinationIndex,duration,distanceMeters,status,condition' \
'https://routes.googleapis.com/distanceMatrix/v2:computeRouteMatrix'Odpowiedź usługi zawiera odległość (w metrach) i czas trwania dla każdej pary punktów początkowych i docelowych, podobnie jak w tym przykładzie:
Rozwiń, aby zobaczyć przykładową odpowiedź:
[
{
"originIndex": 0,
"destinationIndex": 0,
"status": {},
"distanceMeters": 4540,
"duration": "924s",
"condition": "ROUTE_EXISTS"
},
{
"originIndex": 0,
"destinationIndex": 1,
"status": {},
"distanceMeters": 5043,
"duration": "1044s",
"condition": "ROUTE_EXISTS"
},
{
"originIndex": 0,
"destinationIndex": 2,
"status": {},
"distanceMeters": 6919,
"duration": "1357s",
"condition": "ROUTE_EXISTS"
}
]Na tym obrazie widać miejsce docelowe (czerwony znacznik C) i miejsca docelowe na mapie:
Odległość w linii prostej i odległość na trasie często się różnią, co ilustruje tabela poniżej.
| Lokalizacja | Odległość w linii prostej | Droga w ruchu / czas |
|---|---|---|
| Lokalizacja A | 3,32 km | 4,5 km / 15 minut |
| Lokalizacja B | 3,20 km | 5,0 km / 17 minut |
| Lokalizacja C | 4,84 km | 6,9 km / 23 minuty |
Chociaż lokalizacja B jest najbliżej, trasa do niej i czas dojazdu są dłuższe, ponieważ do lokalizacji A można dojechać autostradą.
Po wysłaniu tego żądania możesz przetworzyć dopasowanie, aby uporządkować odpowiedzi według czasu jazdy. Przykłady takiej funkcji znajdziesz w ćwiczeniu w Codelabs dotyczącym lokalizatora.
wyznaczanie trasy,
| Ten przykład korzysta z: Biblioteka tras, Maps JavaScript API | Dostępne są też: Routes API usługa internetowa do użytku na Androidzie i iOS, bezpośrednio z aplikacji lub zdalnie przez serwer proxy |
Wyświetlanie użytkownikom wskazówek dojazdu w Twojej witrynie lub aplikacji oznacza, że nie muszą oni opuszczać Twojej witryny, co z kolei oznacza, że nie będą rozpraszani przez inne strony ani nie zobaczą konkurencji na mapie. Interfejs Routes API umożliwia też wysyłanie zapytań o trasy przyjazne dla środowiska, aby szacować zużycie paliwa lub energii i pokazywać wpływ podróży na środowisko.
Klasa Route w bibliotece Routes API w Mapach JavaScript API ma też metody, takie jak createPolylines() i createWaypointAdvancedMarkers(), które umożliwiają przetwarzanie wyników i wyświetlanie ich na mapie.
Poniżej znajdziesz przykład żądania i wyświetlania trasy na mapie. Więcej informacji o przykładzie znajdziesz w artykule Wyznaczanie trasy.
Więcej informacji o tych funkcjach Map znajdziesz w dokumentacji interfejsu Maps JavaScript API lub w samouczku, w którym krok po kroku pokazujemy, jak utworzyć lokalizator.
Ułatwianie użytkownikom rezerwowania spotkań
Gdy użytkownicy wyświetlają informacje o miejscu w panelu bocznym, możesz im ułatwić umówienie się na spotkanie za pomocą kliknięcia przycisku, jak pokazano na ilustracji poniżej.
Możesz to zrobić na kilka sposobów: (1) korzystając z rozwiązania Szybki konstruktor Lokalizator Plus , które zapewnia tę funkcję od razu, oraz (2) korzystając z Profilu Firmy. W tej sekcji znajdziesz szczegółowe informacje o tych opcjach.
Korzystanie z Szybkiego konstruktora – Lokalizatora Plus
Możesz użyć rozwiązania Szybki konstruktor Lokalizator Plus, aby szybko importować informacje o firmie z Profilu Firmy. Po zaimportowaniu do narzędzia Szybki konstruktor możesz włączyć osadzone linki do rezerwacji spotkań w przypadku lokalizacji Twojej firmy, w których są one dostępne, korzystając z funkcji Zarezerwuj z Google. Nawet jeśli nie masz Profilu Firmy powiązanego z kontem Google, możesz użyć narzędzia Szybki konstruktor, aby umieścić linki do rezerwacji w przypadku firm, które zostały już włączone u zewnętrznych dostawców usługi rezerwacji za pomocą funkcji Zarezerwuj z Google*.
*Funkcja Zarezerwuj z Google jest dostępna tylko w wybranych krajach i regionach dla firm, które współpracują z obsługiwanym dostawcą usługi rezerwacji . Jeśli interesuje Cię usługa Zarezerwuj z Google, ale nie współpracujesz z partnerem tej usługi, poproś usługodawcę o przesłanie zgłoszenia zainteresowania przez wypełnienie tego formularza. Zapoznaj się też z naszą dokumentacją, aby dowiedzieć się, jak rozpocząć korzystanie z usługi. Jeśli nie współpracujesz jeszcze z żadnym dostawcą usług rezerwacji, możesz wyświetlić kwalifikujących się dostawców w sekcji Rezerwacje w Menedżerze Profilu Firmy.
Włączanie rezerwacji spotkań za pomocą Profilu Firmy
Gdy zarządzasz swoją obecnością w internecie za pomocą Profilu Firmy, utworzone przez Ciebie lokalizacje firmy są powiązane z identyfikatorami miejsc w Google Maps Platform, co umożliwia zintegrowanie funkcji mapowania z firmowymi bazami danych.
Interfejsy Business Profile API umożliwiają tworzenie działań, takich jak rezerwacja wizyty, które możesz pobierać i wyświetlać w aplikacjach. Wymaga to jednak wykonania kilku czynności ręcznych, jak opisano poniżej.
Gdy użytkownicy wyświetlają informacje o miejscu dla jednej z Twoich lokalizacji w panelu bocznym, możesz podać link, który umożliwi im umówienie się na spotkanie. W tej sekcji dowiesz się, jak to zrobić.
-
Utwórz interfejs Business Profile API
placeActionLinkdla lokalizacji typuAPPOINTMENT,ONLINE_APPOINTMENTlubDINING_RESERVATION.placeActionLinkbędzie obiektem, którego użyjesz w linku do spotkania w panelu bocznym. (Jeśli masz już utworzony link do działania związanego z rezerwacją wizyty, przejdź do następnego kroku). Oto przykład odpowiedzi na udanąplaceActionLinks.createoperację POST:{ "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" } -
Znajdź lokalizację profilu firmy powiązaną z identyfikatorem miejsca w Google Maps Platform.
Gdy użytkownicy wyświetlają informacje o miejscu, widzą szczegóły dotyczące identyfikatora miejsca w Google Maps Platform. Identyfikator miejsca jest powiązany z identyfikatorem lokalizacji w Profilu Firmy, więc aby pobrać i wyświetlić utworzony przez siebie link do rezerwacji wizyty, musisz znaleźć identyfikator lokalizacji na podstawie identyfikatora miejsca w Mapach. Wywołaj te interfejsy Business Profile API:
- Wyświetl listę kont projektu.
- Wyświetl wszystkie lokalizacje na koncie.
- W lokalizacjach konta element
LocationKeyzawiera identyfikator miejsca w Google Maps Platform, który możesz porównać z identyfikatorem miejsca wyświetlanej lokalizacji.
-
Dzięki identyfikatorowi lokalizacji możesz uzyskać odpowiedni link do działania. Aby pobrać istniejącą wizytę, użyj
placeActionLink, list existingplaceActionLinksdla lokalizacji i odfiltrujplaceActionType, aby znaleźć link do wizyty, którego chcesz użyć (APPOINTMENT,ONLINE_APPOINTMENTlubDINING_RESERVATION).Poniższy przykład pokazuje APPOINTMENT
placeActionLinkw odpowiedzi na wywołanie 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" } ] } - Utwórz i wypełnij
<div>w panelu bocznym odpowiednimi danymi z obiektuplaceActionLink, zwłaszcza identyfikatorem URI linku do rezerwacji spotkania.
Inne alternatywne sposoby dodawania linków do spotkań
Jeśli nie zarządzasz profilem firmy lub nie chcesz korzystać z rozwiązania Szybki konstruktor Lokalizator Plus, sprawdź dokumentację platformy do rezerwacji wizyt, aby dowiedzieć się, jak umieścić widżet rezerwacji w witrynie lub aplikacji. Inną opcją jest korzystanie z Google Cloud, np. z Cloud Spanner do zarządzania asortymentem (film).
Wyświetlanie ofert lokalnych
W panelu bocznym informacji o miejscu możesz wyświetlać oferty lokalne, które użytkownicy mogą klikać. Interfejs Google Moja Firma API umożliwia tworzenie i pobieranie „postów” (np. ofert lokalnych) powiązanych z Twoimi lokalizacjami. Na ilustracji poniżej przedstawiono przykład oferty lokalnej w panelu bocznym Szczegóły miejsca.
Schemat architektury w sekcji Szybki konstruktor pokazuje technologie dostępne do dodawania ofert do lokalizatora.
Ponieważ oferty lokalne są powiązane z lokalizacjami, musisz znaleźć identyfikator lokalizacji Profilu Firmy, który jest powiązany z identyfikatorem miejsca w Google Maps Platform dla lokalizacji, którą wyświetlają użytkownicy.
Gdy masz identyfikator lokalizacji w Profilu Firmy, możesz pobrać odpowiednią ofertę jako localPost, aby wyświetlić ją w panelu bocznym informacji o miejscu. Aby to zrobić:
- Za pomocą interfejsu Google Moja Firma API możesz tworzyć dowolne posty z ofertami, które chcesz wyświetlać, o typie
OFFER. -
Znajdź lokalizację profilu firmy lub identyfikator lokalizacji powiązany z identyfikatorem miejsca na mapie.
Gdy użytkownicy wyświetlają szczegóły miejsca, widzą informacje o miejscu w Google Maps Platform. Identyfikator miejsca jest powiązany z identyfikatorem lokalizacji w Profilu Firmy, więc musisz znaleźć identyfikator lokalizacji na podstawie identyfikatora miejsca w Mapach, aby pobrać i wyświetlić link do oferty lokalnej dla swojej lokalizacji. Wywołaj te interfejsy Business Profile API:
- Wyświetl listę kont projektu.
- Wyświetl wszystkie lokalizacje na koncie.
- W lokalizacjach konta element
LocationKeyzawiera identyfikator miejsca w Mapach, który możesz porównać z identyfikatorem miejsca wyświetlanej lokalizacji.
Oto przykładowe żądanie szczegółów lokalizacji w interfejsach Business Profile API:
https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700
Odpowiedź zawiera pole
locationKey, które jest identyfikatorem miejsca, którego możesz używać w żądaniach Google Maps Platform.Rozwiń, aby zobaczyć przykładową odpowiedź.
{ "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" } } -
Gdy masz już identyfikator lokalizacji, możesz uzyskać wybraną ofertę. Aby pobrać istniejący post z ofertą, wyświetl listę istniejących
localPostsdla lokalizacji i odfiltrujtopicTypetypuOFFER, aby znaleźć treść oferty, której chcesz użyć.Oto przykładowa prośba o wyświetlenie listy aktywnych postów lokalnych w przypadku danej lokalizacji:
https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700/localPosts
Poniższy przykład pokazuje
OFFERlocalPostw odpowiedzi.Rozwiń, aby zobaczyć przykładową odpowiedź.
{ "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." } }, ], } - Utwórz i wypełnij
<div>w panelu bocznym odpowiednimi danymi z obiektulocalPost.
Dostosowywanie mapy
Wygląd i szczegóły mapy możesz zmieniać na wiele sposobów. Możesz na przykład:
- Utwórz własne niestandardowe znaczniki, które zastąpią domyślne pinezki.
- Zmień kolory elementów mapy, aby odzwierciedlały Twoją markę.
- Kontroluj, które ciekawe miejsca (atrakcje, restauracje, hotele itp.) i w jakim zagęszczeniu wyświetlasz, dzięki czemu możesz skupić uwagę użytkowników na swoich lokalizacjach, a jednocześnie wyróżnić punkty orientacyjne, które pomogą im dotrzeć do najbliższej lokalizacji.
Tworzenie niestandardowych znaczników mapy
Znaczniki zaawansowane możesz dostosowywać, zmieniając domyślne tło, obramowanie lub kolor glifu pinezki (np. aby wskazać, czy lokalizacja jest otwarta), zastępując znacznik niestandardową grafiką, np. logo marki, lub tworząc niestandardowe znaczniki HTML i CSS. Okienka informacyjne mogą zawierać dodatkowe informacje dla użytkowników, takie jak godziny otwarcia, numer telefonu czy zdjęcia.
Poniżej znajdziesz przykładową mapę z użyciem niestandardowych znaczników graficznych. (Zobacz kod źródłowy w temacie o niestandardowych znacznikach graficznych w interfejsie Maps JavaScript API).
Szczegółowe informacje znajdziesz w dokumentacji zaawansowanych znaczników dla JavaScriptu (internet), Android i iOS.
Stylizowanie mapy
Google Maps Platform umożliwia dostosowywanie mapy w taki sposób, aby użytkownicy mogli znaleźć najbliższe miejsce, jak najszybciej do niego dotrzeć i wzmocnić Twoją markę. Możesz na przykład zmienić kolory mapy, aby dopasować je do swojej marki, a także ograniczyć elementy rozpraszające uwagę na mapie, kontrolując punkty orientacyjne widoczne dla użytkowników. Google Maps Platform udostępnia też szereg szablonów map startowych, z których niektóre są zoptymalizowane pod kątem różnych branż, takich jak turystyka, logistyka, nieruchomości i handel detaliczny.
Style mapy możesz tworzyć i modyfikować w konsoli Google Cloud na stronie Style mapy w swoim projekcie.
Rozwiń, aby zobaczyć animacje tworzenia i stylizowania stylów map w konsoli Cloud:
Style mapy branżowej
Animacja pokazująca wstępnie zdefiniowane style map dostosowane do konkretnych branż, których możesz używać. Te style stanowią optymalny punkt początkowy dla każdego typu branży. Na przykład styl mapy „Handel detaliczny” ogranicza liczbę punktów orientacyjnych na mapie, dzięki czemu użytkownicy mogą skupić się na Twoich lokalizacjach oraz punktach orientacyjnych, które pomogą im jak najszybciej i najłatwiej dotrzeć do najbliższej lokalizacji.
Sterowanie ciekawymi miejscami
Animacja ustawia kolor znacznika dla ciekawych miejsc i zwiększa ich gęstość w stylu mapy. Im większe zagęszczenie, tym więcej znaczników ciekawych miejsc pojawia się na mapie.
Każdy styl mapy ma własny identyfikator. Po opublikowaniu stylu w konsoli Cloud odwołujesz się do tego identyfikatora mapy w kodzie, co oznacza, że możesz aktualizować styl mapy w czasie rzeczywistym bez refaktoryzacji aplikacji. Nowy wygląd automatycznie pojawi się w istniejącej aplikacji i będzie używany na różnych platformach. W przykładach poniżej pokazujemy, jak dodać identyfikator mapy do strony internetowej za pomocą interfejsu Maps JavaScript API.
Jeśli w adresie URL skryptu umieścisz co najmniej jeden parametr map_ids, interfejs Maps JavaScript API automatycznie udostępni te style, aby przyspieszyć renderowanie mapy, gdy wywołasz te style w kodzie.
<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>
Poniższy kod wyświetla na stronie internetowej mapę ze stylem. (Nie pokazano elementu HTML <div id="map"></div>, w którym mapa będzie wyświetlana na stronie).
map = new google.maps.Map(document.getElementById('map'), { center: {lat: 51.485925, lng: -0.129500}, zoom: 12, mapId: '1234abcd5678efgh' });
Dowiedz się więcej o wdrażaniu definiowania stylów map w Google Cloud w JavaScript (w internecie), Android i iOS.
Uzyskiwanie statystyk dotyczących korzystania z usługi za pomocą analityki
Dzięki analityce możesz uzyskać cenne statystyki dotyczące interakcji użytkowników z Twoim lokalizatorem. W tej sekcji znajdziesz wskazówki dotyczące konfigurowania i monitorowania statystyk Google Analytics i Profilu Firmy, aby śledzić dane, które Cię najbardziej interesują. Użytkownikom Quick Builder Locator Plus panel analityczny pomaga analizować dane i generować statystyki, dzięki czemu na podstawie anonimowych danych mogą oni sprawdzić, jak użytkownicy witryny korzystają z lokalizatora sklepów.
Aby uzyskać dostęp do tego raportu, otwórz sekcję raportów o zaangażowaniu w konsoli Cloud. Więcej informacji o tym raporcie znajdziesz w artykule Raporty dotyczące zaangażowania.
Google Analytics oferuje wiele funkcji, dlatego nie będziemy podawać wyczerpujących informacji o konfiguracji i użytkowaniu. Zamiast tego wskażemy Ci kluczowe dokumenty, w których znajdziesz więcej informacji i instrukcji, a także zwrócimy uwagę na najważniejsze kwestie analityczne dotyczące Twojej aplikacji lokalizacyjnej.
Konfiguracja usługi Google Analytics
Jeśli używasz już Google Analytics w aplikacji, możesz pominąć tę sekcję.
Poniżej znajdziesz przykład „globalnego tagu”, który należy wkleić w witrynie, aby włączyć 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>
Niezależnie od tego, czy używasz Menedżera tagów Google, czy dodajesz Google Analytics bezpośrednio do witryny, najważniejsze jest, aby zrozumieć, jak wykorzystać wdrożenie Google Analytics do wykonania tych czynności:
- wywoływać interakcje użytkowników, np. kliknięcia, które można mierzyć niezależnie od odsłon stron internetowych (zdarzenia);
- Wyświetlaj surowe dane (dane) w przydatnych grupach (wymiarach lub wymiarach niestandardowych).
Używanie zdarzeń niestandardowych
Poniżej znajdziesz przykład definiowania zdarzenia niestandardowego w lokalizatorze:
gtag('event', 'location', { 'method': 'address' });
Ważne jest, aby nazwy event i method były wystarczająco jasne, aby można było zrozumieć zdarzenia w raportach. Uruchamiaj je w przypadku konkretnych interakcji, które chcesz mierzyć, np. gdy użytkownik wybierze adres z listy rozwijanej Autouzupełnianie, jak pokazano na ilustracji poniżej.
Możesz wysłać do Google Analytics ten wywołanie śledzenia, które korzysta ze zdefiniowanego przez Ciebie zdarzenia i metody. (Dla ułatwienia odczytu każdy parametr zapytania wyświetlimy w osobnym wierszu).
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
Na ilustracji poniżej widać, jak to wywołanie Google Analytics pojawia się w widoku Sprawdź w przeglądarce, na karcie Sieć. (Kliknij, aby powiększyć).
Możesz sprawdzić, czy tagi zdarzeń niestandardowych są prawidłowo rejestrowane, wyświetlając w Google Analytics widok „Czas rzeczywisty”. Na przykład zdarzenie „location” skonfigurowane wcześniej na potrzeby autouzupełniania miejsc pojawia się w Google Analytics w sposób pokazany na poniższych ilustracjach.
Możesz też monitorować zdarzenia w czasie rzeczywistym za pomocą raportu DebugView, jak pokazano na poniższym rysunku. Pamiętaj, że zanim uzyskasz dostęp do pełnego raportu Zdarzenia w sekcji Zaangażowanie > Zdarzenia w Google Analytics, musisz odczekać 24 godziny.
Możesz też opracowywać i mierzyć strategie zwiększania ruchu w sklepie stacjonarnym w swoich lokalizacjach stacjonarnych za pomocą aplikacji lokalizatora. Na przykład Google Analytics ma funkcję Wizyty w sklepie stacjonarnym w Analytics, która łączy dane analityczne dotyczące wizyt w sklepie stacjonarnym (mierzone przez Google Ads) z danymi analitycznymi lokalizatora. Możesz też opracowywać własne strategie dotyczące aplikacji i lokalizacji, np. oferty online do wykorzystania w sklepach stacjonarnych.
Dane dotyczące Profilu Firmy
Oprócz śledzenia w Google Analytics zdarzeń, danych i wymiarów, które Cię interesują, Profil Firmy ma też własne dane. Jeśli na przykład dodasz do lokalizatora linki do rezerwacji wizyt i ofert lokalnych, możesz uzyskać dane o wyświetleniach i kliknięciach tych linków.
Poniższe przykładowe żądanie do interfejsów Business Profile API zawiera prośbę o różne rodzaje danych. W przypadku śledzenia kliknięć oferty najbardziej odpowiednie będą dane LOCAL_POST_VIEWS_SEARCH i LOCAL_POST_ACTIONS_CALL_TO_ACTION.
Rozwiń, aby zobaczyć przykładową prośbę.
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"
}
}
}Rozwiń, aby zobaczyć przykładową odpowiedź.
{
"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"
}
}
]
}
]
}
Odpowiedź zawiera dane, w tym:
- 1571 wyświetleń lokalizacji w Mapach Google
- 631 wyświetleń lokalizacji w wyszukiwarce Google.
- 3 zapytania o wskazówki dojazdu do lokalizacji.
- 42 kliknięcia
LOCAL_POST_ACTIONS_CALL_TO_ACTIONoferty. - 11 wyświetleń Postów w Google w wyszukiwarce Google.
Inna opcja pomiaru danych polega na użyciu funkcji Zarezerwuj z Google do tworzenia linków do działań. Gdy użytkownicy klikną linki do działań utworzone w ramach funkcji Rezerwuj z Google, możesz rejestrować te działania w Google Analytics, co umożliwia śledzenie konwersji w Google Analytics. Więcej informacji znajdziesz w dokumentacji śledzenia konwersji.
Niezależnie od tego, jakiej strategii danych używasz, pomiary to nie tylko sprawdzanie, jak radzisz sobie w porównaniu ze wskaźnikami KPI. Liczby te pomogą Ci też zrozumieć, jaki wpływ na Twoją firmę mają te ulepszenia lokalizatora. Możesz też porównać dane z Google Analytics w lokalizatorze z danymi z profilu firmy. Porównując te dane, możesz na przykład sprawdzić, ilu klientów korzysta z lokalizatora i Map Google, aby uzyskać wskazówki dojazdu do Twoich placówek.
Ulepszanie Lokalizatora Plus
W zależności od potrzeb firmy lub użytkowników możesz dodatkowo zwiększyć wygodę użytkownika.
Wysyłanie trasy na urządzenie mobilne
Aby jeszcze bardziej ułatwić użytkownikom dotarcie do lokalizacji, możesz wysłać im SMS-a lub e-maila z linkiem do wskazówek dojazdu. Gdy klikną ten link, na ich telefonie uruchomi się aplikacja Mapy Google (jeśli jest zainstalowana) lub w przeglądarce na urządzeniu otworzy się strona maps.google.com. W obu przypadkach użytkownik może skorzystać ze szczegółowych wskazówek dojazdu, w tym wskazówek głosowych, aby dotrzeć do miejsca docelowego.
Użyj
adresów URL Map, aby utworzyć adres URL z wskazówkami dojazdu, np. taki, w którym zakodowana na potrzeby adresu URL nazwa miejsca jest parametrem destination, a identyfikator miejsca jest parametrem destination_place_id. Tworzenie i używanie adresów URL Map Google jest bezpłatne, więc nie musisz umieszczać w nich klucza interfejsu API.
https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU
Opcjonalnie możesz podać parametr zapytania origin, używając tego samego formatu adresu co w przypadku miejsca docelowego. Jeśli go pominiesz, wskazówki dojazdu będą się zaczynać od bieżącej lokalizacji użytkownika, która może być inna niż miejsce, w którym korzystał on z aplikacji Lokalizator Plus. Adresy URL Map zawierają dodatkowe opcje parametrów zapytania, takie jak travelmode i dir_action=navigate, które umożliwiają uruchomienie wskazówek dojazdu z włączoną nawigacją.
Ten klikalny link, który rozszerza powyższy przykładowy adres URL, ustawia origin jako stadion piłkarski w Londynie i używa travelmode=transit, aby podać wskazówki dojazdu transportem publicznym do miejsca docelowego.
Aby wysłać SMS-a lub e-maila zawierającego ten adres URL, zalecamy użycie aplikacji innej firmy, np. twilio. Jeśli korzystasz z App Engine, możesz używać usług innych firm do wysyłania SMS-ów lub e-maili. Więcej informacji znajdziesz w artykule Wysyłanie wiadomości za pomocą usług innych firm.
Wyświetlanie Street View, aby pomóc użytkownikom w wizualizacji lokalizacji
W przypadku wielu miejsc na świecie Street View może wyświetlać widok z zewnątrz, dzięki czemu użytkownicy mogą zobaczyć lokalizację, zanim do niej dotrą. Widok ulicy możesz udostępniać w formie interaktywnej (w internecie) lub statycznej (API), w zależności od tego, czy chcesz, aby użytkownicy mogli „rozejrzeć się” po okolicy w 360 stopniach. Street View jest też dostępny na Android i iOS.
Określanie lokalizacji użytkownika za pomocą geolokalizacji
W większości przypadków możesz określić lokalizację użytkownika za pomocą usług lokalizacyjnych wbudowanych w urządzenia lub przeglądarki. Podajemy przykład korzystania z funkcji geolokalizacji HTML5 przeglądarki, aby wyświetlać położenie geograficzne użytkownika lub urządzenia na mapie Google. Dostępna jest też dokumentacja dotycząca proszenia o uprawnienia i uzyskiwania lokalizacji na Androidzie i iOS. Może się jednak zdarzyć, że będziesz potrzebować alternatywnego lokalizatora, np. gdy usługi lokalizacyjne urządzenia są wyłączone lub gdy masz obawy, że lokalizacja urządzenia jest fałszowana.
Interfejs Geolocation API to interfejs API po stronie serwera, który zwraca lokalizację i promień dokładności na podstawie informacji o stacjach bazowych i węzłach Wi-Fi wykrywanych przez klienta. Geolokalizacja może służyć jako mechanizm zapasowy do określania lokalizacji użytkownika lub do sprawdzania lokalizacji podanej przez urządzenie.
Łączenie niestandardowych danych o lokalizacji z informacjami o miejscu
W poprzedniej sekcji Podawanie szczegółów miejsca omówiliśmy korzystanie z informacji o miejscu, aby dostarczać użytkownikom bogate informacje o Twoich lokalizacjach, takie jak godziny otwarcia, zdjęcia i opinie.
Warto poznać ceny i poziomy kodów SKU różnych pól danych w interfejsie Places API (nowym). Aby zarządzać kosztami, możesz połączyć informacje, które już masz o swoich lokalizacjach, z aktualnymi informacjami z Map Google, takimi jak tymczasowe zamknięcie, godziny otwarcia w święto oraz oceny, zdjęcia i opinie użytkowników. Jeśli masz już dane kontaktowe swoich lokalizacji, nie musisz wysyłać do interfejsu Place Details żądania tych pól. Możesz ograniczyć maskę pola, aby pobierać tylko te pola, które chcesz wyświetlać.
Możesz mieć własne dane o miejscach, które uzupełniają lub zastępują informacje o miejscu. Codelab dotyczący lokalizatora pełnoekranowego zawiera przykład użycia GeoJSON z bazą danych do przechowywania i pobierania własnych szczegółów lokalizacji.