चेकआउट लागू करने की गाइड

खास जानकारी

web iOS एपीआई

Google Maps Platform, वेब (JS, TS), Android, और iOS के लिए उपलब्ध है. साथ ही, इससे आपको जगहों, रास्तों, और दूरी के बारे में जानकारी पाने के लिए वेब सर्विस एपीआई की सुविधा भी मिलती है. इस गाइड में दिए गए सैंपल, एक प्लैटफ़ॉर्म के लिए लिखे गए हैं. हालांकि, दस्तावेज़ों के लिंक दिए गए हैं, ताकि उन्हें दूसरे प्लैटफ़ॉर्म पर भी लागू किया जा सके.

इसे अभी बनाएं!

Google Cloud Console में मौजूद Quick Builder से आप एक ऐसे इंटरैक्टिव यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल करके पते के फ़ॉर्म को अपने-आप पूरा कर सकते हैं जो आपके लिए JavaScript कोड जनरेट करता है.

ऑनलाइन शॉपिंग और ऑर्डरिंग हमारी ज़िंदगी का अहम हिस्सा बन गए हैं. खरीदार को ऑर्डर वाले दिन डिलीवरी करने की सुविधा देने से लेकर टैक्सी बुक करने या डिनर का ऑर्डर देने तक, इस बात की उम्मीद रहती है कि चेकआउट की प्रोसेस में किसी तरह की रुकावट न आए.

हालांकि, इन सभी ऐप्लिकेशन में, बिलिंग या शिपिंग के लिए पता डालने की प्रक्रिया में, चेकआउट प्रोसेस के दौरान एक रुकावट बनी रहती है. इस रुकावट की वजह से, काम करने में समय लग सकता है और यह दोनों ही मुश्किल हो सकता है. मोबाइल की दुनिया में, बिना किसी रुकावट के चेकआउट का अनुभव और भी अहम हो जाता है. यहां छोटी स्क्रीन पर टेक्स्ट डालने का जटिल तरीका अपनाना परेशान कर सकता है और ग्राहक के ग्राहक में बदलने में दूसरी रुकावट भी हो सकता है.

इस विषय में, शॉपिंग विज्ञापनों को लागू करने के दिशा-निर्देश दिए गए हैं. इनकी मदद से खरीदार, चेकआउट प्रोसेस को तेज़ी से पूरा कर सकते हैं. इसके लिए, उन्हें पता डालने की सलाह दी जाती है.

नीचे दिया गया डायग्राम, चेकआउट की सुविधा लागू करने में शामिल मुख्य एपीआई को दिखाता है (बड़ा करने के लिए क्लिक करें).

एपीआई चालू करना

चेकआउट की सुविधा लागू करने के लिए, आपको Google Cloud Console में इन एपीआई को चालू करना होगा:

सेटअप के बारे में ज़्यादा जानकारी के लिए, Google Maps Platform का इस्तेमाल शुरू करना देखें.

प्रैक्टिस सेक्शन

नीचे वे सलाह और कस्टमाइज़ेशन दिए गए हैं जिन पर हम इस विषय में कवर करेंगे.

  • सही के निशान का आइकॉन, सबसे सही तरीका है.
  • स्टार आइकॉन को पसंद के मुताबिक बनाना ज़रूरी नहीं है. हालांकि, इसे बेहतर बनाने के लिए सुझाया गया है.
इनपुट फ़ील्ड में ऑटोकंप्लीट की सुविधा जोड़ना पते का फ़ॉर्म ऑटोमैटिक भरें. सभी प्लैटफ़ॉर्म पर उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, 'कभी भी टाइप करें' सुविधा जोड़ें. साथ ही, कम से कम कीस्ट्रोक का इस्तेमाल करके पते को ज़्यादा सटीक बनाएं.
Maps Static API की मदद से विज़ुअल की मदद से पुष्टि करना किसी दिए गए पते के अक्षांश/देशांतर निर्देशांक ढूंढें (जियोकोडिंग) या किसी भौगोलिक जगह के अक्षांश/देशांतर निर्देशांक को किसी पते (रिवर्स जियोकोडिंग) में बदलें.
चेकआउट को और बेहतर बनाने के लिए सलाह चेकआउट के अनुभव को और बेहतर बनाने के लिए, 'अपने-आप पूरा होने की जगह' की बेहतर सुविधाओं का इस्तेमाल करें.

