Lokalizator Plus – przewodnik po implementacji

Przegląd

web iOS API

Usługa Google Maps Platform jest dostępna w internecie (JS, TS), Android i iOS. Oferuje też interfejsy API usług internetowych do pobierania informacji o miejscach, wskazówkach dojazdu i odległościach. Przykłady w tym przewodniku dotyczą tylko jednej platformy, ale udostępniamy linki do dokumentacji na jej temat.

Utwórz je teraz.

Szybki konstruktor w Google Cloud Console pozwala szybko utworzyć lokalizator, w tym importować wizytówki z Profilu Firmy i automatycznie umieszczać linki do rezerwacji od dostawców zewnętrznych. Interaktywny interfejs pozwala wygenerować kod i wdrożyć go w chmurze w ciągu kilku minut.

Użytkownicy chcą wyszukać online produkty i usługi, a następnie znaleźć najlepszą i najdogodniejszą lokalizację, umówić się na spotkanie lub odebrać zamówienie. Klienci chcą jak najszybciej dotrzeć do Twojej lokalizacji. Chcesz zadbać o to, aby były one bardziej atrakcyjne online, co zwiększy liczbę wizyt w Twojej firmie, sprawi, że użytkownicy będą bardziej zadowoleni, a także ograniczy liczbę połączeń do zespołu pomocy. Chcesz także zmierzyć skuteczność lokalizatora, aby określić, czy klienci mogą znaleźć Twoją lokalizację, i dowiedzieć się, w jakich obszarach warto je ulepszyć.

Locator Plus – wskazówki i wskazówki dotyczące dostosowywania, które znajdziesz w tym artykule, to zalecane połączenie interfejsów API Google Maps Platform, które zapewnia użytkownikom doskonałe wrażenia. Dzięki temu możesz pomagać użytkownikom w znajdowaniu lokalizacji na mapie, wyświetlać szczegółowe informacje potrzebne do podejmowania decyzji i wyznaczać trasy dojazdu samochodem, rowerem, pieszo lub transportem publicznym.

W przypadku użytkowników korzystających z narzędzia lokalizator Plus panel statystyk pozwala analizować i generować statystyki na podstawie danych, dzięki czemu zyskujesz jasny obraz zaangażowania klientów w lokalizację sklepu. Aby uzyskać dostęp do tego raportu, przejdź do sekcji Raporty zaangażowania. Szczegółowe informacje o tym raporcie znajdziesz w artykule Raporty zaangażowania.

Poniższy diagram przedstawia podstawowe interfejsy API powiązane z implementacją Locator Plus. Przedstawia on też bazę danych własnych danych o lokalizacji, które możesz połączyć ze szczegółami miejsca, aby zapewnić użytkownikom jak najdokładniejsze i kompletne informacje. (Kliknij, aby powiększyć).

Po lewej stronie diagramu przeglądarka wyświetla mapę z wyskakującym oknem szczegółów miejsca.
              Z prawej strony diagramu: lista interfejsów API, które oferują różne funkcje: Maps JavaScript API do wizualizacji i lokalizowania lokalizacji, styl mapy, znaczników map, niestandardowych widoków Street View i wyświetlania tras. Umieść autouzupełnianie w celu wypełnienia adresu i zaplanowania działania z wyprzedzeniem. interfejsy API miejsc i geolokalizacji do lokalizacji adresu. Interfejs DISTANCE Matrix API umożliwia określanie pozycji lokalizacji według odległości, czasu i środka transportu. Wskazówki dojazdu API, aby wyświetlać trasę na podstawie czasu podróży i trybu podróży.
              W środku pośrodku ikony magazynu danych reprezentującej ikonę niestandardowych danych lokalizacji, która jest skierowana w górę, do ikony serwera WWW z podwójną strzałką wskazującą na odczyt i zapis danych między serwerem WWW a magazynem danych. strzałki między przeglądarką a interfejsami API przechodzą przez serwer WWW jako pośrednik.

Włączam interfejsy API

Aby wdrożyć te metody, musisz włączyć te interfejsy API w Google Cloud Console: Więcej informacji o konfigurowaniu znajdziesz w artykule Pierwsze kroki z Google Maps Platform.

Sekcje implementacji

Poniżej przedstawiamy praktyki i dostosowania, które omówimy.

  • Ikona wyboru to podstawowa metoda.
  • Ikona gwiazdki to opcjonalna, ale dostosowana opcja, która wzbogaci to rozwiązanie.
Wyświetlanie lokalizacji na interaktywnej mapie

Utwórz mapę, która pozwala użytkownikom zobaczyć szczegóły lokalizacji, poruszać się po niej oraz powiększać ją i pomniejszać.

Możesz też skorzystać z rozwiązania Quick Builder Locator Plus, aby szybko utworzyć mapę, w tym z łatwością zaimportować dane firmy z Profilu Firmy, umieszczać linki do rezerwacji spotkań i wdrażać w Google Cloud Storage.

Podawanie szczegółów miejsca Gdy użytkownicy znajdą najbliższe lokalizacje na mapie, podaj im więcej informacji o tym miejscu, aby ułatwić im podjęcie decyzji.
Wyświetlanie lokalizacji w widoku 45° Zapewnij użytkownikom lepszy obraz Twojej lokalizacji w widoku satelitarnym pod kątem 45 stopni.
Lokalizacja użytkownika Dodaj funkcję podczas pisania, aby zwiększyć wygodę użytkowników na wszystkich platformach i poprawić dokładność adresów dzięki minimalnej liczbie naciśnięć klawiszy.
Pokazuję czas podróży i odległość do najbliższych lokalizacji Obliczaj odległość i czas podróży dla wielu punktów początkowych i miejsc docelowych, opcjonalnie określając różne formy transportu, takie jak spacer, jazda samochodem lub rowerem.
Łatwiejsze rezerwowanie spotkań

