Enriched Transactions

개요

이 가이드를 사용하여 위치를 특정 판매자와 일치시키고 자세한 판매자 정보를 표시하는 방법을 알아보세요.

'ACMEHCORP'와 같이 축약된 거래 명세서를 발행하면 고객이 이해하기 어려울 수 있습니다. 이로 인해 청구 금액에 대한 이의 제기가 발생하고 추가 지원 비용이 발생할 수 있습니다. 대신 Acme Housewares와 같이 전체 판매자 이름을 제공하는 것이 좋습니다.

Enriched Transactions를 사용하면 판매자의 전체 이름, 비즈니스 카테고리, 오프라인 매장 이미지, 연락처 및 위치 세부정보를 비롯한 직관적인 거래 정보를 더 쉽게 제공할 수 있습니다. 이를 통해 투명성이 향상되고, 순 추천 고객 지수 (NPS)가 개선되며, 앱 사용 시간이 늘어납니다.

원시 거래 명세서와 보강된 판매자 세부정보를 비교하는 모바일 화면 샘플
Enriched Transactions 샘플 화면(클릭하여 확대)

API 사용 설정

Enriched Transactions를 구현하려면 Google Cloud 콘솔에서 다음 API를 사용 설정해야 합니다. 다음 링크를 클릭하면 Google Cloud 콘솔이 열리고 선택한 프로젝트에 각 API를 사용 설정할 수 있습니다.

설정에 대한 자세한 내용은 Google Maps Platform 시작하기를 참고하세요.

구현 가이드 섹션

이 가이드에서는 다음 구현 및 맞춤설정을 다룹니다.

판매자를 Google Maps Platform과 연결하기 거래 내역에 있는 판매자를 Google Maps Platform의 장소와 연결합니다.
판매자 세부정보 표시하기 고객이 거래를 빠르게 인지할 수 있도록 판매자에 관한 유용한 정보를 충분히 포함하는 거래 내역을 표시합니다.
판매자 위치의 지도 추가하기 고급 마커를 사용하여 판매자 위치의 지도를 추가합니다.

판매자를 Google Maps Platform과 연결하기

이 예에서 사용하는 API: Places API (신규) 기타 지원되는 환경: JavaScript

다음 플로우 차트는 애플리케이션에서 기존 판매자 데이터베이스의 장소 세부정보를 사용하거나 텍스트 검색 요청을 통해 판매자 거래를 연결하여 결과를 반환하는 방법을 나타낸 것입니다.

판매자 거래 기록을 장소 ID 및 장소 세부정보와 일치시키는 플로우 차트
판매자 연결의 흐름을 보여주는 매트릭스(클릭하여 확대)

Google Maps Platform 장소 ID 가져오기

판매자 데이터베이스에 업체 이름, 주소 같은 기본 정보가 저장되어 있을 수 있습니다. 연락처 정보와 고객이 직접 입력한 평점을 포함해 해당 장소와 관련하여 Google Maps Platform에 저장된 정보를 가져오려면, 데이터베이스에 저장된 각 판매자에 해당하는 장소 ID를 찾습니다.

비즈니스의 장소 ID를 가져오려면 Places API (신규)에서 텍스트 검색 (신규) 엔드포인트를 호출하고 필드 마스크에서 places.id 필드만 요청합니다. 그러면 텍스트 검색 Essentials (ID만 해당) SKU가 트리거됩니다. 판매자의 위치가 여러 곳인 경우에는 쿼리에 판매자 이름과 함께 도시 또는 도로 이름을 포함하세요. 반환된 결과가 판매자와 일치하는지 확인합니다.

다음 예시에서는 판매자 이름과 도시를 사용해 Google 타이베이 오피스의 장소 ID를 요청합니다.

curl -X POST -d '{
  "textQuery" : "Google Taipei"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: places.id' \
'https://places.googleapis.com/v1/places:searchText'

장소 ID 저장