इनपुट फ़ील्ड में ऑटोकंप्लीट की सुविधा को जोड़ा जा रहा है

इस उदाहरण में इनका इस्तेमाल किया गया है: जगहें लाइब्रेरी, Maps JavaScript API यह भी उपलब्ध है: Android | iOS

'जगह की जानकारी अपने-आप पूरी होने वाली सुविधा' आपके ऐप्लिकेशन में पता डालने की प्रक्रिया को आसान बना सकती है. इससे आपके ग्राहकों को बेहतर कन्वर्ज़न रेट मिल सकते हैं और उन्हें बेहतर अनुभव मिल सकता है. ऑटोकंप्लीट की सुविधा में, "आगे टाइप करें" पते के सुझाव के साथ एक सिंगल, फटाफट एंट्री फ़ील्ड होता है. इसका इस्तेमाल बिलिंग या शिपिंग पते के फ़ॉर्म को अपने-आप भरने के लिए किया जा सकता है.

अपने ऑनलाइन शॉपिंग कार्ट में स्थान ऑटोकंप्लीट को शामिल करके, आप ये कर सकते हैं:

  • पता डालने से जुड़ी गड़बड़ियां कम करें.
  • चेकआउट की प्रोसेस में चरणों की संख्या कम करें.
  • मोबाइल या पहने जाने वाले डिवाइस पर पता डालने के अनुभव को आसान बनाएं.
  • कीस्ट्रोक और ऑर्डर देने में लगने वाले कुल समय को काफ़ी कम किया जा सकता है.

जब उपयोगकर्ता ऑटोकंप्लीट एंट्री बॉक्स चुनता है और टाइप करना शुरू करता है, तो पते के लिए दिए गए सुझावों की सूची दिखेगी:

जब उपयोगकर्ता सुझावों की सूची में से कोई पता चुनता है, तो दिए गए जवाब का इस्तेमाल, पते की पुष्टि करने और जगह की जानकारी पाने के लिए किया जा सकता है. इसके बाद, आपका ऐप्लिकेशन, पता डालने के फ़ॉर्म के सही फ़ील्ड में जानकारी भर सकता है:

वीडियो: जगह के ऑटोकंप्लीट की सुविधा की मदद से, पते के फ़ॉर्म की क्वालिटी को बेहतर बनाएं:

पते के फ़ॉर्म

वेब

Android

iOS

स्थान ऑटोकंप्लीट करने की सुविधा का इस्तेमाल शुरू करना

अपनी साइट में 'जगह की जानकारी ऑटोकंप्लीट' सुविधा को शामिल करने के लिए, JavaScript कोड की कुछ ही लाइनों की ज़रूरत होती है.

सबसे आसान तरीका यह है कि आप अपनी साइट में Maps JavaScript API (भले ही, आप मैप न दिखा रहे हों) शामिल करें. साथ ही, नीचे दिए गए उदाहरण के मुताबिक 'जगहें' लाइब्रेरी के बारे में बताएं. यह भी शुरू करने का फ़ंक्शन देता है. 

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=places&callback=initAutocomplete&solution_channel=GMP_guides_checkout_v1_a">
</script>

इसके बाद, उपयोगकर्ता इनपुट के लिए अपने पेज पर एक टेक्स्ट बॉक्स जोड़ें: 

<input id="autocomplete" placeholder="Enter your address"></input>

आखिर में, ऑटोकंप्लीट सेवा को शुरू करें और इसे नाम वाले टेक्स्ट बॉक्स से लिंक करें: 