Daj użytkownikom możliwość rezerwacji spotkania w panelu bocznym szczegółów miejsca.

Możesz też skorzystać z rozwiązania Quick Builder Locator Plus, aby szybko utworzyć mapę, w tym z łatwością zaimportować dane firmy z Profilu Firmy, umieszczać linki do rezerwacji spotkań i wdrażać w Google Cloud Storage.

Wyświetlanie ofert lokalnych Pokaż użytkownikom lokalne oferty, które można kliknąć, w panelu bocznym szczegółów miejsca.
Wyznaczanie trasy nawigacji Uzyskaj wskazówki dojazdu z punktu początkowego do miejsca docelowego przy użyciu różnych form transportu, takich jak spacer, jazda samochodem, rowerem lub transportem publicznym.
Dostosowywanie mapy Utwórz niestandardowe znaczniki mapy, aby wyróżnić swoje lokalizacje, i dostosować mapę tak, aby pasowała do kolorów Twojej marki. Wyświetlaj (lub ukrywaj) określone miejsca
Uzyskiwanie statystyk dotyczących wykorzystania Skonfiguruj i użyj Google Analytics, aby uzyskać statystyki dotyczące Twojej strategii lokalizacji i implementacji.
Wysyłanie trasy na urządzenie mobilne Oprócz wyświetlania wskazówek dojazdu w lokalizatorze możesz też na telefonie korzystać z nawigacji w Mapach Google, gdziekolwiek jesteś.
Wyświetlanie Street View w celu ułatwienia użytkownikom wizualizacji lokalizacji Udostępniaj użytkownikom zdjęcia Street View w technologii 360°, aby móc je orientacji i szybciej znajdować w nich swoje położenie.
Określanie lokalizacji użytkownika za pomocą geolokalizacji Jeśli nie chcesz polegać na usługach lokalizacyjnych na urządzeniu, użyj geolokalizacji, aby zidentyfikować lokalizację użytkownika.
Łączenie danych niestandardowych z informacjami o miejscu Połącz własne informacje o lokalizacji z informacjami o miejscu, aby udostępnić użytkownikom obszerny zestaw danych potrzebnych do podejmowania decyzji.

Pokazywanie lokalizacji na interaktywnej mapie

Lokalizator jest ważnym elementem wrażeń użytkownika. Niektóre witryny mogą jednak nie mieć nawet prostej mapy, przez co użytkownicy muszą opuścić witrynę lub aplikację, aby znaleźć miejsce w pobliżu. Oznacza to, że u użytkowników, którzy chcą znaleźć potrzebne informacje, muszą przejść z jednej strony na drugą. Zamiast tego możesz poprawić ten komfort, umieszczając i dostosowując mapy w swoich aplikacjach.

Możesz to zrobić na kilka sposobów: (1) za pomocą rozwiązania Quick Builder Lotoor Plus, aby wdrożyć tę funkcję, i (2) za pomocą własnej implementacji map dynamicznych. W tej sekcji opisano szczegółowo te opcje.

Korzystanie z Szybkich Lokalizatorów Plus

Aby zaimportować dane firmy z profilu swojej firmy, możesz użyć rozwiązania Quick Builder Locator Plus. Dlatego zmiana informacji o firmie w profilu będzie widoczna w lokalizacją sklepu w Twojej witrynie. Te zmiany mogą obejmować godziny otwarcia, informacje kontaktowe, zdjęcia, opcje usług i inne informacje. Szybki konstruktor umożliwia szybkie zbadanie lokalizacji firmy na mapie, wygenerowanie kodu lub wdrożenie bezpośrednio do Google Cloud Storage w ciągu kilku minut.

Integracja z Profilem Firmy
Łatwo zarządzaj lokalizacjami w Locator Plus, importując informacje o firmach z profilu firmy

Wdróż w Cloud
Łatwo wdrażaj rozwiązanie Locator Plus za pomocą Google Cloud

Używanie własnej implementacji map dynamicznych

W tym przykładzie użyto: Maps API API Dostępna też: Android | iOS

Mapę dynamiczną (czyli mapę, którą użytkownicy mogą przesuwać i pomniejszać, oraz wyświetlać na niej różne lokalizacje i ciekawe miejsca) można za pomocą kilku wierszy kodu dodać na stronie.

Najpierw musisz dołączyć do strony interfejs Maps JavaScript API. W tym celu należy połączyć poniższy skrypt na stronie 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 podczas wczytywania strony. W adresie URL możesz też zdefiniować język lub region mapy, aby mieć pewność, że będzie on sformatowany w odpowiedni sposób odpowiedni dla kraju docelowego. Ustawienie regionu powoduje też stronniczność działania aplikacji używanych poza Stanami Zjednoczonymi w odniesieniu do ustawionego regionu. Aby wyświetlić pełną listę obsługiwanych języków i regionów, zapoznaj się ze szczegółowym opisem pokrycia w Google Maps Platform i dowiedz się więcej o wykorzystaniu parametrówregion.

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>

Kolejnym krokiem jest ustawienie podstawowych funkcji mapy. Służy do tego funkcja skryptu initMap określona w adresie URL skryptu. W skrypcie przedstawionym w poniższym przykładzie możesz ustawić lokalizację początkową, typ mapy i opcje dostępne na mapie dla Twoich użytkowników. Zwróć uwagę, że getElementById() odwołuje 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
  });
}

Lokalizator zazwyczaj zakłada początkową lokalizację, środek lub granice oraz poziom powiększenia (powiększenie mapy w tym miejscu). Większość innych elementów, takich jak dostrajanie elementów sterujących, jest opcjonalna przy określeniu poziomu interakcji z mapą.

Pobieram identyfikatory miejsc

W tym przykładzie użyto: interfejsu Places API Dostępna również: JavaScript

