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

סקירה כללית

web iOS API

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

ליצירה

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

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

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

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

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

הפעלת ממשקי API

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

מידע נוסף על ההגדרה זמין במאמר תחילת העבודה עם Google Maps Platform.

הקטעים 'שיטות מומלצות'

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

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

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

בדוגמה הזו נעשה שימוש ב: ספריית מקומות, Maps JavaScript API זמינים גם: ‫Android | ‫iOS

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

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

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

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

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

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

טפסים של כתובות

פיתוח אתרים

Android

iOS

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

אפשר לשלב את ההשלמה האוטומטית למקומות באתר שלכם באמצעות כמה שורות של JavaScript.

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

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

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;

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

בדוגמת הקוד הזו אפשר לראות הדגמה פעילה וקוד מקור מלא למילוי טופס להזנת כתובת.

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

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

  • בטופס כתובת, מגדירים את הפרמטר types לערך address כדי להגביל את ההתאמות לכתובות רחוב מלאות. מידע נוסף על סוגים נתמכים של בקשות להשלמה אוטומטית למקומות
  • אם לא צריך לחפש ברחבי העולם, כדאי להגדיר את ההגבלות וההטיות המתאימות. אפשר להשתמש בכמה פרמטרים כדי להטות את ההתאמות לאזורים ספציפיים או להגביל אותן לאזורים ספציפיים.
    • משתמשים ב-bounds כדי להגדיר את הגבולות המלבניים של אזור. כדי לוודא שיוחזרו רק כתובות באזורים האלה, משתמשים ב-strictBounds.
    • כדי להגביל את התשובות לקבוצה מסוימת של מדינות, צריך להשתמש ב-componentRestrictions.
  • משאירים את השדות ניתנים לעריכה למקרה ששדות מסוימים לא נכללים בהתאמה, ומאפשרים ללקוחות לעדכן את הכתובת אם צריך. מכיוון שרוב הכתובות שמוחזרות על ידי השלמה אוטומטית למקומות לא מכילות מספרי משנה של מקומות, כמו מספר דירה, מספר משרד או מספר יחידה, בדוגמה הזו המיקוד עובר לשורת הכתובת 2 כדי לעודד את המשתמש למלא את המידע הזה אם יש צורך.

אישור חזותי באמצעות Maps Static API

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

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

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

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

בדוגמה הבאה מוצגת מפת דרכים בגודל 600x300px, שבמרכזה Googleplex ב-Mountain View, קליפורניה, ברמת זום 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
רמת הזום zoom=13
גודל תמונה size=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 זמין במאמרי העזרה.

טיפים לשיפור נוסף של תהליך התשלום

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

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