function initAutocomplete() {
  // Create the autocomplete object, restricting the search predictions to
  // addresses in the US and Canada.
  autocomplete = new google.maps.places.Autocomplete(address1Field, {
    componentRestrictions: { country: ["us", "ca"] },
    fields: ["address_components", "geometry"],
    types: ["address"],
  });
  address1Field.focus();
  // When the user selects an address from the drop-down, populate the
  // address fields in the form.
  autocomplete.addListener("place_changed", fillInAddress);
}

पिछले उदाहरण में, place_changed इवेंट लिसनर तब ट्रिगर होता है, जब उपयोगकर्ता किसी पते का सुझाव चुनता है और fillInAddress फ़ंक्शन चलाया जाता है. जैसा कि इस उदाहरण में दिखाया गया है, फ़ंक्शन चुना गया रिस्पॉन्स लेता है और फ़ॉर्म में विज़ुअलाइज़ करने के लिए, पते के कॉम्पोनेंट को एक्सट्रैक्ट करता है.

TypeScript

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components as google.maps.GeocoderAddressComponent[]) {
    // @ts-ignore remove once typings fixed
    const componentType = component.types[0];

    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.short_name;
        break;
      }

      case "postal_code": {
        postcode = `${component.long_name}${postcode}`;
        break;
      }

      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
        break;
      }

      case "locality":
        (document.querySelector("#locality") as HTMLInputElement).value =
          component.long_name;
        break;

      case "administrative_area_level_1": {
        (document.querySelector("#state") as HTMLInputElement).value =
          component.short_name;
        break;
      }

      case "country":
        (document.querySelector("#country") as HTMLInputElement).value =
          component.long_name;
        break;
    }
  }

  address1Field.value = address1;
  postalField.value = postcode;

  // After filling the form with address components from the Autocomplete
  // prediction, set cursor focus on the second address line to encourage
  // entry of subpremise information such as apartment, unit, or floor number.
  address2Field.focus();
}
index.ts

JavaScript

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components) {
    // @ts-ignore remove once typings fixed
    const componentType = component.types[0];

    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.short_name;
        break;
      }

      case "postal_code": {
        postcode = `${component.long_name}${postcode}`;
        break;
      }

      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
        break;
      }
      case "locality":
        document.querySelector("#locality").value = component.long_name;
        break;
      case "administrative_area_level_1": {
        document.querySelector("#state").value = component.short_name;
        break;
      }
      case "country":
        document.querySelector("#country").value = component.long_name;
        break;
    }
  }

  address1Field.value = address1;
  postalField.value = postcode;
  // After filling the form with address components from the Autocomplete
  // prediction, set cursor focus on the second address line to encourage
  // entry of subpremise information such as apartment, unit, or floor number.
  address2Field.focus();
}

window.initAutocomplete = initAutocomplete;

index.js

यह डेटा मिलने के बाद, इसका इस्तेमाल अपने उपयोगकर्ता के लिए मेल खाने वाले पते के तौर पर किया जा सकता है. कोड की कुछ लाइनों की मदद से, यह पक्का किया जा सकता है कि ग्राहक बहुत कम समय में सही पता डाले.

इस कोड सैंपल में, पता डालने के फ़ॉर्म की जानकारी अपने-आप भरने के लिए, एक डेमो और पूरा सोर्स कोड देखें.

स्थान ऑटोकंप्लीट लागू करते समय ध्यान देने वाली बातें