Możesz mieć bazę danych lokalizacji z podstawowymi informacjami takimi jak nazwa, adres i numer telefonu. Aby pobrać informacje o tym miejscu do Google Maps Platform, w tym współrzędne geograficzne i informacje przesyłane przez użytkowników, znajdź identyfikator miejsca odpowiadający każdej lokalizacji w bazie danych. Możesz wywołać punkt końcowy Znajdź miejsce w interfejsie Places API wyszukiwania i poprosić tylko o pole place_id. Oto przykład prośby o podanie identyfikatora miejsca 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 w bazie danych i używać go jako skutecznego sposobu uzyskiwania informacji o miejscu. Poniżej znajdziesz instrukcje używania identyfikatora miejsca do geokodowania, pobierania szczegółów miejsca oraz uzyskiwania wskazówek dojazdu do tego miejsca.

Geokodowanie lokalizacji

W tym przykładzie użyto: API Geocoding Dostępna również: JavaScript

Jeśli baza danych lokalizacji zawiera adresy, ale nie współrzędne, użyj interfejsu Geocoding API, aby uzyskać szerokość i długość geograficzną tego adresu w celu umieszczenia znacznika na mapie. Po stronie serwera możesz przetworzyć dane geograficzne, zapisać szerokość i długość geograficzną w bazie danych i odświeżać je co najmniej 30 dni.

Oto przykład użycia interfejsu Geocoding API, który pozwala uzyskać szerokość i długość geograficzną identyfikatora miejsca zwróconego w biurze Google London:

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. Aby to zrobić, dodaj do mapy znaczniki, ale możesz też użyć innych opcji, np. warstw danych.

Gdy dodasz szerokość i długość geograficzną lokalizacji, możesz dodać do mapy znacznik:

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);

Dzięki nim możesz zobaczyć lokalizację wielu lokalizacji jednocześnie.

Jeśli masz dużą liczbę lokalizacji, możesz użyć narzędzia do grupowania znaczników JavaScript, Androida lub iOS. Oto przykład grupowania znaczników w lokalizatorze sklepów JavaScript w GitHubie.

Podawanie szczegółów miejsca

W tym przykładzie użyto API JavaScript Maps. Dostępna też: API | Android | iOS

Możesz udostępnić informacje o miejscu, które muszą wiedzieć użytkownicy, zanim odwiedzą jedną z Twoich lokalizacji. Dzięki szczegółowym informacjom o miejscu, takim jak informacje kontaktowe, godziny otwarcia, oceny użytkowników, zdjęcia użytkowników i tymczasowy stan zamknięcia, użytkownicy wiedzą, czego mogą oczekiwać podczas Twojej lokalizacji. Po wywołaniu interfejsu Places API możesz filtrować i renderować odpowiedź w oknie informacyjnym, na pasku bocznym w internecie lub w inny sposób.

Aby przesłać prośbę o szczegóły miejsca, musisz mieć identyfikator miejsca w każdej lokalizacji. Aby dowiedzieć się, jak pobrać identyfikator miejsca, przeczytaj sekcję Uzyskiwanie identyfikatorów miejsc.

Rozwiń, aby wyświetlić filmy z prośbą o szczegóły miejsca:

Zapytaj o godziny otwarcia

Sprawdź zamknięcia

Koszty kontrolne

Poniższy przykład pokazuje wykorzystanie interfejsu Places API, Maps JavaScript API do pobrania szczegółów miejsca i dodania ich do obiektu InfoWindow. Implementacja ta pozwala kosztować wywołanie szczegółów miejsca tylko wtedy, gdy użytkownik chce wyświetlić szczegóły, klikając znacznik, zamiast zapobiegawczo pobierając informacje o wszystkich lokalizacjach, niezależnie od zainteresowań użytkowników.

     
  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 w widoku 45°

W tym przykładzie użyto API JavaScript Maps. Dostępna też: Android | iOS

Dzięki temu użytkownicy mają lepszy wgląd w Twoją lokalizację, co ułatwia im znalezienie widoku. Jeśli użytkownik wybierze pojedynczą lokalizację, aby zobaczyć więcej szczegółów, możesz ją powiększyć, aby wyświetlić dostępne zdjęcia satelitarne pod kątem 45°.

Poniższy przykładowy kod ustawia na mapie wysoki poziom powiększenia, zgodny typ mapy i kąt pochylenia, dzięki czemu zdjęcia pod kątem 45° są dostępne. Szczegółowe informacje o dostępności zdjęć pod kątem 45° znajdziesz w dokumentacji.

function seeDetail(location) {
  map.setCenter(location);
  map.setZoom(19);
  map.setMapTypeId(google.maps.MapTypeId.HYBRID);
  map.setTilt(45);
}

Przywracanie oryginalnego widoku mapy

Użytkownicy często chcą przełączać się między widokiem szczegółowym pojedynczej lokalizacji a widokiem podsumowania kilku lokalizacji w pobliżu. Aby to ułatwić, dodaj detektor, który będzie wykrywać, kiedy użytkownik opuści widok szczegółów w interakcjach z mapą lub w widoku listy. Na przykład nasłuchiwanie zdarzenia zoom_changed w obiekcie map wskazuje, że użytkownik ręcznie pomniejszył obraz w widoku szczegółowym lub wywołał inną funkcję, która zaktualizowała poziom powiększenia. W tym przykładzie pomniejszenie mapy spowoduje przywrócenie jej pierwotnego typu i pochylenie.

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żywamy: interfejsu API JavaScript Map Google. Dostępna też: Android | iOS

Następnym komponentem kluczowym w każdym lokalizatorze jest lokalizacja początkowa użytkownika. Domyślnie możesz użyć usług lokalizacji dla urządzeń mobilnych i geolokalizacji w przeglądarce, aby poprosić użytkownika o przyznanie uprawnień jako punktu początkowego jako lokalizacji użytkownika. Użytkownik może jednak odmówić przyznania tych uprawnień lub ustawić inną lokalizację jako punkt początkowy.