이후 요청에 사용할 수 있도록 Google Maps Platform의 판매자 정보를 저장하려면 내 데이터베이스에 판매자 기록의 속성으로 무기한 장소 ID를 저장할 수 있습니다. 판매자마다 텍스트 검색 (신규) 요청을 한 번만 실행하거나 고객이 거래 세부정보를 요청할 때마다 장소 ID를 검색할 수 있습니다.

저장된 장소 ID를 정확하게 유지하려면 필드 마스크에 id 필드만 지정하는 장소 세부정보 (신규) 요청을 실행하여 12개월마다 장소 ID를 새로고침하세요.

표시되는 장소 세부정보가 고객이 거래를 완료한 판매자와 일치하지 않는 경우 Google에서는 고객이 판매자 일치 품질에 대한 의견을 제출할 수 있도록 허용할 것을 권장합니다.

판매자 세부정보 표시

이 예에서 사용하는 API: Places API (신규) 기타 지원되는 환경: Android용 Places SDK | iOS용 Places SDK | Maps JavaScript API의 장소 라이브러리

고객이 판매자 위치를 방문한 후에 필요한 장소 세부정보를 공유할 수 있습니다. Places API (신규)에서 장소 세부정보 (신규) 엔드포인트를 호출한 후 Google Maps Platform 서비스 약관의 한도 내에서 정보 창, 웹 사이드바 또는 모바일 세부정보 뷰에서 응답을 필터링하고 렌더링할 수 있습니다.

판매자 이름, 주소, 지도, 연락처 정보가 표시된 모바일 거래 세부정보 보기
판매자 세부정보 샘플 화면(클릭하여 확대)

장소 세부정보 엔드포인트에 요청을 실행하려면 각 위치의 장소 ID가 필요합니다. 판매자 위치의 장소 ID를 가져오는 방법은 Google Maps Platform 장소 ID 가져오기를 참고하세요.

다음 장소 세부정보 (신규) 요청은 Google 타이베이 101 장소 ID에 대한 JSON 형식의 표시 이름, 형식화된 주소, 좌표, 웹사이트, 전화번호, 아이콘, 영업시간, 평점을 반환합니다.

curl -X GET -H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: displayName,formattedAddress,location,websiteUri,nationalPhoneNumber,iconMaskBaseUri,regularOpeningHours,rating' \
'https://places.googleapis.com/v1/places/ChIJraeA2rarQjQRyAqIxkx2vN8'

Maps JavaScript API를 사용하여 웹 애플리케이션을 빌드하는 경우 Place 클래스를 사용하여 클라이언트에서 동일한 필드를 가져올 수도 있습니다.

const place = new google.maps.places.Place({
  id: "ChIJraeA2rarQjQRyAqIxkx2vN8",
});

await place.fetchFields({
  fields: [
    "displayName",
    "formattedAddress",
    "location",
    "websiteURI",
    "nationalPhoneNumber",
    "regularOpeningHours",
    "rating",
  ],
});

판매자 위치의 지도 추가하기

이 예에서 사용하는 API: Maps JavaScript API | Geocoding API | Maps Static API 기타 지원되는 환경: Android | iOS

판매자의 위치 확인하기

장소 세부정보의 지리적 좌표를 사용하여 지도에 마커를 배치할 수 있습니다. 판매자 데이터베이스에 지리 좌표가 없는 상세 주소가 있고 장소 세부정보를 요청하지 않는 경우 Geocoding API를 사용하여 서버 측에서 상세 주소를 위도 및 경도 좌표로 변환하고, 해당 좌표를 데이터베이스에 저장하고, 최소 30일에 한 번 새로고침할 수 있습니다.

다음 예에서는 Geocoding API를 사용하여 Google 타이베이 오피스 장소 ID의 위도와 경도를 가져옵니다.

```html
https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJraeA2rarQjQRyAqIxkx2vN8&key=YOUR_API_KEY
```

웹 지도에 고급 마커 추가하기