जगह की जानकारी के अपने-आप पूरे होने की सुविधा में ऐसे कई विकल्प हैं जिनकी मदद से, विजेट के अलावा दूसरी चीज़ों का भी इस्तेमाल किया जा सकता है. जगह की जानकारी का सही तरीके से मिलान करने के लिए, कई तरह की सेवाएं इस्तेमाल की जा सकती हैं.

  • पते के फ़ॉर्म के लिए, types पैरामीटर को address पर सेट करें, ताकि मिलते-जुलते पतों को पूरे मोहल्ले के पतों तक सीमित किया जा सके. जगह से जुड़ी ऑटोकंप्लीट सुविधा के अनुरोध के लिए इस्तेमाल किए जा सकने वाले टाइप के बारे में ज़्यादा जानें.
  • अगर आपको दुनिया भर में कुछ खोजने की ज़रूरत नहीं है, तो सही पाबंदियां और पूर्वाग्रह तय करें. ऐसे कई पैरामीटर हैं जिनका इस्तेमाल करके, किसी डेटा को मैच करने के पैमानों पर फ़ोकस किया जा सकता है या उसे सिर्फ़ इलाकों तक सीमित किया जा सकता है.
    • किसी एरिया को छोटे करने के लिए, रेक्टैंगल की सीमाओं को सेट करने के लिए, bounds का इस्तेमाल करें. यह पक्का करने के लिए strictBounds का इस्तेमाल करें कि सिर्फ़ उस एरिया के पते दिखें.
    • कुछ चुनिंदा देशों में जवाबों पर पाबंदी लगाने के लिए, componentRestrictions का इस्तेमाल करें.
  • अगर मैच में कुछ फ़ील्ड छूट जाते हैं, तो फ़ील्ड में बदलाव किया जा सकता है. साथ ही, ज़रूरत पड़ने पर ग्राहकों को पता अपडेट करने की अनुमति दें. जगह की जानकारी अपने-आप भरने की सुविधा के ज़रिए मिले ज़्यादातर पतों में अपार्टमेंट, सुइट या यूनिट नंबर जैसे सब-प्रिमाइस नंबर नहीं होते. इसलिए, इस उदाहरण में फ़ोकस लाइन 2 पर फ़ोकस किया जाता है, ताकि ज़रूरत पड़ने पर उपयोगकर्ता जानकारी भर सके.

Maps Static API की मदद से विज़ुअल की मदद से पुष्टि करें

पता डालने के बाद, एक सामान्य स्टैटिक मैप की मदद से, उपयोगकर्ता को डिलीवरी या पिकअप की जगह की पुष्टि वाला विज़ुअल दें. इससे, ग्राहक को इस बात का अतिरिक्त भरोसा मिलता है कि पता सही है. साथ ही, डिलीवरी/पिकअप न होने की समस्या कम हो जाएगी. स्टैटिक मैप को उस पेज पर दिखाया जा सकता है जहां उपयोगकर्ता पता डालते हैं. इसके अलावा, लेन-देन पूरा होने के बाद, इसे पुष्टि करने वाले ईमेल में भी भेजा जा सकता है.

ये दोनों इस्तेमाल के उदाहरण Maps स्टैटिक एपीआई से किए जा सकते हैं. यह, किसी पेज या ईमेल में मौजूद किसी भी इमेज टैग पर, मैप का इमेज वर्शन जोड़ता है.

Maps Static API का इस्तेमाल शुरू करें

आप वेब सर्विस कॉल का इस्तेमाल करके Maps Static API का इस्तेमाल कर सकते हैं, जो आपके तय किए पैरामीटर के हिसाब से मैप का एक इमेज वर्शन बना देगा. डाइनैमिक मैप की तरह, मैप का टाइप भी बताया जा सकता है, उसी क्लाउड-आधारित स्टाइल का इस्तेमाल किया जा सकता है, और जगह को अलग करने के लिए मार्कर जोड़े जा सकते हैं.

नीचे दिए गए कॉल में एक रोडमैप दिखाया गया है, जिसका साइज़ 600x300 पिक्सल है. यह रोडमैप, ज़ूम लेवल 13 पर माउंटेन व्यू, कैलिफ़ोर्निया के Googleplex में दिखाता है. यह नीले रंग का डिलीवरी लोकेशन मार्कर और ऑनलाइन मैप स्टाइल भी तय करता है. 

      https://maps.googleapis.com/maps/api/staticmap?center=37.422177,-122.084082
      &zoom=13
      &size=600x300
      &maptype=roadmap
      &markers=color:blue%7Clabel:S%7C37.422177,-122.084082
      &map_id=8f348d1b5a61d4bb
      &key=YOUR_API_KEY
      &solution_channel=GMP_guides_checkout_v1_a