Obecnie użytkownicy są przyzwyczajeni do autouzupełniania z typem autouzupełniania w Mapach Google dla klientów indywidualnych. Tę funkcję możesz zintegrować z dowolną aplikacją za pomocą bibliotek Miejsc Google Maps Platform na urządzeniach mobilnych i w internecie. Gdy użytkownik poda adres, autouzupełnianie wypełni resztę, korzystając z widżetów. Możesz też bezpośrednio korzystać z funkcji autouzupełniania przy użyciu bibliotek Miejsc.

Dodanie biblioteki autouzupełniania miejsc do witryny polega na dodaniu kilku parametrów zapytania do adresu URL skryptu interfejsu Maps JavaScript API. W poniższym 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, aby móc je wpisywać.

<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 polem tekstowym nazwanym. Ograniczenie podpowiedzi autouzupełniania do typów kodów geograficznych umożliwia skonfigurowanie pola wejściowego tak, aby akceptowało adresy, dzielnice, miasta i kody pocztowe w taki sposób, aby użytkownicy mogli podawać każdy poziom szczegółowości opisujący ich źródło. Pamiętaj o wystąpieniu pola geometry, aby odpowiedź zawierała szerokość i długość geograficzną źródła użytkownika. Na podstawie współrzędnych mapy wyśrodkusz mapę i wskazujesz powiązania lokalizacji z 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(). Spowoduje to przeniesienie 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 konkretnymi lokalizacjami, jak widać na tym obrazie.

Rozwiń tę sekcję, aby zobaczyć przewodniki dotyczące dodawania autouzupełniania miejsc do aplikacji:

Strona

Aplikacje na Androida

Aplikacje na iOS

Pokazuję czas podróży i odległość do najbliższych lokalizacji

W tym przykładzie użytointerfejsu DISTANCE Matrix API Dostępna również: Usługa macierzy odległości, Maps JavaScript API

Gdy już ustalisz lokalizację użytkownika, możesz go porównać do tej lokalizacji. W tym celu interfejs Maps JavaScript API pomaga użytkownikom wybrać najdogodniejszą dla nich lokalizację, kierując się czasem jazdy lub odległością.

Jeśli wyświetlasz lokalizacje w pobliżu użytkownika, oznacza to, że masz już wypełnione lokalizacje. Jeśli korzystasz z własnej bazy danych lokalizacji, upewnij się, że dane są w formacie możliwym do użycia na mapie, np. GeoJSON, opisanym w temacie Warstwa danych.

Standardowym sposobem uporządkowania listy lokalizacji jest sortowanie według odległości. Odległość ta jest często obliczana przez użycie prostej linii od użytkownika do lokalizacji, ale może to być mylące. Prosta linia może przebiegać przez nieprzepływającą rzekę lub ruchliwe drogi w czasie, gdy inna lokalizacja jest wygodniejsza. Jest to ważne, gdy kilka lokalizacji znajduje się w promieniu kilku kilometrów.

Usługa macierzy odległości wykorzystuje listę punktów początkowych i docelowych i zwraca nie tylko dystans między podróżami, ale i czas między nimi. W przypadku użytkownika źródłem jest miejsce, w którym obecnie się znajdują lub są początkiem miejsca docelowego, a miejscami docelowymi są lokalizacje docelowe. Źródła i miejsca docelowe można podawać jako pary współrzędnych lub adresy. Te ostatnie będą dopasowywane podczas wywoływania usługi. Możesz użyć macierzy dystansu, aby wyświetlić wyniki na podstawie obecnych lub przyszłych czasów jazdy.

Poniższy przykład wywołuje usługę macierzy odległości, wskazując źródło i lokalizacje użytkownika. Ten przykład pokazuje odległość od centrum mapy do 3 biur Google w Londynie.

Krótkie informacje o kodowaniu adresów URL: %2C = , (przecinek), %3A : : (dwukropek) oraz %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_a

Oto wersję, 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ź usługi to lista dopasowanych adresów, odległości i czasu trwania, podobnie jak w tym 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 punkt początkowy (czerwony znacznik C) oraz miejsca docelowe na mapie:

Obraz przedstawia mapę miasta, w której użytkownik jest oznaczony czerwonym znacznikiem, a lokalizacja wokół niego zielona.

Odległość od linii prostej i trasy często są różne, co pokazano w tabeli poniżej.

lokalizacja, Prosty dystans Droga / ruch uliczny
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

Mimo że lokalizacja B jest najbliższa odległości, trasa i czas dotarcia na miejsce są dłuższe, bo lokalizacja A jest dostępna przez autostradę.

Po przesłaniu tego żądania możesz przetworzyć dopasowanie, aby posortować odpowiedzi według czasu jazdy. Przykładowe funkcje znajdziesz w ćwiczeniach z programowania lokalizatora.

W tym przykładzie używamy: usługi wyznaczania trasy w interfejsie Maps JavaScript API Dostępna również: usługa internetowa Route API do użytku w systemie Android i iOS, bezpośrednio z aplikacji lub zdalnie przez serwer proxy serwera

Wyświetlanie użytkownikom wskazówek dojazdu z poziomu witryny lub aplikacji oznacza, że nie muszą oni jej opuszczać. Oznacza to, że użytkownicy nie będą rozpraszani na innych stronach ani nie będą brać pod uwagę konkurentów. Możesz też wyświetlić emisję dwutlenku węgla związaną z konkretnym środkiem transportu oraz wpływ tej podróży.

Usługa wyznaczania tras ma również funkcje, które umożliwiają przetwarzanie wyników i łatwe wyświetlanie ich na mapie.

Poniżej znajdziesz przykład wyświetlania panelu trasy. Więcej informacji o przykładzie znajdziesz w sekcji poświęconej wyświetlaniu wskazówek tekstowych.

Więcej informacji o tych funkcjach Map znajdziesz w dokumentacji interfejsu Maps JavaScript API lub w ćwiczeniach z programowania, które pomogą Ci utworzyć lokalizator.

