דף זה תורגם על ידי Cloud Translation API.

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

סקירה כללית

אתר iOS ב-API

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

לפיתוח האפליקציות!

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

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

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

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

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

הפעלת ממשקי API

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

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

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

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

סמל סימן הווי הוא שיטה מרכזית.
סמל הכוכב הוא התאמה אישית אופציונלית אבל מומלצת ישפרו את הפתרון.

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

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

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

בדוגמה הזו: ספריית מקומות, Maps JavaScript API

זמין גם: Android | iOS

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

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

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

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

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

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

טופסי כתובת

פיתוח אתרים

Android

iOS

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

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

הדרך הקלה ביותר היא לכלול את ממשק ה-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();
}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 בתור להגביל את ההתאמות לכתובות רחובות שלמות. מידע נוסף על סוגים נתמכים בבקשות להשלמה אוטומטית של Place.
להגדיר את ההגבלות המתאימות ובדעות קדומות, אם אתם לא צריכים לחפש בכל העולם. יש כמה פרמטרים ישמשו להטיה או להגבלה של כל התאמה לאזורים ספציפיים בלבד.
- אפשר להשתמש ב-bounds כדי להגדיר גבולות מלבניים להגבלת אזור מסוים, צריך להשתמש strictBounds כדי לוודא שיוחזרו רק כתובות באזורים האלה.
- אפשר להשתמש בפונקציה componentRestrictions כדי להגביל את התגובות לקבוצה מסוימת של מדינות.
משאירים את השדות ניתנים לעריכה במקרה ששדות מסוימים לא נכללים בהתאמה, ומאפשרים ללקוחות כדי לעדכן את הכתובת לפי הצורך. מאחר שרוב הכתובות שהוחזרו על ידי השלמה אוטומטית של מקומות לא מכילים מספרי משנה כמו מספר דירה, סוויטה או יחידה. מעביר את המיקוד לשורת כתובת 2 כדי לעודד את המשתמש למלא אם יש צורך.

מתן אישור חזותי באמצעות ממשק ה-API של מפות Google

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

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

תחילת העבודה עם ה-API הסטטי של מפות Google

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

הקריאה הבאה מציגה מפת דרכים, בגודל של 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

זו תהיה התמונה שמוצגת כאן:

למידע נוסף על אפשרויות ה-API הסטטי של מפות Google, ניתן לעיין במאמר מסמכי התיעוד.

טיפים לשיפור Google Checkout

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

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