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

סקירה כללית

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

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

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

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

הפעלת ממשקי API

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

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

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

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

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

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

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

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

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

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

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

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

נדרשות רק כמה שורות של קוד 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 מופעלת. הפונקציה, כמו בדוגמה הבאה, לוקחת את התשובה שנבחרה ו מחלץ את רכיבי הכתובת כדי להציג אותם בתוך טופס.

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

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 באמצעות קריאה לשירות אינטרנט, הפעולה תיצור גרסת תמונה של מפה בהינתן הפרמטרים שאתם מציינים. בדומה למפה הדינמית, הוא יכול לציין את סוג המפה, להשתמש באותם סגנונות מבוססי-ענן ולהוסיף סמנים כדי להבחין בין המיקום.

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

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

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

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

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

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