Pomaganie użytkownikom w umawianiu spotkań

Gdy użytkownicy widzą w panelu bocznym szczegóły Twojej lokalizacji, możesz wygodnie rezerwować spotkanie jednym kliknięciem, co ilustruje na ilustracji.

Możesz to zrobić na kilka sposobów: (1) za pomocą szybkiego konstruktora lokalizatora Plus, aby zacząć korzystać z tej funkcji, albo (2) za pomocą Profilu Firmy. W tej sekcji opisano szczegółowo te opcje.

Korzystanie z Szybkich Lokalizatorów Plus

Możesz użyć rozwiązania Quick Builder Locator Plus, aby łatwo zaimportować dane firmy z profilu firmy. Po zaimportowaniu danych do Szybkiego konstruktora możesz włączyć w swoich witrynach linki do rezerwacji spotkań (jeśli są dostępne) w ramach 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ż udostępnione przez zewnętrznych dostawców rezerwacji za pomocą funkcji Zarezerwuj z Google*.

Zarezerwuj z Google
Dodaj do rezerwacji informacje o możliwościach dokonywania rezerwacji

*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ę Zarezerwuj z Google, ale obecnie nie współpracujesz z partnerem usługi Zarezerwuj z Google, poinformuj swojego dostawcę, wypełniając ten formularz, i zapoznaj się z naszą dokumentacją, aby dowiedzieć się, jak to zrobić. Jeśli nie współpracujesz jeszcze z dostawcą usług rezerwacji, możesz sprawdzić listę kwalifikujących się usługodawców w sekcji Rezerwacje w Menedżerze Profilu Firmy.

Używanie usługi Profil Firmy do włączania rezerwacji spotkań

Jeśli zarządzasz obecnością firmy online w Profilu Firmy, tworzone przez Ciebie lokalizacje firmy są powiązane z identyfikatorami miejsc Google Maps Platform, dzięki czemu możliwe jest zintegrowanie funkcji mapowania z firmowymi bazami danych.

Interfejsy Business Profile API umożliwiają tworzenie działań, takich jak rezerwowanie spotkań, które można pobierać i wyświetlać w aplikacjach, ale wymaga to ręcznego działania zgodnie z opisem poniżej.

Możesz wyświetlić szczegółowe informacje o jednej z Twoich lokalizacji w panelu bocznym, aby udostępnić im link do Twojego spotkania. Z tej sekcji dowiesz się, jak to zrobić.

  1. Utwórz interfejsy API Profilu Firmy placeActionLink dla lokalizacji typu APPOINTMENT, ONLINE_APPOINTMENT lub DINING_RESERVATION. placeActionLink będzie obiektem używanym w linku do spotkania w panelu bocznym. (Jeśli masz już utworzony link do działania związanego ze spotkaniem, przejdź do następnego kroku). Oto przykładowa odpowiedź na udaną operację placeActionLinks.create POST:

    {
        "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc",
        "providerType": "MERCHANT",
        "isEditable": true,
        "uri": "https://example.com/reservation-uri",
        "placeActionType": "DINING_RESERVATION",
        "createTime": "2021-05-01T01:17:41.609161Z",
        "updateTime": "2021-05-01T01:17:41.609161Z"
    }
    
  2. Odszukaj lokalizację profilu firmy powiązaną z identyfikatorem miejsca podanym w Google Maps Platform.

    Po wyświetleniu szczegółów miejsca użytkownicy wyświetlają szczegóły identyfikatora miejsca w Google Maps Platform. Identyfikator miejsca jest powiązany z identyfikatorem lokalizacji w profilu firmy, dlatego musisz go znaleźć na podstawie identyfikatora miejsca na mapie, aby pobrać i wyświetlić utworzony link do rezerwacji spotkań. Wykonaj te wywołania interfejsów Business Profile API:

    1. Wyświetl listę kont w projekcie.
    2. Wyświetl wszystkie lokalizacje na koncie.
    3. W lokalizacjach konta LocationKey zawiera identyfikator miejsca Google Maps Platform, który możesz porównać z identyfikatorem miejsca do wyświetlania.
  3. Dzięki identyfikatorowi lokalizacji możesz uzyskać link do działania. Aby pobrać istniejące spotkanie placeActionLink, wyświetl listę placeActionLinks lokalizacji i ustaw filtr placeActionType, aby znaleźć link do spotkania, którego chcesz użyć (APPOINTMENT,ONLINE_APPOINTMENT lub DINING_RESERVATION).

    Poniższy przykład pokazuje TERMIN APLIKACJI placeActionLink w 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"
           }
       ]
     }
  4. Utwórz <div> w panelu bocznym i dodaj do niego odpowiednie dane z obiektu placeActionLink, zwłaszcza identyfikatora URI linku do rezerwacji spotkań.

Inne sposoby dodawania linków do spotkań

Jeśli nie zarządzasz profilem firmy lub nie chcesz korzystać z rozwiązania Quick Builder Lotoor Plus, zapoznaj się z dokumentacją usługi rezerwacji spotkań, która zawiera dokumentację dotyczącą umieszczania widżetu rezerwacji w witrynie lub aplikacji. Inną opcją jest używanie Google Cloud, np. Cloud Spanner do zarządzania zasobami reklamowymi (film).

Wyświetlanie ofert lokalnych

W panelu bocznym szczegółów miejsca możesz zobaczyć oferty lokalne, które użytkownicy będą mogli kliknąć. Interfejs API Google Moja Firma umożliwia tworzenie i pobieranie &wpisów (na przykład ofert lokalnych), które są powiązane z Twoimi lokalizacjami. Poniższy przykład pokazuje przykład oferty lokalnej w panelu bocznym szczegółów miejsca.

Schemat architektoniczny w poprzedniej sekcji pokazuje dostępne technologie dodawania ofert do lokalizatora.

