מדריך להטמעה של הקופה

סקירה כללית

web iOS API

הפלטפורמה של מפות Google זמינה לאינטרנט (JS, TS), ל-Android ול-iOS, וכוללת גם ממשקי API של שירותי אינטרנט לקבלת מידע על מקומות, מסלולים ומרחקים. הדוגמאות במדריך הזה נכתבות לפלטפורמה אחת, אבל יש קישורים לתיעוד לצורך הטמעה בפלטפורמות אחרות.

אפשר ליצור אותו עכשיו!

הכלי Quick Builder במסוף Google Cloud מאפשר ליצור השלמה אוטומטית של טופסי כתובת באמצעות ממשק משתמש אינטראקטיבי שיוצר עבורכם קוד JavaScript.

קניות והזמנות באינטרנט הפכו לחלק מחיינו. שירות משלוחים ביום הקנייה, דרך הזמנת מונית או הזמנת ארוחת ערב, הלקוחות כבר יודעים מה תהליך התשלום קל ונוח.

עם זאת, בכל האפליקציות האלה, הוספת כתובת לחיוב או למשלוח נותרת מכשול אחד בתהליך התשלום, שגוזל זמן יקר ומסורבל. חוויית תשלום חלקה הופכת לחשובה עוד יותר בעולם המכשירים הניידים, שבו הזנת טקסט מורכב במסך קטן עלולה להיות מתסכלת ומכשול נוסף להמרה של לקוחות.

בנושא הזה מוצגות הנחיות הטמעה שעוזרות ללקוחות שלך להשלים את תהליך התשלום במהירות בעזרת הזנה של כתובת חזויה.

בתרשים הבא מוצגים ממשקי ה-API העיקריים שמעורבים בהטמעה של Checkout (יש ללחוץ כדי להרחיב).

הפעלת ממשקי API

כדי להטמיע את Checkout, עליך להפעיל את ממשקי ה-API הבאים במסוף Google Cloud:

• API של JavaScript במפות Google
• Places API
• API סטטי של מפות Google

למידע נוסף, קראו את המאמר תחילת העבודה עם הפלטפורמה של מפות Google.

הקטעים 'שיטות'

בהמשך מופיעים הטיפים וההתאמות האישיות שנעסוקות בנושא זה.

• סמל סימן הווי הוא אחד משיטות העבודה העיקריות.
• סמל הכוכב הוא אופציונלי, אבל מומלץ להתאמה אישית כדי לשפר את הפתרון.

	הוספת השלמה אוטומטית לשדות להזנת קלט	מילוי אוטומטי של טופס כתובת. אפשר להוסיף פונקציונליות מסוג 'לפי שימוש' כדי לשפר את חוויית המשתמש בכל הפלטפורמות ולשפר את הדיוק של הכתובות במינימום הקשות.
	הוספת אישור חזותי באמצעות Maps Static API	מצא את הקואורדינטות של קווי אורך ורוחב בכתובת נתונה (קידוד גיאוגרפי), או המר את נקודות הציון של קווי האורך והרוחב של מיקום גיאוגרפי לכתובת (קידוד גיאוגרפי הפוך).
	טיפים לשיפור Google Checkout	כדאי להשתמש בתכונות המתקדמות של השלמה אוטומטית במקום כדי לשפר את חוויית התשלום עוד יותר.

הערה: כדי לעקוב אחרי ההטמעה של דוגמאות קוד של פתרונות ולשפר את איכות הפתרון, Google כוללת את פרמטר השאילתה solution_channel בקריאות ל-API בקוד לדוגמה שמוצג בדף הזה. כדי לבטל את ההסכמה, צריך למחוק את פרמטר השאילתה solution_channel מקוד הדוגמה. למידע נוסף, ראו פרמטר של פתרונות בפלטפורמה של מפות Google.

הוספת השלמה אוטומטית לשדות להזנת קלט

בדוגמה הזו אנחנו משתמשים: ספריית מקומות, Maps JavaScript API

זמין גם: Android | iOS

בעזרת ההשלמה האוטומטית, ניתן להזין כתובת בקלות באפליקציה, להגדיל את שיעורי ההמרות ולספק ללקוחות חוויית שימוש חלקה. ההשלמה האוטומטית מספקת שדה אחד להזנה מהירה עם חיזוי כתובת מסוג 'הקלדה מראש', שאפשר להשתמש בו כדי לאכלס באופן אוטומטי טופס של כתובת לחיוב או כתובת למשלוח.

על ידי שילוב ההשלמה האוטומטית של מקום בעגלת הקניות המקוונת שלכם, תוכלו:

• יש לצמצם את מספר השגיאות בהזנת הכתובת.
• מפחיתים את מספר השלבים בתהליך התשלום.
• קל יותר להזין כתובת במכשירים ניידים או במכשירים לבישים.
• צריך לצמצם משמעותית את ההקשות ואת הזמן הכולל שנדרש ללקוח לביצוע הזמנה.

כשהמשתמש לוחץ על התיבה 'השלמה אוטומטית' ומתחיל בהקלדה, מופיעה רשימה של חיזויים של כתובות:

כשהמשתמש בוחר כתובת מרשימת החיזויים, אפשר להשתמש בתגובה כדי לאמת את הכתובת ולקבל את המיקום. לאחר מכן האפליקציה יכולה לאכלס את השדות הנכונים בטופס הזנת הכתובת:

סרטונים: שיפור טופסי כתובת באמצעות השלמה אוטומטית של מקומות:

טופסי כתובת

אתרים

Android

iOS

תחילת העבודה עם השלמה אוטומטית של מקום

נדרשות רק שתי שורות של קוד JavaScript כדי לשלב את Place Autcomplete באתר שלך.

הדרך הקלה ביותר היא לכלול את 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);
}

בדוגמה הקודמת, ה-event listener של 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

הערה: מומלץ לקרוא את המדריך לגבי השימוש ב-TypeScript ובמפות Google.

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 Static API, שמוסיף גרסת תמונה של המפה לכל תג תמונה בדף או באימייל.

תחילת העבודה עם Maps Static API

ניתן להשתמש ב- Maps Static API באמצעות קריאה לשירות אינטרנט. הפעולה הזו תיצור גרסת תמונה של המפה בהתאם לפרמטרים שציינת. כמו המפה הדינמית, אפשר לציין את סוג המפה, להשתמש באותם סגנונות מבוססי-ענן ולהוסיף סמנים כדי להבחין בין המיקום.

הקריאה הבאה מציגה מפת דרכים בגודל של 600x300 פיקסלים, שבמרכזה מתחם Googleplex במאונטיין ויו, קליפורניה, ברמת זום 13. הוא גם מציין סמן כחול של מיקום המשלוח וסגנון מפה וירטואלית.

      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
      

המידע מחולק לקטעים הבאים:

כתובת ה-URL של ה-API	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
מפתח API	key=YOUR_API_KEY
פרמטר של ערוץ פתרון (עיינו בתיעוד בנושא פרמטרים)	solution_channel=GMP_guides_checkout_v1_a

זו הופכת לתמונה הבאה:

למידע נוסף על האפשרויות של Maps Static API, עיינו במסמכי התיעוד.

טיפים לשיפור נוסף של Google Checkout

כדי לשפר עוד יותר את חוויית הלקוח, אפשר לנצל כמה מהתכונות המתקדמות שמציעה ההשלמה האוטומטית של מקום. ריכזנו כאן כמה טיפים לשיפור התיבה להזנת כתובת בהשלמה אוטומטית:

• המשתמשים יכולים להזין כתובת שמבוססת על שם של עסק או של נקודת עניין שירות החיזוי "הקלד מראש" פועל לא רק בכתובות, אלא גם יכול לבחור לאפשר הזנת שמות של עסקים או ציוני דרך. אחרי שמשתמש מזין שם של עסק, אפשר לאחזר את הכתובת בקלות באמצעות קריאה לפרטי המקום. כדי לאפשר הזנה של כתובות וגם שמות של מוסדות, צריך להסיר את הנכס types מהגדרת ההשלמה האוטומטית.
• התאימו אישית את המראה והתחושה של התיבה 'השלמה אוטומטית של מקומות' כך שיתאימו לסגנון האתר שלכם. תוכל גם לעצב את הווידג'ט של ההשלמה האוטומטית כך שיתאים למראה ולתחושה של עגלת הקניות שלך. יש קבוצה של סיווגי CSS שאפשר להתאים אישית. למידע נוסף על האופן שבו ניתן לעצב את תיבת ההשלמה האוטומטית, אפשר לעיין במסמכי התיעוד.
• כדי ליצור ממשק משתמש בהתאמה אישית כדי לבנות ממשק משתמש מותאם אישית במקום להשתמש בממשק המשתמש שעוצב על ידי Google, קרא לשירות השלמה אוטומטית של מקום באופן פרוגרמטי כדי לאחזר חיזויים לקלט נתון. ניתן לאחזר באופן פרוגרמטי חיזויים של השלמה אוטומטית של מקומות ב- JavaScript ב-Android וב-iOS , וכן להפעיל את ה-API של שירותי האינטרנט ישירות דרך Places API.