มีตั๋วงานเข้ามาในคิว: “ใส่ปุ่ม Apple Wallet ในอีเมลยืนยันด้วยครับ” ฟังดูง่ายจนกว่าจะเริ่มทำจริง แล้วไปเจอกฎเรื่องแบดจ์ของ Apple, ไฟล์ .pkpass ที่ต้องเซ็นรับรอง และคำถามที่ว่าปุ่มนี้ควรลิงก์ไปที่ไหนกันแน่ ตัวปุ่มเองคือส่วนที่ง่ายที่สุด ส่วนที่ทำให้ทีมติดขัดคือการเชื่อมกับ pass จริงและวางตำแหน่งให้ถูกจุด
บทความนี้สรุปสั้นๆ สำหรับใครก็ตามที่ต้องปล่อยปุ่มนี้ออกไป: ควรวางตรงไหนในอีเมล เว็บ และแอป กฎที่ Apple และ Google บังคับใช้ และวิธีเชื่อมกับลิงก์ติดตั้งจริงที่บันทึก pass ได้จริง ถ้าทำถูกวิธี ปุ่มนี้จะช่วยเพิ่มอัตราการติดตั้ง ไม่ใช่แค่นอนเฉยๆ ในเทมเพลตอีเมล
สำหรับธุรกิจในไทยที่คุ้นเคยกับบัตรสมาชิกหรือคูปองใน LINE Official Account (LINE OA) อยู่แล้ว ปุ่ม Add to Wallet ทำงานคนละแบบ แต่เสริมกันได้ดี — LINE OA เหมาะกับการแจ้งเตือนและแชทกับลูกค้า ส่วน wallet pass เหมาะกับข้อมูลที่ต้องโชว์หน้าจอ เช่น บัตรสะสมแต้ม ตั๋ว หรือคูปอง เพราะอัปเดตข้อมูลได้เองโดยไม่ต้องเปิดแอปใดๆ
ปุ่มนี้ควรอยู่ตรงไหน (อีเมล เว็บ ในแอป)
ปุ่มนี้ใช้งานได้ใน 3 จุด และแต่ละจุดมีบริบทของตัวเองที่ผูกกับช่วงเวลาที่ pass มีคุณค่าที่สุด
ในอีเมล ควรอยู่ในข้อความยืนยันหรือข้อเสนอ: ใบเสร็จคำสั่งซื้อ อีเมลยืนยันตั๋ว หรือการสมัครสมาชิก มีข้อควรระวังหนึ่งอย่าง คือลูกค้าอาจเปิดอีเมลบนคอมพิวเตอร์ ซึ่งปุ่มจะใช้งานไม่ได้ ควรเพิ่มข้อความเช่น “เปิดอีเมลนี้บน iPhone ของคุณเพื่อเพิ่ม pass”
บนเว็บ ควรอยู่ในหน้ายืนยันหรือหน้าข้อเสนอ ใกล้กับสิ่งที่กำลังจะถูกบันทึก: หลังชำระเงินเสร็จ บนหน้ายืนยันการจอง หรือบนหน้าคูปองเฉพาะ
ในแอป ควรอยู่ตรงจุดที่ข้อมูล pass ปรากฏอยู่แล้ว ทันทีหลังการกระทำที่สร้าง pass นั้นขึ้นมา เช่น การซื้อ การสมัครสมาชิก หรือการออกตั๋ว แอปแบบ native ควรใช้ปุ่มควบคุมของ Apple โดยตรง แทนที่จะใช้เป็นรูปภาพ
กฎอย่างเป็นทางการของ Apple สำหรับปุ่มนี้
Apple ถือว่าแบดจ์นี้เป็นงานออกแบบที่มีเครื่องหมายการค้า กฎจึงเข้มงวดและควรทำตามให้ครบ เพื่อไม่ให้แอปถูกปฏิเสธตอนรีวิว หรือปุ่มดูผิดเพี้ยน
ใช้ไฟล์ SVG ที่ Apple ให้ดาวน์โหลดสำหรับเว็บและอีเมล ส่วนไฟล์ EPS ใช้กับสื่อสิ่งพิมพ์ที่มี QR code ห้ามออกแบบเวอร์ชันของตัวเอง ห้ามเปลี่ยนสี หมุน ใส่แอนิเมชัน หรือใส่เงาให้แบดจ์ ในแอป native ให้ใช้ตัวควบคุม PKAddPassButton ซึ่งจะแสดงรูปแบบและภาษาที่ถูกต้องให้อัตโนมัติ
ด้านเลย์เอาต์ ให้เว้นระยะห่างรอบแบดจ์อย่างน้อยหนึ่งในสิบของความสูงแบดจ์ และวางบนพื้นหลังสีขาวหรือสีอ่อน สำหรับพื้นหลังสีเข้ม Apple มีเวอร์ชันเส้นขอบ (outline) ให้ใช้ แบดจ์ควรเป็นองค์ประกอบรอง ไม่ใช่ตัวเด่นของหน้า
ด้านการเรียกชื่อ ให้เขียนว่า “Apple Wallet” ในการกล่าวถึงครั้งแรก แล้วใช้ “Wallet” ในครั้งต่อไป และใส่ข้อความเครดิตเครื่องหมายการค้าของ Apple ทุกครั้งที่มีข้อความทางกฎหมายปรากฏ กฎการเรียกชื่อเหล่านี้เป็นส่วนหนึ่งของสิ่งที่ Apple ตรวจสอบ
ข้อผิดพลาดบางอย่างทำให้ปุ่มถูกปฏิเสธหรือใช้งานไม่ได้แบบเงียบๆ แบดจ์ที่ออกแบบเองแทนที่จะใช้ของทางการจะไม่ผ่านการรีวิว และแบดจ์ที่ซ่อนอยู่จนดูไม่ออกว่ามีไว้ทำอะไรก็จะถูกมองข้าม
ลิงก์ที่ชี้ไปยัง pass ที่ไม่ได้เซ็นรับรองหรือมีรูปแบบผิดพลาด จะไม่ทำอะไรเลยเมื่อถูกแตะ และการเรียกชื่อที่ไม่สม่ำเสมอ เช่น “save to iPhone wallet” ก็ผิดกฎแบรนด์เช่นกัน ทั้งหมดนี้หลีกเลี่ยงได้ด้วยการใช้อาร์ตเวิร์กที่ Apple ให้มาและ pass ที่เซ็นรับรองถูกต้อง
ปุ่ม Add to Google Wallet: งานเดียวกัน กฎคนละชุด
ถ้าคุณรองรับทั้งสอง wallet ซึ่งธุรกิจที่ขายตรงถึงผู้บริโภคส่วนใหญ่ควรทำ คุณจะวางปุ่ม Google ไว้ข้างปุ่ม Apple งานเหมือนกัน แต่รายละเอียดต่างกัน
ปุ่มของ Google มีให้ในรูปแบบ Android XML, SVG และ PNG เป็นสีดำเท่านั้น มีทั้งเวอร์ชันปกติและแบบย่อ ระยะห่างรอบปุ่มกำหนดตายตัวที่ 8dp ทุกด้าน และปุ่มต้องมีความสูงขั้นต่ำ 48dp มีกฎหนึ่งที่พลาดง่าย: ถ้ามีปุ่มอื่นอยู่ในหน้าเดียวกัน ปุ่ม Add to Google Wallet ต้องมีขนาดเท่ากับหรือใหญ่กว่าปุ่มเหล่านั้น ห้ามเล็กกว่า
ปุ่มนี้ต้องเรียก Google Wallet API flow ซึ่งจะเปิดแอป Google Wallet ให้ผู้ใช้บันทึก pass ลงในอุปกรณ์ Android และบัญชี Google ของตน ด้านการเรียกชื่อ ให้เขียน “Google Wallet” ด้วยตัว G และ W พิมพ์ใหญ่ และใช้ข้อความปุ่มที่แปลเป็นภาษาท้องถิ่นของ Google เอง ไม่ใช่ข้อความที่เขียนขึ้นเอง
ดังนั้นในเทมเพลตเดียวจะมีสองปุ่มและสองชุดกฎ สร้าง pass ให้ตรงตามมาตรฐานทั้งสองแบบ วางแบดจ์ทั้งคู่ไว้ด้วยกัน แล้วให้อุปกรณ์ของลูกค้าจัดการที่เหลือเองค่ะ
เชื่อมปุ่มเข้ากับลิงก์ติดตั้งจริง
แบดจ์ก็เป็นแค่รูปภาพจนกว่าจะชี้ไปยัง pass ที่เซ็นรับรองจริง มีสามขั้นตอนที่เชื่อมมันเข้ากับสิ่งที่ลูกค้าบันทึกได้จริง
-
สร้างลิงก์ติดตั้งต่อผู้ใช้แต่ละคน
ปุ่มนี้ลิงก์ไปยัง URL ติดตั้งที่ resolve ไปยัง pass ที่เซ็นรับรองแล้ว คุณสร้าง pass ได้สองแบบ: สร้างเองด้วย Apple PassKit framework ซึ่งหมายถึงต้องสร้างและเซ็นไฟล์ .pkpass เอง แล้วรันบริการเพื่อโฮสต์ลิงก์ หรือ ใช้แพลตฟอร์ม pass ที่จัดการเซ็นและโฮสต์ให้แทน แบบแรกให้การควบคุมเต็มรูปแบบและเหมาะกับทีมที่มีทรัพยากร backend ส่วนแบบที่สองเร็วกว่าสำหรับทีมการตลาดและทีมโปรดักต์ส่วนใหญ่ สำหรับ pass แบบใช้ร่วมกัน เช่น คูปองทั่วไป ลิงก์เดียวใช้ได้กับทุกคน ส่วน pass แบบเฉพาะบุคคล เช่น บัตรสะสมแต้มที่มีคะแนนของลูกค้าคนนั้นๆ คุณต้องสร้างลิงก์เฉพาะต่อผู้ใช้แต่ละคน เพื่อให้ pass ที่บันทึกไว้มีข้อมูลของเขาเอง ด้วยแพลตฟอร์มอย่าง Pushwoosh Wallet passes คุณสร้าง pass ครั้งเดียวแล้วสร้างลิงก์ติดตั้งนั้นได้เลย โดยไม่ต้องจัดการการเซ็น .pkpass เอง
-
ใส่ปุ่มลงในเทมเพลต ESP ของคุณ
ในแพลตฟอร์มอีเมลของคุณ วางแบดจ์ SVG ของ Apple (และปุ่ม Google ถ้ารองรับทั้งสอง) แล้วตั้งลิงก์ให้ชี้ไปยัง install URL สำหรับ pass แบบเฉพาะบุคคล แพลตฟอร์มอีเมลส่วนใหญ่ให้คุณใส่ลิงก์เฉพาะนั้นเป็นตัวแปร personalization ได้ ทำให้ปุ่มของผู้รับแต่ละคนชี้ไปยัง pass ของตัวเอง อย่าลืมเพิ่มข้อความ "เปิดบน iPhone ของคุณ" และวางแบดจ์บนพื้นหลังสีอ่อนตามกฎของ Apple
-
ติดตามการบันทึกจริง ไม่ใช่แค่การคลิก
การคลิกที่แบดจ์ยังไม่ใช่การบันทึก ลูกค้ายังต้องกดยืนยันการเพิ่ม pass อีกครั้ง ให้ติดตามการเพิ่มจริงเป็นอีเวนต์แยกต่างหาก เพื่อให้คุณวัดอัตราการติดตั้งจริง ไม่ใช่แค่อัตราการคลิก ตัวเลขนี้บอกว่าตำแหน่งปุ่มและข้อเสนอของคุณได้ผลหรือไม่ และเป็นตัวชี้วัดที่ควรเพิ่มประสิทธิภาพ เพราะ pass ที่บันทึกสำเร็จคือตัวที่อยู่บนโทรศัพท์จริงๆ
ลิงก์เดียว ทุกช่องทาง
การสร้างลิงก์ติดตั้งเฉพาะต่อผู้ใช้แล้วก็อปวางลงทุกช่องทางด้วยมือ ทำได้แค่ไม่กี่แคมเปญก็ไปต่อไม่ไหว ลิงก์คือ asset เดียวกันไม่ว่าจะไปกับอีเมล push หรือ SMS ทางที่มีประสิทธิภาพคือสร้างครั้งเดียวแล้วใช้ซ้ำได้ทุกที่
ด้วย Pushwoosh Wallet passes คุณสร้าง pass สร้างลิงก์ติดตั้ง และกระจายไปยัง push อีเมล และ SMS จากที่เดียว ปุ่ม Apple และ Google ชี้ไปยัง pass เดียวกัน และคุณจัดการการบันทึกกับการอัปเดตได้โดยไม่ต้องแตะไฟล์ .pkpass เลย
เพิ่มอัตราการติดตั้ง wallet pass ด้วย Pushwoosh
ปล่อยปุ่มครั้งเดียวแล้วใช้ลิงก์ซ้ำได้ทุกที่ Pushwoosh Wallet passes สร้างลิงก์ติดตั้งสำหรับ Apple และ Google Wallet และกระจายไปยัง push อีเมล และ SMS จากแดชบอร์ดเดียว