Oferty lokalne są powiązane z lokalizacjami, dlatego musisz znaleźć identyfikator lokalizacji profilu firmy powiązany z identyfikatorem miejsca Google Maps Platform odpowiadającym lokalizacji. Gdy masz identyfikator lokalizacji Profilu Firmy, możesz pobrać daną ofertę jako localPost, aby wyświetlić ją w panelu bocznym szczegółów miejsca. Aby to zrobić:

  1. Za pomocą interfejsu Google Moja Firma API utwórz wpisy na potrzeby oferty w formacie OFFER.
  2. Znajdź lokalizację / identyfikator lokalizacji profilu firmy powiązany z identyfikatorem miejsca na mapie.

    Po wyświetleniu szczegółów miejsca użytkownicy widzą szczegóły identyfikatora miejsca w Google Maps Platform. Identyfikator miejsca jest powiązany z identyfikatorem lokalizacji w profilu firmy, dlatego musisz go znaleźć na podstawie identyfikatora miejsca na mapie, aby pobrać i wyświetlić link do oferty lokalnej w Twojej lokalizacji. Wykonaj te wywołania interfejsów Business Profile API:

    1. Wyświetl listę kont projektu.
    2. Wyświetl wszystkie lokalizacje na koncie.
    3. W lokalizacjach konta LocationKey zawiera identyfikator miejsca na mapie, który możesz porównać z identyfikatorem miejsca do wyświetlania.

    Oto przykładowe żądanie informacji o lokalizacji w interfejsach Business Profile API:

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

    Odpowiedź zawiera pole locationKey, które służy do identyfikatora miejsca, którego można używać z żądaniami 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"
        }
    }
          
  3. Teraz, gdy masz już identyfikator lokalizacji, możesz otrzymać odpowiednią ofertę. Aby pobrać istniejący wpis z ofertą, podaj tutaj lokalizację localPosts i ustaw filtr topicType jako OFFER, aby znaleźć ofertę, której chcesz użyć.

    Oto przykładowe żądanie wyświetlenia aktywnych postów lokalnych dla danej lokalizacji:

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

    Poniższy przykład pokazuje OFFER localPost w 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."
                }
            },
        ],
    }
            
  4. Utwórz i wypełnij <div> w panelu bocznym odpowiednich danych z obiektu localPost.

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 niestandardowe, aby zastąpić domyślne pinezki mapy.
  • Zmień kolory funkcji mapy, aby odzwierciedlić markę.
  • Możesz kontrolować to, co Cię interesuje (np. atrakcje, jedzenie, zakwaterowanie itd.) i gęstość, dzięki czemu możesz skupić się na swoich lokalizacjach i zaznaczać punkty orientacyjne, które pomagają użytkownikom dotrzeć do najbliższej lokalizacji.

Tworzenie niestandardowych znaczników mapy

Możesz dostosować znaczniki, zmieniając kolor domyślny (np. pokazując, czy lokalizacja jest obecnie otwarta) lub zastępując spersonalizowany obraz, np. logo Twojej marki. Okna informacyjne, czyli wyskakujące okienka, mogą przekazywać użytkownikom dodatkowe informacje, np. godziny otwarcia, numer telefonu, a nawet zdjęcia. Możesz też tworzyć znaczniki niestandardowe, takie jak rastrowe, wektorowe, przeciągane, a nawet animowane.

Poniżej znajduje się przykładowa mapa zawierająca niestandardowe znaczniki. Zobacz kod źródłowy w temacie Znaczników niestandardowych interfejsu Maps JavaScript API.

Szczegółowe informacje znajdziesz w dokumentacji znaczników JavaScript (sieć), Android i iOS.

Stylowanie mapy

Google Maps Platform pozwala zmienić styl mapy w sposób, który pomaga użytkownikom znaleźć najbliższą lokalizację, jak najszybciej dotrzeć na miejsce i wzmocnić markę. Możesz na przykład zmieniać kolory mapy, aby pasowały do Twojej marki, a także zmniejszyć liczbę elementów rozpraszających uwagę na mapie, kontrolując ciekawe miejsca, które są widoczne dla użytkowników. Google Maps Platform udostępnia też szablony szablonów map, z których część jest zoptymalizowana pod kątem różnych branż, takich jak podróże, logistyka, nieruchomości czy handel detaliczny.

Style mapy możesz tworzyć i modyfikować na stronie Style mapy w Google Cloud Console w projekcie.

Rozwiń, aby zobaczyć animacje tworzenia i stylu stylów map w Cloud Console:

Style mapy branży

Animacja przedstawia wstępnie zdefiniowane style map stosowane w branży. Te style stanowią optymalny punkt wyjścia dla każdego typu branży. Na przykład styl mapy handlu detalicznego zmniejsza liczbę miejsc na mapie, dzięki czemu użytkownicy mogą skupić się na lokalizacjach, a także zaznaczyć punkty orientacyjne, aby pomóc im jak najszybciej dotrzeć do najbliższej lokalizacji.

Na stronie Styl mapy myszy kliknij Utwórz nowy styl mapy. Na stronie nowego stylu mapy kliknij przycisk obok każdego ze zoptymalizowanych stylów: turystyka, logistyka, nieruchomości i handel detaliczny. Po kliknięciu każdego przycisku opis stylu mapy i podgląd obrazu będą się zmieniać.

Ciekawe miejsce

Animacja ustawia kolor znacznika dla ciekawych miejsc i zwiększa gęstość ciekawych miejsc na mapie. Im większa gęstość, tym więcej znaczników ważenia pojawia się na mapie.

Na stronie Styl mapy myszy kliknij Utwórz nowy styl mapy. Na stronie Nowy styl mapy w sekcji Utwórz własny styl zostanie wybrana opcja Mapa Google. Mysz klika przycisk Atlas obok stylu Atlas, a następnie Otwórz w edytorze stylów. W edytorze stylów kursor myszy klika funkcję Ciekawe miejsca, a następnie klika element Ikona, ustawiając kolor na czerwony. Następnie użytkownik zaznacza pole wyboru Gęstość ciekawych miejsc, a następnie steruje gęstością w prawo, aby uzyskać maksymalną gęstość. W miarę zwiększania gęstości na mapie wyświetla się coraz więcej czerwonych znaczników. Myszka przechodzi do przycisku Zapisz.

