Przegląd
Usługa Google Maps Platform jest dostępna w wersji internetowej (JS, TS), na Androida i iOS. Oferuje również interfejsy API usług internetowych do uzyskiwania informacji o miejscach, trasach dojazdu i odległościach. Przykłady w tym przewodniku zostały napisane z myślą o 1 platformie, ale podane są linki do dokumentacji na potrzeby implementacji na innych platformach.
Szybki konstruktor w Google Cloud Console pozwala szybko utworzyć lokalizator, w tym importować wizytówki z Profilu Firmy i automatycznie umieszczać linki do rezerwacji spotkań od dostawców zewnętrznych. Interaktywny interfejs pozwala wygenerować kod i wdrożyć go w Cloud w ciągu kilku minut.
Użytkownicy chcą wyszukiwać informacje o produktach i usługach w internecie oraz znajdować najlepsze i najdogodniejsze lokalizacje, w których mogą się umówić na wizytę, umówić się na spotkanie lub odbiór zamówienia. Klient chce jak najszybciej dotrzeć do Twojej lokalizacji, dlatego chcesz zapewnić mu dostęp do zaawansowanych funkcji online, które pozwolą zwiększyć liczbę wizyt w Twoich placówkach stacjonarnych, zwiększyć zadowolenie użytkowników i zmniejszyć liczbę połączeń z zespołem pomocy. Chcesz także zmierzyć skuteczność lokalizatora, aby określić, czy klienci mogą znaleźć Twoją lokalizację, i chcesz się dowiedzieć, co możesz ulepszyć.
Lokalizator Plus – wskazówki i wskazówki dotyczące dostosowywania, które podajemy w tym temacie – to optymalna kombinacja interfejsów API Google Maps Platform, która zapewnia wygodę użytkowników lokalizatora. Stosując się do tych metod, możesz pomóc użytkownikom znaleźć Twoją lokalizację na mapie, zobaczyć szczegółowe informacje potrzebne do podjęcia decyzji i udzielić im wskazówek dojazdu, niezależnie od tego, czy jadą samochodem, rowerem, pieszo czy transportem publicznym.
W przypadku użytkowników Lokalizatora Plus panel statystyk pomaga analizować dane i generować na ich podstawie statystyki. Dzięki temu masz jasny obraz tego, jak kupujący wchodzą w interakcję z lokalizatorem sklepów. Aby uzyskać dostęp do tego raportu, otwórz w konsoli sekcję Raporty zaangażowania. Więcej informacji o tym raporcie znajdziesz w artykule Raporty zaangażowania.
Poniższy diagram przedstawia podstawowe interfejsy API wykorzystywane przy implementacji Lokalizatora Plus. Diagram przedstawia również bazę danych z własnymi danymi o lokalizacji, którą możesz połączyć ze szczegółami miejsca, aby zapewnić użytkownikom najlepszy, jak najpełniejszy zestaw informacji. (Kliknij, aby powiększyć).
Włączam interfejsy API
Aby wdrożyć te metody, musisz włączyć w konsoli Google Cloud te interfejsy API:- Maps JavaScript API
- Interfejs Places API
- Geocoding API
- Interfejs DISTANCE Matrix API
- Directions API,
Sekcje implementacji
Poniżej przedstawiamy praktyki i sposoby dostosowywania, które omówimy w tym temacie.
- Ikona wyboru to główna czynność.
- Ikona gwiazdki to opcjonalne, ale zalecane dostosowanie, które ulepsza rozwiązanie.
| Wyświetlanie lokalizacji na interaktywnej mapie |
Utwórz mapę, która pozwala użytkownikom zobaczyć szczegóły lokalizacji, poruszać się, powiększać i pomniejszać. Możesz też zapoznać się z rozwiązaniem Szybki konstruktor Lokalizator Plus, które pozwala szybko tworzyć mapę, w tym łatwo importować informacje o firmie z profilu firmy, umieszczać linki do rezerwacji spotkań i wdrażać je w Google Cloud Storage. |
|
| Podawanie informacji o miejscu | Gdy użytkownicy znajdą najbliższe lokalizacje na mapie, podaj im konkretne informacje o miejscach, by ułatwić im podjęcie decyzji. | |
| Wyświetlanie lokalizacji pod kątem 45° | Zapewnij użytkownikom lepszy obraz swojej lokalizacji w widoku satelitarnym pod kątem 45 stopni. | |
| Ustalanie lokalizacji użytkownika | Dodaj funkcję pisania w miarę postępów, aby zwiększyć wygodę użytkowników na wszystkich platformach i zwiększyć dokładność adresów dzięki minimalnej liczbie naciśnięć klawiszy. | |
| Pokazuję czas podróży i odległość do najbliższych lokalizacji | Oblicz odległość i czas podróży dla wielu miejsc wylotu i miejsc docelowych, opcjonalnie określając różne środki transportu, takie jak spacer, jazda samochodem lub rowerem. | |
| Pomaganie użytkownikom w umawianiu spotkań |
Zezwalaj użytkownikom na rezerwowanie spotkań z panelu bocznego Szczegóły miejsca. Możesz też zapoznać się z rozwiązaniem Szybki konstruktor Lokalizator Plus, które pozwala szybko tworzyć mapę, w tym łatwo importować informacje o firmie z profilu firmy, umieszczać linki do rezerwacji spotkań i wdrażać je w Google Cloud Storage. |
|
| Wyświetlanie ofert lokalnych | Pokaż użytkownikom, które można kliknąć, oferty lokalne w panelu bocznym Szczegóły miejsca. | |
| Podawanie wskazówek dojazdu | Wyznacz trasę dojazdu z miejsca wylotu do miejsca docelowego, korzystając z różnych form transportu, np. pieszo, samochodem, rowerem i transportem publicznym. | |
| Dostosowywanie mapy | Utwórz niestandardowe znaczniki mapy, aby wyróżnić swoje lokalizacje, i dostosuj mapę do kolorów swojej marki. Wyświetlaj (lub ukrywaj) konkretne ciekawe miejsca na mapie, aby ułatwić użytkownikom poruszanie się po okolicy, i kontroluj ich gęstość, aby nie zaśmiecać mapy. | |
| Uzyskiwanie statystyk użytkowania dzięki statystykom | Skonfiguruj Google Analytics i korzystaj z niego, by uzyskać statystyki dotyczące strategii i implementacji lokalizatora. | |
| Wysyłanie trasy na komórkę | Oprócz wyświetlania wskazówek dojazdu w lokalizatorze możesz też wysyłać wskazówki na telefon użytkownika w celu umożliwienia nawigacji za pomocą Map Google w podróży. | |
| Wyświetlanie Street View, aby ułatwić użytkownikom wizualizację lokalizacji | Udostępnij użytkownikom zdjęcia Street View z widokami 360°, aby ich lepiej zorientować się w lokalizacji i pomóc im szybciej znaleźć Twoją lokalizację. | |
| Określanie lokalizacji użytkownika za pomocą geolokalizacji | Jeśli nie chcesz korzystać z usług lokalizacyjnych na urządzeniu, używaj geolokalizacji do określania lokalizacji użytkownika. | |
| Łączenie niestandardowych danych o lokalizacji z informacjami o miejscu | Połącz własne niestandardowe informacje o lokalizacji ze szczegółami miejsca, aby zapewnić użytkownikom szeroki zestaw danych umożliwiających podejmowanie decyzji. |
Wyświetlanie lokalizacji na interaktywnej mapie
Lokalizator to ważny element interfejsu, który wpływa na wrażenia użytkownika. W niektórych witrynach może jednak brakować nawet prostej mapy, co wymaga od użytkowników opuszczenia witryny lub aplikacji w celu znalezienia pobliskiej lokalizacji. Oznacza to, że korzystanie z nich przez użytkowników, którzy muszą przechodzić między stronami w celu uzyskania potrzebnych informacji, jest nieoptymalne. Zamiast tego możesz ulepszyć tę funkcję, osadzając i dostosowując mapy do swoich aplikacji.
Możesz to zrobić na kilka sposobów: (1) możesz użyć rozwiązania Szybki konstruktor Lokalizator Plus, aby od razu udostępnić tę funkcję, i (2) użyć własnej implementacji Map dynamicznych. W tej sekcji szczegółowo opisujemy te opcje.
Korzystanie z Szybkiego konstruktora Lokalizatora Plus
Do zaimportowania szczegółowych informacji o firmie z profilu firmy możesz użyć rozwiązania Szybki konstruktor Lokalizator Plus. Dlatego teraz zmiana w informacjach o firmie podanych w profilu Twojej firmy będzie widoczna w lokalizatorze sklepów w Twojej witrynie. Mogą one zawierać m.in. godziny otwarcia, informacje kontaktowe, zdjęcia i rodzaje usług. Szybki konstruktor umożliwia szybkie sprawdzenie, jak skonfigurować lokalizacje firmy na mapie, wygenerowanie kodu do wdrożenia lub bezpośrednie wdrożenie w Google Cloud Storage w ciągu kilku minut.
Korzystanie z własnej implementacji Map dynamicznych
| W tym przykładzie użyto: Maps JavaScript API | Dostępny też: Android | iOS |
Aby dodać do strony mapę dynamiczną, czyli mapę, którą użytkownicy mogą przesuwać, powiększać i pomniejszać oraz wyświetlać szczegółowe informacje o różnych lokalizacjach i ciekawych miejscach, wystarczy dodać kilka wierszy kodu.
Najpierw musisz dodać do strony interfejs Maps JavaScript API. Można to zrobić poprzez umieszczenie na stronie HTML linku do poniższego skryptu.
<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 JavaScriptu initMap, która jest uruchamiana podczas wczytywania strony. W adresie URL możesz też określić język lub region mapy, aby mieć pewność, że jest ona sformatowana odpowiednio do kraju, na który kierujesz reklamy. Ustawienie regionu daje też pewność, że aplikacje używane poza Stanami Zjednoczonymi będą działać stronnicze w stosunku do wybranego regionu. Pełną listę obsługiwanych języków i regionów znajdziesz na stronie Informacje o zasięgu Google Maps Platform. Dowiedz się więcej o korzystaniu z parametrów region.
Następnie potrzebujesz kodu 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. Można to zrobić w funkcji skryptu initMap określonej w adresie URL skryptu. W tym skrypcie pokazanym w poniższym przykładzie możesz ustawić lokalizację początkową, typ mapy oraz elementy sterujące, które będą dostępne na mapie dla użytkowników. Zwróć uwagę, że parametr getElementById() odwołuje się do powyższego identyfikatora div „map”.
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 Twoim celem jest zwykle ustawienie lokalizacji początkowej, punktu centralnego lub granic, a także poziomu powiększenia (stopnia powiększenia danej lokalizacji). Większość innych elementów, takich jak dostrajanie elementów sterujących, jest opcjonalna, gdy określasz poziom interakcji z mapą.
Pobieram identyfikatory miejsc
| W tym przykładzie zastosowano: interfejs Places API | Dostępny też: JavaScript |
Być może masz bazę danych z podstawowymi informacjami o lokalizacji, takimi jak jej nazwa, adres i numer telefonu. Aby pobrać informacje o tym miejscu zebrane przez Google Maps Platform, w tym współrzędne geograficzne i informacje przekazywane przez użytkowników, znajdź identyfikator miejsca odpowiadający każdej lokalizacji w Twojej bazie danych. Możesz wywołać punkt końcowy
Znajdź punkt końcowy w narzędziu Places API Place API i wysłać żądanie tylko do pola place_id. Oto przykład prośby o identyfikator 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 zapisać ten identyfikator miejsca w bazie danych i używać go jako efektywnego sposobu wysyłania próśb o informacje o danym miejscu. Poniżej znajdziesz instrukcje korzystania z identyfikatora miejsca do geokodowania, pobierania informacji o miejscu i wysyłania prośby o wskazówki dojazdu do niego.
Geokodowanie lokalizacji
| W tym przykładzie zastosowano: interfejs Geocoding API | Dostępny też: JavaScript |
Jeśli Twoja baza danych lokalizacji zawiera adresy, ale nie współrzędne geograficzne, użyj interfejsu Geocoding API, aby uzyskać szerokość i długość geograficzną tego adresu i umieścić znacznik na mapie. Możesz geokodować adresy po stronie serwera, zapisywać szerokości i długości geograficznej w bazie danych oraz odświeżać dane co najmniej co 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 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_a
Dodawanie lokalizacji do mapy
Następnym krokiem jest dodanie lokalizacji do mapy. Zwykle polega to na dodaniu do mapy znaczników. Istnieją też inne opcje, których można użyć, na przykład warstwy danych.
Gdy masz już długość i szerokość geograficzną swojej lokalizacji, możesz dodać znacznik do mapy w przykład:
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 jednocześnie wyświetlać lokalizację wielu lokalizacji.
W przypadku dużej liczby lokalizacji warto użyć narzędzia do grupowania znaczników dla JavaScript, Androida lub iOS. Oto przykład grupowania znaczników w lokalizatorze magazynów JavaScript na GitHubie.
Podawanie informacji o miejscu
| W tym przykładzie użyto: Maps JavaScript API | Dostępny także: API | Android | iOS |
Możesz udostępnić informacje o miejscu, które użytkownicy muszą znać, zanim odwiedzą jedną z Twoich lokalizacji. Szczegółowe informacje o miejscu, takie jak informacje kontaktowe, godziny pracy, oceny użytkowników, zdjęcia użytkowników i stan tymczasowego zamknięcia, sprawiają, że użytkownicy dokładnie wiedzą, czego mogą oczekiwać, gdy będą odwiedzać daną lokalizację. Po wywołaniu interfejsu Places API możesz filtrować i renderować odpowiedź w oknie informacyjnym, na pasku bocznym lub w dowolny inny sposób.
Aby przesłać prośbę o podanie informacji o miejscu, potrzebujesz identyfikatora miejsca każdej z lokalizacji. Aby dowiedzieć się, jak pobrać identyfikator miejsca dla swojej lokalizacji, zobacz Uzyskiwanie identyfikatorów miejsc.
Rozwiń, aby zobaczyć filmy z prośbą o przesłanie informacji o miejscu:
Sprawdź godziny otwarcia
Sprawdź informacje o zamknięciu drogi
Kontroluj koszty
Poniższy przykład wykorzystuje bibliotekę miejsc Maps JavaScript API do pobrania informacji o miejscach i dodania ich do okna informacyjnego. Ta implementacja korzysta ze strategii oszczędzania kosztów, która polega na wyzwalaniu żądania informacji o miejscu tylko wtedy, gdy użytkownik poprosi o szczegóły, klikając znacznik, zamiast zapobiegawczo pobierać informacje o wszystkich lokalizacjach niezależnie od zainteresowań 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 pod kątem 45°
| W tym przykładzie użyto: Maps JavaScript API | Dostępny też: Android | iOS |
Udostępnienie użytkownikom lokalizacji z lotu ptaka pomaga im lepiej zorientować się w sytuacji, a tym samym łatwiej znaleźć tę lokalizację. Gdy użytkownik wybierze pojedynczą lokalizację, aby zobaczyć więcej szczegółów, możesz ją powiększyć i wyświetlić dostępne zdjęcia satelitarne pod kątem 45°.
Poniższy przykładowy kod ustawia duży poziom powiększenia mapy, jest zgodny z jej typem i kątem pochylenia, dzięki czemu w miarę możliwości wyświetlane są 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);
}
Powrót do oryginalnego widoku mapy
Użytkownicy często chcą się przełączać między widokiem szczegółowym pojedynczej lokalizacji a widokiem podsumowania kilku lokalizacji w pobliżu. Aby to ułatwić, dodaj detektor, który będzie wykrywać, kiedy użytkownik opuszcza widok szczegółów w interakcjach na mapie lub w widoku listy. Na przykład nasłuchiwanie zdarzenia zoom_changed w 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 powoduje zresetowanie mapy do pierwotnego typu i przechylenia.
let originalMapTypeId = google.maps.MapTypeId.ROADMAP;
map.addListener("zoom_changed", () => {
const newZoom = map.getZoom()!;
if (newZoom < 19) {
map.setTilt(0);
map.setMapTypeId(originalMapTypeId);
}
});
Identyfikowanie lokalizacji użytkownika
| W tym przykładzie użyto: Maps JavaScript API | Dostępny też: Android | iOS |
Następnym kluczowym elementem każdego lokalizatora jest identyfikowanie lokalizacji początkowej użytkownika. Domyślnie możesz korzystać z usług lokalizacyjnych na urządzeniach mobilnych i geolokalizacji w przeglądarce, aby prosić użytkownika o pozwolenie na ustawienie punktu początkowego jako jego bieżącej lokalizacji. Użytkownik może jednak odmówić przyznania tych uprawnień lub ustawić inną lokalizację jako punkt początkowy.
Dzisiejsi użytkownicy są przyzwyczajeni do funkcji autouzupełniania pisania z wyprzedzeniem w ogólnodostępnej wersji Map Google. Funkcję tę można zintegrować z dowolną aplikacją za pomocą bibliotek Miejsc w Google Maps Platform na urządzeniach mobilnych i w internecie. Gdy użytkownik wpisze adres, autouzupełnianie wypełnia resztę za pomocą widżetów. Możesz również udostępnić własną funkcję autouzupełniania bezpośrednio w bibliotekach Miejsc.
Aby dodać do witryny bibliotekę autouzupełniania miejsc, wystarczy dodać kilka parametrów zapytania do adresu URL skryptu interfejsu Maps JavaScript API. W poniższym przykładzie dodano element 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 na stronie pole tekstowe, w którym użytkownicy będą mogli wpisywać dane.
<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 geokodów powoduje skonfigurowanie pola do wprowadzania danych tak, aby akceptuje adresy pocztowe, dzielnice, miasta i kody pocztowe, dzięki czemu użytkownicy będą mogli wpisać dowolny poziom szczegółowości, aby opisać ich pochodzenie. Pamiętaj, aby zażądać pola geometry, tak aby odpowiedź zawierała szerokość i długość geograficzną punktu początkowego użytkownika. Służą one do ponownego wyśrodkowania mapy i określenia związku między 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, gdy użytkownik wybierze adres, wykonywana jest funkcja addUserLocation(). Spowoduje to pobranie geometrii dopasowanego wyniku, lokalizacji użytkownika, a następnie przeniesienie mapy do tej lokalizacji i dodanie znacznika.
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 dzięki temu zobaczyć relację między użytkownikiem a dowolnymi lokalizacjami, co pokazano na ilustracji poniżej.
Rozwiń sekcję, aby zobaczyć instrukcje dodawania autouzupełniania miejsc do aplikacji:
Witryna
Aplikacje na Androida
Aplikacje na iOS
Pokazuję czas podróży i odległość do najbliższych lokalizacji
| W tym przykładzie wykorzystano: interfejs DISTANCE Matrix API | Dostępne też: Usługa macierzy odległości, Maps JavaScript API |
Gdy masz już lokalizację użytkownika, możesz porównać ją z Twoimi lokalizacjami. Dzięki usłudze matrycy odległości, Maps JavaScript API pomaga użytkownikom wybrać najwygodniejszą lokalizację na podstawie czasu jazdy lub odległości.
Wyświetlanie lokalizacji w pobliżu użytkownika oznacza, że te lokalizacje są już wypełnione. Jeśli korzystasz z własnej bazy danych lokalizacji, upewnij się, że dane są w formacie, który można wykorzystać na mapie, np. GeoJSON, który został opisany w temacie Warstwa danych.
Standardowym sposobem porządkowania listy lokalizacji jest sortowanie ich według odległości. Odległość jest często obliczana po prostu na podstawie linii prostej między użytkownikiem a lokalizacją, co może być jednak mylące. Linia prosta może przebiegać nad nieprzekraczającą rzeką lub ruchliwymi drogami w czasie, gdy dogodna lokalizacja może być inna. Jest to ważne, gdy wiele lokalizacji znajduje się w odległości kilku kilometrów od siebie.
Usługa macierzy odległości działa na podstawie listy lokalizacji wylotu i miejsca docelowego oraz zwraca nie tylko odległość, ale i czas między nimi. W przypadku użytkownika punktem początkowym jest miejsce, w którym aktualnie się znajduje lub pożądany punkt początkowy, a miejscami docelowymi są lokalizacje. Punkty początkowe i miejsca docelowe można określić w postaci par współrzędnych lub jako adresy. Te ostatnie zostaną dopasowane przy wywołaniu usługi. Maciery odległości możesz używać z szeregiem dodatkowych parametrów, aby wyświetlać wyniki na podstawie obecnych lub przyszłych czasów przejazdów.
W przykładzie poniżej wywołujemy usługę macierzy odległości, która określa pochodzenie użytkownika i lokalizacje. Ten przykład pokazuje odległość od centrum mapy do 3 biur Google w Londynie.
Krótkie informacje na temat kodowania adresów URL: %2C = , (przecinek), %3A = : (dwukropek),
%7C = | (pionowa kreska).
https://maps.googleapis.com/maps/api/distancematrix/json?origins=51.493490%2C-0.097288
&destinations=place_id%3AChIJVSZzVR8FdkgRTyQkxxLQmVU%7Cplace_id%3AChIJVSZzVR8FdkgR-HklrBMO0Hc%7Cplace_id%3AChIJ4abvVDwbdkgRDZVFR7A6Bcc
&units=metric
&mode=driving
&key=YOUR_API_KEY
&solution_channel=GMP_guides_locatorplus_v2_a
Oto 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_a
Rzeczywista odpowiedź z usługi będzie miała postać listy dopasowanych adresów, odległości i czasu trwania podobnego do pokazanego 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"
}
Poniższa ilustracja przedstawia miejsce wyjazdu (czerwony znacznik C) i miejsca docelowe na mapie:
Odległość w linii prostej i na trasie często się różnią, jak pokazano w poniższej tabeli.
| Lokalizacja | Odległość w prostym stylu | Droga w natężeniu 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 |
Lokalizacja B jest najbliższa ze względu na odległość, ale trasa i czas dojazdu są dłuższe, bo do lokalizacji A można dojechać autostradą.
Po przesłaniu tej prośby możesz przetworzyć dopasowanie, aby uporządkować odpowiedzi według czasu trwania jazdy. Przykłady takiej funkcji znajdziesz w codelabs (ćwiczeniach z programowania) w lokalizatorze.
Udostępnianie wskazówek nawigacyjnych
| W tym przykładzie użyto: Usługa wskazówek dojazdu interfejsu Maps JavaScript API | Dostępny także: usługa internetowa Directions API do użytku na Androidzie i iOS – bezpośrednio z aplikacji lub zdalnie przez serwer proxy serwera |
Wyświetlanie użytkownikom wskazówek z poziomu witryny lub aplikacji oznacza, że nie muszą opuścić witryny, co oznacza, że nie będą rozpraszać się innymi stronami ani widzieć konkurencji na mapie. Możesz nawet pokazać emisję dwutlenku węgla w przypadku konkretnego środka transportu i wpływ tej podróży.
Usługa wskazówek dojazdu ma również funkcje umożliwiające przetwarzanie wyników i ich łatwe wyświetlanie na mapie.
Poniżej przedstawiono przykład wyświetlenia panelu wskazówek dojazdu. Więcej informacji o tym przykładzie znajdziesz w artykule o wyświetlaniu wskazówek dotyczących tekstu.
Aby dowiedzieć się więcej o tych funkcjach Map, zapoznaj się z dokumentacją interfejsu Maps JavaScript API lub przejrzyj szczegółowe ćwiczenia z programowania, które pomogą Ci utworzyć lokalizator.
Pomaganie użytkownikom w umawianiu spotkań
Gdy użytkownicy wyświetlają informacje o miejscu w panelu bocznym, istnieje możliwość ich zarezerwowania za pomocą kliknięcia przycisku. Pokazano to na ilustracji poniżej.
Możesz to zrobić na kilka sposobów: (1) za pomocą rozwiązania Szybki konstruktor Lokalizator Plus, aby od razu udostępnić tę funkcję, oraz (2) za pomocą profilu firmy. W tej sekcji szczegółowo opisujemy te opcje.
Korzystanie z Szybkiego konstruktora Lokalizatora Plus
Aby łatwo zaimportować informacje o firmie z profilu firmy, możesz użyć rozwiązania Szybki konstruktor Lokalizator Plus. Po zaimportowaniu do Szybkiego konstruktora możesz włączyć osadzone linki do rezerwacji spotkań (o ile są dostępne) w przypadku Twoich lokalizacji firmy za pomocą usługi Zarezerwuj z Google. Nawet jeśli nie masz profilu firmy powiązanego z kontem Google, nadal możesz korzystać z Szybkiego konstruktora, aby umieszczać linki do rezerwacji w przypadku firm, które zostały już przez Ciebie włączone u zewnętrznych dostawców usług rezerwacji w 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ług rezerwacji . Jeśli interesuje Cię korzystanie z usługi Zarezerwuj z Google, ale obecnie nie współpracujesz z partnerem Zarezerwuj z Google, poproś dostawcę, aby zgłosił chęć korzystania z tej funkcji, wypełniając ten formularz. Zapoznaj się też z naszym dokumentacją, aby dowiedzieć się, od czego zacząć. Jeśli jeszcze nie współpracujesz z dostawcą usług rezerwacji, kwalifikujących się usługodawców znajdziesz w sekcji Rezerwacje w Menedżerze Profilu Firmy.
Korzystanie z Profilu Firmy w celu umożliwienia rezerwowania spotkań
Jeśli 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. Dzięki temu można korzystać ze zintegrowanych funkcji mapowania z firmowymi bazami danych.
Interfejsy Business Profile API umożliwiają tworzenie działań (np. rezerwowanie spotkań), które możesz pobierać i wyświetlać w aplikacjach, ale aby je włączyć, trzeba wykonać kilka ręcznych działań, które opisaliśmy poniżej.
Gdy użytkownicy wyświetlają w panelu bocznym informacje o jednej z Twoich lokalizacji, możesz podać im link umawiania się na spotkanie. Instrukcje znajdziesz w tej sekcji.
-
Utwórz interfejsy API Profilu Firmy
placeActionLinkdla lokalizacji typuAPPOINTMENT,ONLINE_APPOINTMENTlubDINING_RESERVATION.placeActionLinkto obiekt, którego używasz w linku do umawiania spotkań w panelu bocznym. (jeśli masz już utworzony link do działania spotkania, przejdź do następnego kroku). Oto przykładowa odpowiedź z udanej operacji 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ę w profilu firmy powiązaną z identyfikatorem miejsca w Google Maps Platform.
Gdy użytkownicy wyświetlają szczegóły miejsca, widzą szczegóły identyfikatora miejsca w Google Maps Platform. Identyfikator miejsca jest powiązany z identyfikatorem lokalizacji w profilu firmy. Aby pobrać i wyświetlić utworzony link do rezerwacji spotkań, musisz znaleźć identyfikator lokalizacji na podstawie identyfikatora miejsca na mapie. Wykonaj te wywołania interfejsów Business Profile API:
- Wyświetl listę kont projektu.
- Wyświetl listę wszystkich lokalizacji na koncie.
- W lokalizacjach konta
LocationKeyzawiera identyfikator miejsca z Google Maps Platform, który możesz porównać z identyfikatorem miejsca dla wyświetlanej lokalizacji.
-
Dzięki identyfikatorowi lokalizacji możesz uzyskać odpowiedni link do działania. Aby pobrać istniejące spotkanie
placeActionLink, wymień istniejąceplaceActionLinksna tę lokalizację i użyj filtraplaceActionType, aby znaleźć link do spotkania, którego chcesz użyć (APPOINTMENT,ONLINE_APPOINTMENTlubDINING_RESERVATION).Poniższy przykład pokazuje pole APPOINTMENT
placeActionLinkw odpowiedzi z wywołania 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, a zwłaszcza identyfikatorem URI linku do rezerwacji spotkania.
Inne alternatywne sposoby dodawania linków do umawiania spotkań
Jeśli nie zarządzasz profilem firmy lub nie chcesz korzystać z rozwiązania Lokalizator Plus Szybki konstruktor Plus, poszukaj w swojej platformie do rezerwacji spotkań dokumentacji dotyczącej umieszczania widżetu rezerwacji w witrynie lub aplikacji. Inną opcją jest korzystanie z Google Cloud, na przykład Cloud Spanner do zarządzania asortymentem (film).
Wyświetlanie ofert lokalnych
Na panelu bocznym szczegółów miejsca możesz wyświetlać użytkownikom oferty lokalne. Interfejs API Google Moja Firma umożliwia tworzenie i pobieranie „wpisów” (np. ofert lokalnych) powiązanych z Twoimi lokalizacjami. Poniższy rysunek pokazuje przykład oferty lokalnej w panelu bocznym Szczegóły miejsca.
(Schemat architektury w poprzedniej sekcji pokazuje dostępne technologie dodawania ofert do lokalizatora).
Oferty lokalne są powiązane z lokalizacjami, dlatego musisz znaleźć identyfikator lokalizacji z profilu firmy powiązany z identyfikatorem miejsca w Google Maps Platform powiązanym z lokalizacją, którą wyświetlają użytkownicy.
Jeśli masz identyfikator lokalizacji w profilu firmy, możesz pobrać odpowiednią ofertę jako localPost, która będzie wyświetlana w panelu bocznym Szczegóły miejsca. Aby to zrobić:
- Za pomocą interfejsu Google My Business API utwórz dowolne posty z ofertami typu
OFFER, które chcesz wyświetlać. -
Znajdź na mapie lokalizację z profilu firmy lub identyfikator lokalizacji powiązany z identyfikatorem miejsca.
Gdy użytkownicy wyświetlają szczegóły miejsca, widzą szczegóły identyfikatora miejsca w Google Maps Platform. Identyfikator miejsca jest powiązany z identyfikatorem lokalizacji z profilu firmy. Aby pobrać i wyświetlić link do oferty lokalnej dla swojej lokalizacji, musisz znaleźć identyfikator lokalizacji na podstawie identyfikatora miejsca na mapie. Wykonaj te wywołania interfejsów Business Profile API:
- Wyświetl listę kont projektu.
- Wyświetl listę wszystkich lokalizacji na koncie.
- W lokalizacjach konta obiekt
LocationKeyzawiera identyfikator miejsca na mapie, który możesz porównać z identyfikatorem wyświetlanej lokalizacji.
Poniżej znajduje się przykład żądania informacji o lokalizacji w interfejsach API Profilu Firmy:
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 przypadku żądań do 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" } } -
Skoro masz już identyfikator lokalizacji, możesz wybrać odpowiednią ofertę. Aby pobrać istniejącego posta z ofertą, podaj istniejące
localPostsdla lokalizacji i zastosuj filtrtopicTypezOFFER, aby znaleźć treść oferty, której chcesz użyć.Oto przykład żądania wyświetlenia listy aktywnych postów lokalnych w przypadku danej lokalizacji:
https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700/localPosts
Poniższy przykład pokazuje w odpowiedzi
OFFERlocalPost.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 uzupełnij
<div>w panelu bocznym odpowiednimi danymi z obiektulocalPost.
Dostosowywanie mapy
Wygląd i szczegóły mapy możesz zmienić na kilka sposobów. Na przykład możesz:
- Utwórz własne znaczniki, aby zastąpić domyślne pinezki na mapie.
- Zmień kolory elementów mapy, aby odzwierciedlić swoją markę.
- Możesz kontrolować, które atrakcje chcesz wyświetlać (atrakcje, jedzenie, zakwaterowanie itd.) i ich gęstość. Pozwoli Ci to skupić uwagę użytkowników na Twojej lokalizacji i wyróżnić punkty orientacyjne, które pomagają mu dotrzeć do najbliższej lokalizacji.
Tworzenie niestandardowych znaczników mapy
Możesz dostosować znaczniki, zmieniając kolor domyślny (na przykład pokazując, czy dana lokalizacja jest obecnie otwarta) lub zastępując znacznik niestandardowym obrazem, takim jak logo Twojej marki. Okna informacyjne lub wyskakujące okienka mogą zawierać dodatkowe informacje, np. godziny otwarcia, numer telefonu, a nawet zdjęcia. Możesz też tworzyć niestandardowe znaczniki, które są rastrowe, wektorowe, można przeciągać, a nawet są animowane.
Poniżej znajduje się przykładowa mapa z niestandardowymi znacznikami. Kod źródłowy znajdziesz w temacie o znacznikach niestandardowych Maps JavaScript API.
Szczegółowe informacje znajdziesz w dokumentacji znaczników JavaScript (internet), Androida i iOS.
Wybieranie stylu mapy
Google Maps Platform pozwala dostosować styl mapy w sposób, który pomaga użytkownikom znaleźć najbliższą lokalizację i dotrzeć do niej jak najszybciej, a także pomaga wzmocnić wizerunek marki. Możesz na przykład zmieniać kolory mapy, aby pasowały do Twojej marki lub ograniczyć rozpraszanie uwagi na mapie, kontrolując ciekawe miejsca widoczne dla użytkowników. Google Maps Platform udostępnia też wiele szablonów początkowych map, z których niektóre są zoptymalizowane pod kątem różnych branż, takich jak podróże, logistyka, nieruchomości i handel detaliczny.
Style mapy możesz tworzyć i modyfikować na stronie Style mapy w projekcie w konsoli Google Cloud.
Rozwiń, aby zobaczyć animacje tworzenia i określania stylu mapy w konsoli Cloud:
Style map branży
Animacja pokazująca wstępnie zdefiniowane style mapy branżowe, których możesz użyć. Te style stanowią optymalny punkt wyjścia dla każdego rodzaju branży. Na przykład styl mapy dla handlu detalicznego zmniejsza interesujące ich miejsca na mapie, dzięki czemu użytkownicy mogą skupić się na Twoich lokalizacjach oraz na punktach orientacyjnych, dzięki którym można szybko i bezpiecznie dotrzeć do najbliższej lokalizacji.
Ustawienia ciekawych miejsc
Ta animacja ustawia kolor znacznika ciekawych miejsc i zwiększa gęstość ciekawych miejsc na stylu mapy. Im większa gęstość, tym więcej znaczników ciekawych miejsc pojawi się na mapie.
Każdy styl mapy ma własny identyfikator. Po opublikowaniu stylu w Cloud Console odwołuje 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 umieścisz co najmniej 1 map_ids w adresie URL skryptu, interfejs Maps JavaScript API automatycznie udostępni te style, aby przyspieszyć renderowanie mapy, gdy wywołujesz 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 tego elementu: element HTML <div id="map"></div>, w którym mapa pojawi się 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 stosowaniu stylów map w chmurze w JavaScript (w przeglądarce), na Androidzie oraz iOS.
Uzyskiwanie statystyk użytkowania
Dzięki statystykom możesz uzyskać cenne informacje o tym, jak użytkownicy korzystają z Twojego lokalizatora. W tej sekcji znajdziesz wskazówki dotyczące konfigurowania i monitorowania danych w Google Analytics i Analytics w Profilu Firmy, aby śledzić dane, które Cię interesują. W przypadku użytkowników Szybkiego konstruktora Lokalizatora Plus panel statystyk pomaga analizować i generować statystyki. Dzięki anonimowym danym możesz się dowiedzieć, jak użytkownicy korzystają z lokalizatora sklepów.
Aby uzyskać dostęp do tego raportu, otwórz sekcję raportów zaangażowania w Cloud Console. Więcej informacji o tym raporcie znajdziesz w artykule o raportach zaangażowania.
Ze względu na możliwości i elastyczność Google Analytics nie będziemy próbować udostępniać Ci kompleksowych informacji o konfiguracji i korzystaniu z usługi. Zamiast tego wskażemy Ci pełną dokumentację z dodatkowymi informacjami i instrukcjami, a jednocześnie zwrócimy uwagę na najważniejsze kwestie analityczne dotyczące aplikacji lokalizatora.
Konfiguracja usługi Google Analytics
Jeśli korzystasz już z Google Analytics w swojej aplikacji, możesz pominąć tę sekcję.
Poniżej przedstawiono przykład „tagu globalnego”, 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 korzystasz z Menedżera tagów Google, czy dodajesz Google Analytics bezpośrednio do swojej witryny, musisz wiedzieć, jak korzystać z implementacji Google Analytics, aby:
- wywołują interakcje użytkowników, np. kliknięcia, które można mierzyć niezależnie od odsłon strony w witrynie (zdarzenia).
- Nieprzetworzone dane (metrics) w istotnych grupach (wymiary lub wymiary niestandardowe).
Używanie zdarzeń niestandardowych
Oto przykład definiowania zdarzenia niestandardowego w lokalizatorze:
gtag('event', 'location', {
'method': 'address'
});
Ważne jest, aby nazwy event i method były na tyle przejrzyste, by były zrozumiałe dla wszystkich zdarzeń w raportach. Wywołuj je w przypadku konkretnych interakcji, które chcesz zliczać, np. gdy użytkownik wybierze i wykonuje adres z listy autouzupełniania, co pokazano na ilustracji poniżej.
Możesz wysłać do Google Analytics podane niżej wywołanie śledzenia, które używa zdefiniowanych przez Ciebie zdarzeń i metody. (każdy parametr zapytania omówimy w osobnym wierszu, aby ułatwić ich czytanie).
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
Poniższy rysunek pokazuje, jak wywołanie Google Analytics wygląda w widoku inspekcji na karcie Network przeglądarki. (Kliknij, aby powiększyć).
Aby sprawdzić, czy niestandardowe tagi zdarzeń są prawidłowo rejestrowane, otwórz widok „Czas rzeczywisty” w Google Analytics. Na przykład zdarzenie „lokalizacja” skonfigurowane wcześniej na potrzeby autouzupełniania miejsc pojawi się w Google Analytics w sposób przedstawiony na ilustracjach poniżej.
Możesz też monitorować zdarzenia w czasie rzeczywistym za pomocą raportu DebugView, jak widać na ilustracji poniżej. Pamiętaj, że aby zobaczyć pełny raport Zdarzenia w sekcji Zaangażowanie > Zdarzenia w Google Analytics, musisz odczekać 24 godziny.
Za pomocą aplikacji lokalizatora możesz też opracowywać i mierzyć strategie zwiększania ruchu w sklepach stacjonarnych. Na przykład Google Analytics udostępnia w Analytics funkcję Wizyty w sklepie stacjonarnym, która łączy analizę wizyt w sklepie stacjonarnym (zmierzoną w Google Ads) z danymi analitycznymi. Możesz też opracować własne strategie kierowania z aplikacji do lokalizacji, np. oferty online do wykorzystania w lokalizacjach stacjonarnych.
Dane profilu firmy
Oprócz śledzenia w Google Analytics zdarzeń, danych i wymiarów, które Cię interesują, profil firmy ma też własne metrics. Jeśli na przykład dodasz do lokalizatora linki do rezerwacji spotkań i ofert lokalnych, możesz uzyskać dane o tych wyświetleniach i kliknięciach.
Poniższe przykładowe żądanie do interfejsów Business Profile API prosi o wiele typów danych. Do śledzenia kliknięć ofert najtrafniejsze będą dane LOCAL_POST_VIEWS_SEARCH i LOCAL_POST_ACTIONS_CALL_TO_ACTION.
Rozwiń, aby zobaczyć przykładowe żądanie.
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, a w szczególności:
- 1571 wyświetleń lokalizacji w Mapach Google.
- 631 wyświetleń lokalizacji w wyszukiwarce Google.
- 3 prośby o wskazówki dojazdu do lokalizacji.
- 42 kliknięcia oferty w
LOCAL_POST_ACTIONS_CALL_TO_ACTION. - 11 wyświetleń lokalnych postów w wyszukiwarce Google.
Kolejną opcją danych jest użycie opcji Zarezerwuj z Google do tworzenia połączeń z działaniami. Gdy użytkownicy klikają linki działań utworzone w Zarezerwuj z Google, możesz rejestrować te działania w Google Analytics, co pozwoli Ci śledzić konwersje w tej usłudze. Więcej informacji znajdziesz w dokumentacji śledzenia konwersji.
Niezależnie od tego, jakiej strategii danych używasz, pomiary to coś więcej niż tylko sprawdzanie, jak sobie radzisz ze swoimi wskaźnikami KPI. Liczby pomogą Ci również poznać wpływ tych ulepszeń na Twoją firmę. Możesz też porównać dane z Google Analytics w lokalizatorze z danymi Profilu Firmy. Na przykład porównując te dane, możesz sprawdzić, ilu klientów wyznacza wskazówki dojazdu z Twojego lokalizatora i Map Google, a następnie odwiedza Twoje placówki stacjonarne.
Ulepszam Lokalizator Plus
W zależności od potrzeb Twojej firmy lub użytkowników możesz jeszcze bardziej polepszyć wrażenia użytkowników.
Wysyłam trasę na urządzenie mobilne
Aby jeszcze bardziej ułatwić użytkownikom dotarcie do danej lokalizacji, możesz wysłać im SMS-a lub e-maila z linkiem ze wskazówkami dojazdu. Po jej kliknięciu na telefonie zostaną uruchomione Mapy Google (jeśli jest zainstalowana) lub strona maps.google.com wczyta się w przeglądarce urządzenia. Obie opcje pozwalają użytkownikowi skorzystać z nawigacji zakręt po zakręcie, w tym wskazówek głosowych, aby dotrzeć do celu.
Użyj
adresów URL Map, by utworzyć adres URL wskazówek dojazdu jak poniżej z zakodowaną w adresie URL nazwą miejsca jako parametrem destination i identyfikatorem miejsca jako parametrem destination_place_id. Tworzenie adresów URL Map Google i korzystanie z nich jest bezpłatne, więc nie musisz uwzględniać klucza interfejsu API w adresie URL.
https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU
Opcjonalnie możesz podać parametr zapytania origin w tym samym formacie adresu co miejsce docelowe. Jeśli je pominiesz, wskazówki będą rozpoczynać się od bieżącej lokalizacji użytkownika, która może różnić się od miejsca, 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 pozwalają uruchamiać wskazówki przy włączonej nawigacji.
Ten klikalny link, który rozszerza przykładowy adres URL powyżej, ustawia origin jako stadion piłkarski Londynu, a korzysta z travelmode=transit do podania wskazówek dojazdu transportem publicznym do miejsca docelowego.
Obecnie do wysłania SMS-a lub e-maila zawierającego ten URL zalecamy skorzystanie z aplikacji innej firmy, takiej jak twilio. Jeśli używasz App Engine, możesz wysyłać SMS-y lub e-maile za pomocą usług innych firm. Więcej informacji znajdziesz w artykule o wysyłaniu wiadomości przy użyciu usług innych firm.
wyświetlanie Street View, aby ułatwić użytkownikom wizualizację lokalizacji.
W wielu miejscach na świecie Street View umożliwia wyświetlenie lokalizacji z zewnątrz, dzięki czemu użytkownicy mogą zobaczyć ją z zewnątrz, zanim dotrą na miejsce. Street View możesz udostępniać w formie interaktywnej (internetowej) lub statycznej (API) w zależności od tego, czy użytkownicy mogą „rozglądać się” po okolicy w 360 stopniach. Street View jest też dostępne na Androida i iOS.
Określanie lokalizacji użytkownika za pomocą geolokalizacji
W większości przypadków możesz określić lokalizację użytkownika, korzystając z usług lokalizacyjnych wbudowanych w urządzenia lub przeglądarki. Podajemy przykład wykorzystania w przeglądarce funkcji geolokalizacji w HTML5 do wyświetlenia lokalizacji geograficznej użytkownika lub urządzenia na mapie Google. Zawarliśmy też dokumentację na temat wysyłania próśb o przyznanie uprawnień i uzyskiwania lokalizacji w Androidzie oraz iOS. W pewnych sytuacjach może się jednak przydać alternatywna wyszukiwarka lokalizacji – na przykład wtedy, gdy usługi lokalizacyjne urządzenia są wyłączone lub masz obawy, że lokalizacja urządzenia została podszywana.
Geolocation API to interfejs API po stronie serwera, który zwraca lokalizację i promień dokładności na podstawie wykrytych przez klienta informacji o stacjach bazowych i węzłach Wi-Fi. Możesz użyć geolokalizacji jako mechanizmu zapasowego do określania lokalizacji użytkownika lub sprawdzania lokalizacji zgłoszonej przez urządzenie.
Łączenie niestandardowych danych o lokalizacji z informacjami o miejscu
W poprzedniej sekcji Podawanie informacji o miejscu omówiliśmy korzystanie ze szczegółowych informacji o miejscu, ponieważ dostarczają one użytkownikom szczegółowych informacji o lokalizacji, np. godzin otwarcia, zdjęć i opinii.
Warto znać koszty różnych pól danych w szczegółach miejsca, które są podzielone na kategorie Podstawowe, Dane kontaktowe i Klimat. Jedną ze strategii, która pozwala zarządzać kosztami, jest połączenie informacji, które już masz o lokalizacjach, z aktualnymi informacjami (zwykle danymi podstawowymi i kontaktowymi) z Map Google, takimi jak tymczasowe zamknięcie, godziny otwarcia oraz oceny, zdjęcia i opinie użytkowników. Jeśli dysponujesz już danymi kontaktowymi swoich lokalizacji, nie musisz prosić o te pola ze szczegółów miejsca i możesz ograniczyć pobieranie tylko pól podstawowych lub danych atmosferycznych w zależności od tego, co chcesz wyświetlać.
Możesz mieć własne dane o miejscach, które możesz uzupełnić lub wykorzystać zamiast informacji o miejscach. Ćwiczenie z programowania dotyczące lokalizatora pełnego stosu zawiera przykład użycia GeoJSON z bazą danych do przechowywania i pobierania szczegółów lokalizacji.