고객은 탐색이나 이동을 위해서가 아니라 거래를 확인하기 위해 지도를 보는 것이기 때문에 상호작용 기능이 제한적인 지도를 구성하고 판매자 위치에 고급 마커를 배치하세요. 고급 마커에는 지도 ID와 marker 라이브러리 (libraries=marker)가 필요합니다.

먼저 libraries=marker를 사용하여 Maps JavaScript API를 로드하고 지도에 컨테이너 div를 추가합니다.

<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=marker&callback=initMap"></script>
<div id="map" style="height: 300px; width: 100%;"></div>

그런 다음 gestureHandling: "none" 및 zoomControl: false를 사용하여 지도를 초기화하여 상호작용을 제한하고, mapId를 제공하고, 판매자의 좌표에 google.maps.marker.AdvancedMarkerElement를 만듭니다.

function initMap() {
  const merchantLocation = { lat: 25.033976, lng: 121.5645389 };
  const map = new google.maps.Map(document.getElementById("map"), {
    center: merchantLocation,
    zoom: 16,
    mapId: "DEMO_MAP_ID",
    gestureHandling: "none",
    zoomControl: false,
  });

  new google.maps.marker.AdvancedMarkerElement({
    map,
    position: merchantLocation,
    title: "Google Taipei",
  });
}

핀 배경, 테두리 또는 글리프 색상을 변경하거나 판매자 카테고리에 맞춤 그래픽 이미지를 제공하여 고급 마커를 맞춤설정할 수도 있습니다.

정적 지도 이미지 추가

데스크톱 또는 모바일 웹에 비대화형 지도 이미지를 사용하려면 판매자의 위도 및 경도 좌표 또는 주소에 단일 마커가 포함된 Maps Static API URL을 만듭니다. Maps Static API는 지정된 매개변수를 사용하여 이미지 버전의 지도를 반환합니다.

다음 요청은 크기가 640x480픽셀이고, 중심 위치는 Google 타이베이 오피스의 빨간색 마커이며, 클라우드 기반 지도 스타일이 적용된 로드맵을 반환합니다.

```html
https://maps.googleapis.com/maps/api/staticmap?size=640x480&markers=color:red%7C25.033976%2C121.5645389&map_id=b224095f76859890&key=YOUR_API_KEY&signature=BASE64_SIGNATURE
```

다음 표에서는 요청의 각 섹션을 설명합니다.

API URL https://maps.googleapis.com/maps/api/staticmap?
이미지 크기 size=640x480
판매자 위치 마커 (URL 인코딩 사용) markers=color:red%7C25.033976%2C121.5645389
클라우드 기반 지도 스타일 map_id=b224095f76859890
API 키 key=YOUR_API_KEY
디지털 서명 (디지털 방식으로 요청에 서명하는 방법 알아보기) signature=BASE64_SIGNATURE

이 요청은 다음과 같은 정적 지도 이미지를 생성합니다.

Google 타이베이 오피스를 중심으로 빨간색 위치 마커가 있는 지도

다음과 같이 주소를 마커 위치로 전달할 수도 있습니다.

```html
https://maps.googleapis.com/maps/api/staticmap?size=640x480&markers=color:green%7CTaipei%20101%20Tower%2CNo.%207信義路五段信義區台北市%20Taiwan%20110&map_id=b224095f76859890&key=YOUR_API_KEY&signature=BASE64_SIGNATURE
```

기타 매개변수 옵션은 Maps Static API 문서를 참고하세요.

모바일 애플리케이션에 지도 추가하기

Android용 Maps SDK 또는 iOS용 Maps SDK를 사용하는 경우 장소 세부정보의 좌표를 사용해 고급 마커를 배치할 수 있습니다.

고객은 탐색이나 이동을 위해서가 아니라 거래를 확인하기 위해 지도를 보는 것이기 때문에 상호작용 기능이 제한적인 지도를 구성하세요.