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 zewnętrznych dostawców. Interaktywny interfejs umożliwia wygenerowanie kodu i wdrożenie go w chmurze w ciągu kilku minut.
Użytkownicy chcą wyszukiwać informacje o produktach i usługach online oraz znajdować najlepsze i najwygodniejsze miejsce, w którym mogą odwiedzić firmę, 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 stacjonarnych, poprawią zadowolenie użytkowników i zmniejszą liczbę połączeń z zespołem pomocy. Chcesz też mierzyć skuteczność lokalizatora, aby sprawdzić, czy klienci mogą znaleźć Twoją lokalizację, i określić, gdzie należy wprowadzić ulepszenia.
Lokalizator Plus — wskazówki i porady dotyczące dostosowywania, które podajemy w tym temacie — to optymalne połączenie interfejsów Google Maps Platform API, które zalecamy do tworzenia doskonałych lokalizatorów. Dzięki tym praktykom możesz ułatwić użytkownikom znajdowanie Twoich lokalizacji na mapie, wyświetlać szczegółowe informacje, które pomogą im podejmować decyzje, oraz podawać wskazówki dojazdu, niezależnie od tego, czy jadą samochodem, jadą na rowerze, idą pieszo czy korzystają z transportu publicznego.
Użytkownicy Lokalizatora Plus mają dostęp do panelu analitycznego, który pomaga analizować dane i generować na ich podstawie statystyki. Dzięki temu możesz uzyskać jasny obraz tego, jak dobrze Twoi klienci korzystają z lokalizatora sklepów. Aby uzyskać dostęp do tego raportu, w konsoli przejdź do sekcji Raporty dotyczące zaangażowania. Więcej informacji o tym raporcie znajdziesz w artykule Raporty dotyczące zaangażowania.
Poniższy diagram przedstawia główne interfejsy API, które są używane do implementacji 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 jak najbardziej kompletny zestaw informacji. (Kliknij, aby powiększyć).
Włączam interfejsy API
Aby wdrożyć te praktyki, musisz włączyć w konsoli Google Cloud te interfejsy API:- Maps JavaScript API
- Places API
- Geocoding API
- Distance Matrix API (starsza wersja)
- Directions API (starsza wersja)
Sekcje implementacji
W tym temacie omówimy te praktyki i dostosowania:
- Ikona wyboru jest podstawowym elementem.
- Ikona gwiazdki jest opcjonalnym, ale zalecanym elementem dostosowywania, który zwiększa skuteczność rozwiązania.
| Wyświetlanie lokalizacji na interaktywnej mapie |
Utwórz mapę, która pozwoli użytkownikom wyświetlać szczegóły lokalizacji, przesuwać ją oraz powiększać i pomniejszać. Możesz też skorzystać z Szybkiego konstruktora Lokalizator Plus, aby szybko utworzyć mapę, w tym łatwo importować informacje o firmie z Profilu Firmy, osadzać linki do rezerwacji wizyt i wdrażać je w Google Cloud Storage. |
|
| Podawanie informacji o miejscu | Gdy użytkownicy znajdą na mapie Twoje najbliższe lokalizacje, udostępnij im przydatne informacje o miejscu, aby ułatwić im podjęcie 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. | |
| Wyświetlanie czasu podróży i odległości 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 rowerowy. | |
| Pomaganie użytkownikom w rezerwowaniu spotkań |
Umożliwienie użytkownikom rezerwowania wizyt w panelu bocznym informacji o miejscu. Możesz też skorzystać z Szybkiego konstruktora Lokalizator Plus, aby szybko utworzyć mapę, w tym łatwo importować informacje o firmie z Profilu Firmy, osadzać linki do rezerwacji wizyt i wdrażać je 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 | Uzyskuj dane o wskazówkach dojazdu z miejsca początkowego do 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 konkretne ważne miejsca, aby ułatwić użytkownikom orientację, i kontroluj ich zagęszczenie, aby uniknąć przeładowania mapy. | |
| Uzyskiwanie statystyk użytkowania za pomocą analiz | Skonfiguruj i używaj Google Analytics, aby uzyskiwać statystyki dotyczące strategii lokalizatora i jej wdrożenia. | |
| Wysyłanie wskazówek dojazdu 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 z informacjami o miejscu, aby udostępniać użytkownikom bogaty zestaw danych, który ułatwi im podejmowanie decyzji. |
Wyświetlanie lokalizacji na interaktywnej mapie
Lokalizator jest ważnym elementem wrażeń użytkownika. Niektóre witryny nie mają jednak nawet prostej mapy, co zmusza użytkowników do opuszczenia witryny lub aplikacji, aby znaleźć lokalizację w pobliżu. 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ć te funkcje, osadzając i dostosowując mapy w swoich aplikacjach.
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 po wdrożeniu, oraz (2) korzystając z własnego wdrożenia Map dynamicznych. W tej sekcji opisujemy szczegółowo te opcje.
Korzystanie z Szybkiego konstruktora – Lokalizator Plus
Aby zaimportować informacje o firmie z jej Profilu Firmy, możesz użyć rozwiązania Szybki konstruktor Lokalizator Plus. Dzięki temu zmiana szczegółów firmy w Profilu Firmy będzie odzwierciedlona w lokalizatorze sklepów w Twojej witrynie. Mogą to być godziny pracy, dane kontaktowe, zdjęcia, opcje usług i inne informacje. 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 dynamicznych map
| Ten przykład korzysta z: Maps JavaScript API | Dostępne też 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.
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&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 w przypadku 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 zasięgu Google Maps Platform. Dowiesz się też 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 initMap funkcji skryptu określonej w adresie URL skryptu. W tym skrypcie, który pokazujemy w przykładzie poniżej, możesz ustawić początkową lokalizację, typ mapy i elementy sterujące, które będą dostępne na mapie dla użytkowników. Zwróć uwagę, że
getElementById() odnosi się do identyfikatora „mapy” div powyżej.
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: { lat: 51.485925, lng: -0.129500 }, zoomControl: false }); }
W przypadku lokalizatora zwykle interesuje Cię ustawienie początkowej lokalizacji, środka 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: interfejsu Places API | Dostępne również: JavaScript |
Możesz mieć bazę danych swoich lokalizacji z podstawowymi informacjami, takimi jak nazwa lokalizacji, jej adres i numer telefonu. Aby pobrać informacje o danym miejscu dostępne na platformie Map Google, w tym współrzędne geograficzne i informacje dodane przez użytkowników, znajdź identyfikator miejsca odpowiadający każdej lokalizacji w Twojej bazie danych. Możesz wywołać
punkt końcowy Find Place w interfejsie Places API wyszukiwania miejsc i poprosić tylko o pole place_id. Oto przykład żądania identyfikatora miejsca dla biura Google w Londynie:
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
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, ale nie współrzędne geograficzne, użyj interfejsu Geocoding API, aby uzyskać szerokość i długość geograficzną 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 oraz 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, który został zwrócony w przypadku 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 znaczników do mapy, ale możesz też skorzystać z innych opcji, takich jak warstwy danych.
Gdy uzyskasz szerokość i długość geograficzną swojej lokalizacji, możesz dodać znacznik do mapy, np. tak:
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);
Za pomocą kilku znaczników możesz wyświetlić lokalizacje kilku 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 również: API | Android | iOS |
Możesz udostępniać użytkownikom szczegóły miejsca, które powinni poznać przed odwiedzeniem jednej 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 możesz filtrować i renderować 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. Informacje o tym, jak pobrać identyfikator miejsca lokalizacji, znajdziesz w artykule Pobieranie identyfikatorów miejsc.
Rozwiń, aby zobaczyć filmy, w przypadku których można poprosić o informacje o miejscu:
Pobieranie godzin otwarcia
Sprawdzanie zamknięć
Kontrola kosztów
W tym przykładzie używamy biblioteki Miejsc w interfejsie Maps JavaScript API do pobierania informacji o miejscu 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({ 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); } }); });
Wyświetlanie lokalizacji z perspektywy 45°
| Ten przykład korzysta z: Maps JavaScript API | Dostępne też na: Android | iOS |
Widok z lotu ptaka ułatwia użytkownikom wyobrażenie sobie, jak wygląda Twoja lokalizacja, co pomaga im ją łatwiej znaleźć. Gdy użytkownik wybierze jedną lokalizację, aby zobaczyć 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 podsumowującym kilku pobliskich lokalizacji. Aby to ułatwić, dodaj detektor, który wykrywa, kiedy użytkownik opuszcza widok szczegółowy w wyniku interakcji z mapą lub w widoku listy. Na przykład nasłuchiwanie zdarzenia zoom_changed na obiekcie map wskazuje, że użytkownik ręcznie pomniejszył widok szczegółowy lub wywołał inną funkcję, która zaktualizowała poziom powiększenia. W tym przykładzie pomniejszenie resetuje mapę do pierwotnego typu 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 też 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 zezwolenie na ustawienie punktu początkowego jako ich bieżącej lokalizacji. 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, korzystając bezpośrednio z bibliotek Miejsc.
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 dodatek to 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>Następnie dodaj do strony pole tekstowe, w którym użytkownicy będą mogli wpisywać tekst.
<input id="autocomplete" placeholder="Enter starting address, city, or zip code" type="text"></input>
Na koniec musisz zainicjować usługę autouzupełniania i połączyć ją z nazwanym polem tekstowym.
Ograniczenie
podpowiedzi autouzupełniania miejsc do typów geokodowania konfiguruje pole do wprowadzania danych tak, aby akceptowało adresy ulic, dzielnice, miasta i kody pocztowe. Dzięki temu użytkownicy mogą wpisywać dowolny poziom szczegółowości, aby opisać swoje pochodzenie. Pamiętaj, aby poprosić o pole geometry, aby odpowiedź zawierała 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 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); }
W tym przykładzie po wybraniu adresu przez użytkownika wykonywana jest funkcja addUserLocation(). Pobiera geometrię pasującego wyniku i lokalizację użytkownika, a następnie przesuwa mapę do tej lokalizacji i dodaje znacznik.
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); }
Możesz wtedy zobaczyć relację między użytkownikiem a dowolnymi lokalizacjami, co widać 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: Distance Matrix API (starsza wersja) | Dostępne również: Usługa macierzy odległości, Maps JavaScript API (starsza) |
Gdy uzyskasz lokalizację użytkownika, możesz ją porównać z lokalizacjami swoich firm. Korzystanie z usługi macierzy odległości w interfejsie Maps JavaScript API (starsza wersja) pomaga użytkownikom wybrać lokalizację, do której najłatwiej dotrzeć, na podstawie czasu dojazdu lub odległości drogowej.
Wyświetlanie lokalizacji w pobliżu użytkownika oznacza, że masz już wypełnione informacje o lokalizacjach. 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 po prostu 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.
Usługa Distance Matrix Service pobiera listę lokalizacji początkowych i docelowych, a następnie zwraca nie tylko odległość, ale też czas podróży między nimi. W przypadku użytkownika punkt początkowy to miejsce, w którym się obecnie znajduje, lub wybrany punkt początkowy, a punkty docelowe to lokalizacje. Miejsca odjazdu i docelowe można określić jako pary współrzędnych lub adresy. Te ostatnie będą dopasowywane podczas wywoływania usługi. Możesz użyć macierzy odległości z wieloma dodatkowymi parametrami, aby wyświetlać wyniki na podstawie bieżącego lub przyszłego czasu dojazdu.
W przykładzie poniżej wywoływana jest usługa Distance Matrix Service z określeniem pochodzenia użytkownika i lokalizacji. Ten przykład pokazuje odległość od środka mapy do 3 biur Google w Londynie.
Szybki przewodnik po kodowaniu adresów URL: %2C = , (przecinek), %3A = : (dwukropek) i %7C = | (kreska pionowa).
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_aOto wersja, którą możesz skopiować i uruchomić:
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_aRzeczywista odpowiedź usługi będzie zawierać listę pasujących adresów, odległości i czasów trwania, podobną do tej w poniższym przykładzie:
Rozwiń, aby zobaczyć przykładową odpowiedź:
{ "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" }
Na poniższym obrazie przedstawiono miejsce odjazdu (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 ćwiczeniach z programowania dotyczących lokalizatora.
podawanie wskazówek nawigacyjnych,
| Ten przykład korzysta z: usługi wyznaczania trasy w Maps JavaScript API | Dostępne są też: Directions API (starsza wersja) 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. Możesz nawet pokazać emisję dwutlenku węgla w przypadku konkretnego środka transportu i wpływ danej podróży.
Usługa Kierunki ma też funkcje, które umożliwiają przetwarzanie wyników i łatwe wyświetlanie ich na mapie.
Poniżej znajdziesz przykład wyświetlania panelu z wskazówkami dojazdu. Więcej informacji o przykładzie znajdziesz w artykule Wyświetlanie tekstowych wskazówek dojazdu.
Więcej informacji o tych funkcjach Map znajdziesz w dokumentacji interfejsu Maps JavaScript API lub w samouczkach, które krok po kroku pokazują, jak utworzyć lokalizator.
Pomoc w rezerwowaniu spotkań
Gdy użytkownicy wyświetlają informacje o miejscu w panelu bocznym, możesz im ułatwić umówienie się na spotkanie za pomocą jednego kliknięcia przycisku, jak pokazano na poniższym rysunku.
Możesz to zrobić na kilka sposobów: (1) używając rozwiązania Szybki konstruktor Lokalizator Plus, które zapewnia tę funkcję od razu, oraz (2) używając Profilu Firmy. W tej sekcji znajdziesz szczegółowe informacje o tych opcjach.
Korzystanie z Szybkiego konstruktora – Lokalizator Plus
Możesz użyć rozwiązania Szybki konstruktor Lokalizator Plus, aby łatwo importować informacje o firmie z Profilu Firmy. Po zaimportowaniu do narzędzia Szybki konstruktor możesz włączyć osadzone linki do rezerwacji wizyt w lokalizacjach Twojej firmy za pomocą 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, w których firmy współpracują z obsługiwanym dostawcą usługi rezerwacji . Jeśli interesuje Cię usługa Zarezerwuj z Google, ale obecnie nie współpracujesz z partnerem tej usługi, poproś dostawcę o przesłanie zgłoszenia zainteresowania przez wypełnienie tego formularza i zapoznanie się z naszą dokumentacją, aby dowiedzieć się, jak zacząć. 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 swoich aplikacjach. Wymaga to jednak wykonania pewnych 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 udostępnić im link do umówienia wizyty. W tej sekcji opisujemy, jak to zrobić.
-
Utwórz interfejs Business Profile API
placeActionLinkdla lokalizacji typuAPPOINTMENT,ONLINE_APPOINTMENTlubDINING_RESERVATION.placeActionLinkto obiekt, którego używasz w przypadku linku do spotkania w panelu bocznym. (Jeśli masz już utworzony link do działania związanego z rezerwacją terminu, przejdź do następnego kroku). Oto przykładowa odpowiedź na udaną operację POSTplaceActionLinks.create:{ "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 Google Maps Platform.
Gdy użytkownicy wyświetlają informacje o miejscu, widzą szczegóły 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 wizyt, musisz znaleźć identyfikator lokalizacji na podstawie identyfikatora miejsca na mapie. 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.
-
Za pomocą identyfikatora lokalizacji możesz uzyskać odpowiedni link do działania. Aby pobrać istniejące spotkanie
placeActionLink, wyświetl listę istniejących spotkańplaceActionLinksw danej lokalizacji i odfiltruj wyniki wedługplaceActionType, aby znaleźć link do spotkania, 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 rezerwacji
Jeśli nie zarządzasz profilem firmy lub nie chcesz korzystać z rozwiązania Szybki konstruktor Lokalizator Plus, sprawdź na platformie rezerwacji wizyt dokumentację dotyczącą umieszczania widżetu 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ą kliknąć. 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 informacji o miejscu.
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 API Google Moja Firma możesz tworzyć dowolne wpisy 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ą informacje o miejscu, widzą szczegóły identyfikatora miejsca 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 na mapie, 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.
Poniżej znajdziesz 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" } } -
Teraz, gdy masz identyfikator lokalizacji, możesz skorzystać z wybranej oferty. Aby pobrać istniejący post z ofertą, wyświetl listę istniejących
localPostsdla lokalizacji i odfiltrujtopicTypeOFFER, aby znaleźć treść oferty, której chcesz użyć.Oto przykładowa prośba o wyświetlenie listy aktywnych wpisó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 są wyświetlane, aby skupić uwagę użytkowników na Twoich lokalizacjach, a jednocześnie wyróżnić punkty orientacyjne, które pomagają użytkownikom dotrzeć do najbliższej lokalizacji.
Tworzenie niestandardowych znaczników mapy
Możesz dostosować znaczniki, zmieniając domyślny kolor (może on wskazywać, czy lokalizacja jest obecnie otwarta) lub zastępując znacznik niestandardowym obrazem, np. logo Twojej marki. Dymki mogą dostarczać użytkownikom dodatkowych informacji, takich jak godziny otwarcia, numer telefonu czy nawet zdjęcia. Możesz też tworzyć niestandardowe znaczniki rastrowe, wektorowe, z możliwością przeciągania, a nawet animowane.
Poniżej znajdziesz przykładową mapę z użyciem niestandardowych znaczników. (Zobacz kod źródłowy w temacie dotyczącym niestandardowych znaczników w interfejsie Maps JavaScript API).
Szczegółowe informacje znajdziesz w dokumentacji znaczników dla JavaScriptu (internet), Android i iOS.
Stylizowanie mapy
Google Maps Platform umożliwia dostosowywanie stylu mapy, aby ułatwić użytkownikom znajdowanie najbliższej lokalizacji i jak najszybsze dotarcie do niej, a Tobie wzmacnianie marki. 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 zainteresowania 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 stylu mapy w konsoli Cloud:
Style mapy branżowej
Animacja przedstawia gotowe style mapy dostosowane do konkretnych branż. Te style stanowią optymalny punkt początkowy dla każdego rodzaju branży. Na przykład styl mapy dla handlu detalicznego ogranicza liczbę ważnych miejsc 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
Ta animacja ustawia kolor znacznika dla ciekawych miejsc i zwiększa zagęszczenie ciekawych miejsc 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 pojawi się automatycznie 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 1 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ą analiz
Dzięki analizom możesz uzyskać cenne informacje o tym, jak użytkownicy wchodzą w interakcje z Twoim lokalizatorem. W tej sekcji znajdziesz wskazówki dotyczące konfigurowania i monitorowania Google Analytics oraz analizy profilu firmy, aby śledzić dane, które Cię najbardziej interesują. Użytkownicy lokalizatora Szybki konstruktor Lokalizator Plus mają dostęp do panelu analitycznego, który pomaga analizować dane i generować na ich podstawie statystyki. Dzięki temu możesz sprawdzić, jak użytkownicy Twojej witryny wchodzą w interakcje z lokalizatorem sklepów na podstawie anonimowych danych.
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.
Ze względu na możliwości i elastyczność Google Analytics 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 związane z analityką w przypadku aplikacji lokalizacyjnej.
Konfiguracja usługi Google Analytics
Jeśli używasz już Google Analytics w aplikacji, możesz pominąć tę sekcję.
Oto 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 wiedzieć, 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).
Korzystanie ze 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 autouzupełniania, jak pokazano na ilustracji poniżej.
Możesz wysłać do Google Analytics to 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 rysunku poniżej pokazano, jak to wywołanie Google Analytics wygląda w widoku „Zbadaj” w przeglądarce, na karcie Sieć. (Kliknij, aby powiększyć).
Aby sprawdzić, czy tagi zdarzeń niestandardowych są prawidłowo rejestrowane, wyświetl 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 ilustracjach poniżej.
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 lokalizacjach stacjonarnych za pomocą aplikacji do wyszukiwania lokalizacji. Na przykład Google Analytics ma funkcję Wizyty w sklepie, która łączy dane analityczne dotyczące wizyt w sklepie stacjonarnym (mierzone przez Google Ads) z danymi analitycznymi aplikacji do wyszukiwania lokalizacji. Możesz też opracowywać własne strategie dotyczące aplikacji i lokalizacji, np. oferty online do wykorzystania w lokalizacjach stacjonarnych.
Dane Profilu Firmy
Oprócz śledzenia zdarzeń, danych i wymiarów, które Cię interesują, za pomocą Google Analytics Profil Firmy ma też własne dane. Jeśli np. 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ęć ofert 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 prośby o wskazówki dojazdu do lokalizacji.
- 42
LOCAL_POST_ACTIONS_CALL_TO_ACTIONkliknięcia oferty. - 11 wyświetleń Postów w Google w wyszukiwarce Google.
Inna opcja pomiaru 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żliwi Ci śledzenie konwersji w tej usłudze. Więcej informacji znajdziesz w dokumentacji śledzenia konwersji.
Niezależnie od tego, jakiej strategii pomiaru używasz, pomiary to nie tylko sprawdzanie, jak radzisz sobie w porównaniu ze wskaźnikami KPI. Te liczby pomogą Ci też zrozumieć, jaki wpływ na Twoją firmę mają 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 jeszcze bardziej poprawić wrażenia użytkownika.
Wysyłanie wskazówek dojazdu na urządzenie mobilne
Aby jeszcze bardziej ułatwić użytkownikom dotarcie do miejsca docelowego, możesz wysłać im SMS-a lub e-maila z linkiem do wskazówek dojazdu. Gdy go klikną, na ich telefonie uruchomi się aplikacja Mapy Google (jeśli jest zainstalowana) lub w przeglądarce urządzenia otworzy się strona maps.google.com. W obu przypadkach użytkownik będzie mógł skorzystać ze szczegółowej nawigacji, w tym ze wskazówek głosowych, aby dotrzeć do miejsca docelowego.
Użyj
adresów URL Map Google, aby utworzyć adres URL z wskazówkami dojazdu, np. taki jak poniżej. Nazwę miejsca zakodowaną w adresie URL umieść jako parametr destination, a identyfikator miejsca jako parametr 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 miejsce docelowe. 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 udostępniają 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 podany wyżej przykładowy adres URL, ustawia origin jako stadion piłkarski w Londynie i używa parametru 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 obecnie 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ą. Możesz udostępniać widok Street View 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 do wyświetlania położenia geograficznego 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 na urządzeniu 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 używanie informacji o miejscu do przekazywania użytkownikom wielu informacji o Twoich lokalizacjach, takich jak godziny otwarcia, zdjęcia i opinie.
Warto poznać koszt różnych pól danych w informacjach o miejscu, które są podzielone na kategorie: podstawowe, kontaktowe i dane o atmosferze. Aby zarządzać kosztami, możesz połączyć informacje, które już masz o swoich lokalizacjach, z aktualnymi informacjami (zwykle podstawowymi i kontaktowymi) 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 ich żądać w informacjach o miejscu. Możesz ograniczyć żądanie do pobierania tylko pól danych podstawowych lub danych o atmosferze, w zależności od tego, co 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.