Każdy styl mapy ma własny identyfikator. Po opublikowaniu stylu w Cloud Console możesz odwoływać się do jego identyfikatora w kodzie. Oznacza to, że możesz zaktualizować styl mapy w czasie rzeczywistym bez wprowadzania refaktoryzacji aplikacji. Nowy wygląd pojawi się automatycznie w istniejącej aplikacji i będzie można jej używać na różnych platformach. Poniższe przykłady pokazują, jak dodać identyfikator mapy do strony internetowej za pomocą interfejsu Maps JavaScript API.

Dzięki uwzględnieniu co najmniej 1 elementu map_ids w adresie URL skryptu interfejs API JavaScript Map Google automatycznie udostępnia te style, aby przyspieszyć renderowanie mapy podczas wywoływania tych stylów 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>

Ten kod wyświetla na stronie internetowej stylowaną mapę. (Nie jest to 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'
});

Więcej informacji o wdrażaniu stylów map w Google Cloud znajdziesz w językach JavaScript (internet), Androidzie i iOS.

Uzyskiwanie statystyk dotyczących wykorzystania dzięki statystykom

Dzięki statystykom możesz uzyskać cenne informacje na temat interakcji użytkowników z Twoim lokalizatorem. W tej sekcji znajdziesz wskazówki dotyczące konfiguracji i monitorowania statystyk Google Analytics i Profilu Firmy, aby śledzić dane, które Cię najbardziej interesują. W przypadku użytkowników korzystających z Lokalizatora Plus Plus panel statystyk pomaga analizować i generować statystyki, na podstawie których możesz sprawdzić, jak użytkownicy korzystają z Twojego lokalizatora sklepów.

Lokalizator Plus
Panel statystyk lokalizatora sklepów zawiera dane o skuteczności

Aby uzyskać dostęp do tego raportu, przejdź do sekcji raportów zaangażowania w Cloud Console. Szczegółowe informacje o tym raporcie znajdziesz w artykule Raporty zaangażowania.

Biorąc pod uwagę możliwości i elastyczność Google Analytics, nie będziemy się starać dostarczać wyczerpujących informacji o konfiguracji i użytkowaniu. Zamiast tego wprowadzimy do najważniejszych dokumentów, z których dowiesz się więcej o czytaniu i instrukcjami, zwracając uwagę na kluczowe kwestie analityczne dotyczące Twojej aplikacji lokalizatora.

Konfiguracja usługi Google Analytics

Jeśli używasz już Google Analytics w swojej aplikacji, możesz pominąć tę sekcję.

Poniżej znajdziesz przykład „globalnego tagu” wklejanego w witrynie na potrzeby włączania 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 swojej witryny, musisz wiedzieć, jak używać implementacji Google Analytics do tych celów:

  • wywoływać interakcje użytkowników, np. kliknięcia, które można mierzyć niezależnie od odsłon witryny (zdarzenia);
  • Możesz wyświetlać nieprzetworzone dane (dane) w istotnych grupach (wymiary lub wymiary niestandardowe).

Korzystanie ze zdarzeń niestandardowych

Oto przykład definiowania zdarzenia niestandardowego w lokalizatorze:

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

Nazwy event i method powinny być na tyle zrozumiałe, aby można było zrozumieć zdarzenia w raportach. Aktywuj je w przypadku konkretnych interakcji, które chcesz mierzyć, np. gdy użytkownik wybierze i wybierz adres z listy autouzupełniania widocznej na rysunku poniżej.