यह नीचे दिए गए सेक्शन में बंट जाएगा:

एपीआई का यूआरएल https://maps.googleapis.com/maps/api/staticmap?
मैप सेंटर center=37.422177,-122.084082
ज़ूम का लेवल ज़ूम=13
इमेज का साइज़ साइज़=600x300
मैप का टाइप maptype=roadmap
स्टोर की जगह के मार्कर markers=color:blue%7Clabel:C%7C37.422177,-122.084082
क्लाउड मैप स्टाइल map_id=8f348d1b5a61d4bb
एपीआई पासकोड key=YOUR_API_KEY
सलूशन चैनल पैरामीटर (पैरामीटर का दस्तावेज़ देखें) solution_channel=GMP_guides_checkout_v1_a

यह नीचे दिखाई गई इमेज बन जाएगी:

Maps स्टैटिक एपीआई के विकल्पों के बारे में ज़्यादा जानकारी के लिए, दस्तावेज़ देखें.

चेकआउट को और बेहतर बनाने के लिए सलाह

'अपने-आप पूरा होने की सुविधा' की कुछ बेहतर सुविधाओं का इस्तेमाल करके, ग्राहक के अनुभव को और बेहतर बनाया जा सकता है. यहां ऑटोकंप्लीट पता डालने वाले बॉक्स को बेहतर बनाने के लिए कुछ सलाह दी गई हैं:

  • उपयोगकर्ताओं को किसी कारोबार या लोकप्रिय जगह के नाम के आधार पर पता डालने की अनुमति दें. "आगे लिखें" पूर्वानुमान सेवा न सिर्फ़ पतों के लिए काम करती है, बल्कि आपके पास कारोबार या लैंडमार्क का नाम डालने की अनुमति देने का भी विकल्प है. जब कोई उपयोगकर्ता कारोबार का नाम डालता है, तो जगह की जानकारी पर कॉल करके पता आसानी से वापस पाया जा सकता है. पते और संस्थान के नाम, दोनों डालने की अनुमति देने के लिए, types प्रॉपर्टी को ऑटोकंप्लीट की परिभाषा से हटाएं.
  • 'ऑटोकंप्लीट' सुविधा वाले बॉक्स के लुक और स्टाइल को पसंद के मुताबिक बनाएं, ताकि वह आपकी वेबसाइट की स्टाइल से मेल खाए. अपने शॉपिंग कार्ट के लुक और स्टाइल के लिए, ऑटोकंप्लीट विजेट की स्टाइल भी सेट की जा सकती है. सीएसएस क्लास का एक सेट उपलब्ध है. इसे अपनी पसंद के मुताबिक बनाया जा सकता है. अपने-आप पूरा होने वाले बॉक्स को स्टाइल देने के तरीके के बारे में ज़्यादा जानकारी के लिए, दस्तावेज़ पढ़ें.
  • अगर आपको पसंद के मुताबिक यूज़र इंटरफ़ेस (यूआई) बनाना है. Google के डिज़ाइन किए गए यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल करने के बजाय, पसंद के मुताबिक यूज़र इंटरफ़ेस (यूआई) बनाना, दिए गए इनपुट के लिए अनुमान पाने के लिए 'अपने-आप पूरा होने की सुविधा' सेवा को प्रोग्राम के हिसाब से कॉल करें. आपके पास JavaScript, Android, और iOS में, प्रोग्राम के हिसाब से, जगह की जानकारी के अपने-आप पूरे होने वाले सुझावों को प्रोग्राम के हिसाब से वापस पाने का विकल्प होता है. साथ ही, जगहें एपीआई की मदद से, सीधे वेब सर्विसेज़ एपीआई को कॉल भी किया जा सकता है.