Możesz wysłać do Google Analytics poniższe wywołanie śledzące, które korzysta ze zdefiniowanego zdarzenia i metody. (Aby ułatwić czytanie, parametry każdego zapytania wyświetlamy 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

Poniższy przykład pokazuje, jak wywołanie Google Analytics pojawia się w widoku inspekcji na karcie Sieć. (kliknij, aby powiększyć).

Możesz sprawdzić, czy niestandardowe tagi zdarzeń są prawidłowo rejestrowane w widoku „Czas rzeczywisty” w Google Analytics. Na przykład zdarzenie "location" skonfigurowane wcześniej dla autouzupełniania miejsc pojawi się w Google Analytics w podany niżej sposób.

 

Możesz też monitorować zdarzenia w czasie rzeczywistym przy użyciu DebugView, jak na rysunku poniżej. Odczekaj 24 godziny, zanim uzyskasz dostęp do pełnego raportu „Zdarzenia” w sekcji Zaangażowanie i zdarzenia w Google Analytics.

Możesz też opracowywać i mierzyć strategie, które pomogą Ci zwiększyć ruch w sklepie stacjonarnym w aplikacji lokalizatora. Na przykład w Google Analytics jest dostępna usługa Wizyty w sklepie stacjonarnym w Analytics, która łączy dane z lokalnych wizyt w sklepie stacjonarnym (mierzone przez Google Ads) z lokalizacją. Możesz również opracować własne strategie wdrażania aplikacji w konkretnych lokalizacjach, np. oferty online dostępne do wykorzystania w sklepach stacjonarnych.

Dane w profilu firmy

Oprócz śledzenia zdarzeń, danych i wymiarów, które Cię interesują w Google Analytics, profil firmy ma również własne dane. Na przykład: jeśli dodasz do lokalizatora linki do rezerwacji spotkań i ofert lokalnych, możesz uzyskać dane dotyczące tych wyświetleń i kliknięć.

Poniższe przykładowe żądanie do interfejsów Business Profile API wymaga podania wielu typów danych. W przypadku śledzenia ofert oferty 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, 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 LOCAL_POST_ACTIONS_CALL_TO_ACTION oferuje kliknięcia.
  • 11 wyświetleń wpisów lokalnych w wyszukiwarce Google.

Inną opcją jest utworzenie linków do działań z użyciem funkcji Zarezerwuj z Google. Gdy użytkownicy klikną linki do działań utworzone w Zarezerwuj z Google, możesz zarejestrować te działania w Google Analytics, co umożliwi śledzenie konwersji w Google Analytics. Więcej informacji znajdziesz w dokumentacji śledzenia konwersji.

Niezależnie od używanej strategii pomiarów pomiary liczą się nie tylko od analizy skuteczności wskaźników KPI. Liczby te pomogą Ci zrozumieć, jak te lokalizatory wpływają na Twoją działalność. Możesz też porównać dane Google Analytics dotyczące lokalizatora z danymi w profilu firmy. Dzięki porównaniu tych danych możesz np. sprawdzić, ilu klientów trafia z Twojego lokalizatora do Map Google i że następnie odwiedza Twoją firmę.


Lokalizator Plus

W zależności od potrzeb biznesowych lub potrzeb użytkowników możesz jeszcze bardziej zwiększyć wygodę użytkowników.

Wysyłanie trasy na urządzenie mobilne

Aby ułatwić użytkownikom dostęp do lokalizacji, możesz wysłać im SMS-a lub e-maila z linkiem do trasy. Po kliknięciu na telefonie uruchomi się aplikacja Mapy Google, jeśli jest zainstalowana. W innym przypadku aplikacja maps.google.com wczyta się w przeglądarce na urządzeniu. Oba te elementy pozwalają użytkownikowi korzystać z nawigacji zakręt po zakręcie, w tym ze wskazówek głosowych, aby dotrzeć do miejsca docelowego.

Użyj adresów URL Map Google, aby utworzyć adres URL trasy w postaci adresu URL z kodowaniem adresu URL jako parametrem destination i identyfikatorem miejsca jako parametr destination_place_id. Tworzenie i używanie adresów URL Map Google jest bezpłatne, więc adres URL nie musi zawierać 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 jednak pominiesz te wskazówki, trasa będzie zaczynać się od bieżącej lokalizacji użytkownika, która może się różnić od lokalizacji, w której była używana aplikacja Locator Plus. Adresy URL Map Google udostępniają dodatkowe opcje parametrów zapytania, takie jak travelmode i dir_action=navigate, przy włączaniu trasy.

Ten link, który można kliknąć, który prowadzi powyżej przykładowy URL, ustawia origin jako stadion piłkarski Londynu i używa travelmode=transit do podania wskazówek dojazdu transportem publicznym do miejsca docelowego.

Aby wysyłać SMS-y lub e-maile z tym adresem URL, zalecamy korzystanie z aplikacji innej firmy, na przykład twilio. Jeśli używasz App Engine, możesz wysyłać SMS-y lub e-maile za pomocą firm zewnętrznych. Więcej informacji znajdziesz w artykule Wysyłanie wiadomości za pomocą usług innych firm.

Wyświetlam Street View, by pomóc użytkownikom wizualizować lokalizacje

W wielu lokalizacjach na całym świecie Street View umożliwia wyświetlanie lokalizacji zewnętrznej poza samą lokalizacją. Dzięki temu użytkownicy widzą lokalizację, zanim do niej trafią. Widok Street View możesz podawać w formularzu interaktywnym (internetowym) lub statycznym (API), w zależności od tego, czy chcesz przyjrzeć się obszarowi w widoku 360 stopni. Tryb Street View jest też dostępny 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 za pomocą usług lokalizacyjnych wbudowanych w ich urządzenia lub przeglądarki. Przykładem użycia funkcji lokalizacji geograficznej HTML5 przeglądarki jest wyświetlanie lokalizacji użytkownika lub urządzenia na mapie Google, a także dokumentacja o uprawnieniach i uzyskiwaniu lokalizacji na Androidzie i iOS. Może się jednak zdarzyć, że zechcesz skorzystać z alternatywnej wyszukiwarki lokalizacji. Na przykład gdy usługa lokalizacji urządzenia jest wyłączona lub masz obawy związane z podszywaniem się.

Interfejs API geolokalizacji to interfejs API po stronie serwera, który zwraca promień lokalizacji i dokładności na podstawie informacji o wieżach komórkowych i węzłach Wi-Fi, które może wykryć klient. Możesz użyć geolokalizacji, aby określić lokalizację użytkownika lub sprawdzić lokalizacje zgłoszone przez urządzenie.

Łączenie danych niestandardowych z informacjami o miejscu

W poprzedniej sekcji Podawanie szczegółowych informacji o miejscu opisujemy szczegółowo informacje o miejscach, takie jak godziny otwarcia, zdjęcia i opinie.

Warto poznać koszt w różnych polach danych w informacjach o miejscu, które są klasyfikowane jako dane podstawowe, kontakty i atmosfera. Aby zarządzać kosztami, jedną ze strategii jest połączenie istniejących informacji o Twoich lokalizacjach z aktualnymi informacjami (zwykle podstawowymi i danymi kontaktowymi) z Map Google, takimi jak tymczasowe zamknięcie, godziny otwarcia w święto, oceny użytkowników, zdjęcia i opinie. Jeśli masz już informacje kontaktowe lokalizacji, nie musisz prosić ich o podanie szczegółów miejsca, ale w zależności od tego, co chcesz wyświetlać, możesz ograniczyć żądanie tylko do pól danych podstawowych i informacji o atmosferze.

Zamiast szczegółów miejsca możesz mieć własne dane dotyczące miejsca na dane lub z nich korzystać. W ćwiczeniach z programowania dotyczących lokalizatora pełnego stosu znajdziesz przykład użycia narzędzia GeoJSON z bazą danych do przechowywania i pobierania własnych szczegółów lokalizacji.