Deep Linking ใน React Native Apps: ทั้งหมดที่คุณต้องการทราบ!

การเชื่อมโยงในรายละเอียดได้กลายเป็นองค์ประกอบสำคัญในโลกที่เชื่อมต่อถึงกันในปัจจุบัน คำว่า "ลิงก์ในรายละเอียด" อาจฟังดูใหม่สำหรับหลายๆ คน แต่พวกคุณส่วนใหญ่คงเคยใช้แนวคิดของการเชื่อมโยงในรายละเอียดในรูปแบบใดรูปแบบหนึ่ง

คุณจำเหตุการณ์ที่คุณคลิกลิงก์และเปิดหน้าจอเฉพาะในแอปที่ติดตั้งบนอุปกรณ์ของคุณโดยตรงได้หรือไม่ โดยที่คุณไม่ต้องนำทางด้วยตนเองผ่านแอพ? หรือ ตัวอย่างเช่น คุณต้องการให้เพื่อนของคุณอ่านบทความและแบ่งปัน URL ของบทความนั้น เพื่อนของคุณคลิกที่ลิงก์และถูกนำไปยังเนื้อหาที่ต้องการในครั้งเดียว แทนที่จะต้องเปิดหน้าแรกก่อนแล้วจึงค้นหาบทความ

คุณเคยสงสัยไหมว่าสิ่งนี้เกิดขึ้นได้อย่างไร?

นี่คือสิ่งที่ Deep Link ทำ ผู้ใช้คลิกลิงก์และเปลี่ยนเส้นทางไปยังตำแหน่งเฉพาะในแอปบนอุปกรณ์เคลื่อนที่หรือเว็บไซต์โดยไม่ต้องเสียเวลานำทางผ่านหน้าจอหลัก ตัวอย่างอื่นๆ ได้แก่ การแชร์ลิงก์สำหรับวิดีโอ YouTube หรือผลิตภัณฑ์ Amazon กับเพื่อน การเปิดลิงก์โปรโมตจากแบรนด์เพื่อไปยังหน้าผลิตภัณฑ์เฉพาะ เป็นต้น ในสถานการณ์เช่นนี้ การทำ Deep Link เป็นสิ่งจำเป็น เนื่องจากลิงก์ของเว็บปกติจะไม่ทำงานอย่างมีประสิทธิภาพกับแอปพลิเคชันมือถือที่มาพร้อมเครื่อง

โพสต์นี้เกี่ยวกับการทำความเข้าใจว่าแนวคิดของ Deep Link ทำงานอย่างไร และเรียนรู้เกี่ยวกับประโยชน์ของมัน นอกจากนี้ เราจะหารือเกี่ยวกับขั้นตอนสำคัญเกี่ยวกับวิธีการนำ Deep Link ไปใช้งานในแอปมือถือ React Native สำหรับระบบปฏิบัติการ Android และ iOS เราได้เลือก React Native framework เนื่องจากเป็นหนึ่งในการตั้งค่าที่ได้รับความนิยมมากที่สุดสำหรับการพัฒนาแอพมือถือในปัจจุบัน

การเชื่อมโยงลึกคืออะไร?

การเชื่อมโยงในรายละเอียดเป็นเทคนิคที่ช่วยให้สามารถเชื่อมโยงเนื้อหาหรือหน้าจอเฉพาะภายในแอปพลิเคชันมือถือจากแหล่งภายนอก เช่น แอปพลิเคชันอื่นหรือเว็บไซต์ ลิงก์รายละเอียดเป็นลิงก์ที่คลิกได้ซึ่งส่งผู้ใช้ไปยังตำแหน่งเฉพาะภายในแอปบนอุปกรณ์เคลื่อนที่ทันที แทนที่จะเป็นร้านค้าออนไลน์หรือเว็บลิงก์ ตำแหน่งในแอปนี้สามารถเป็นอะไรก็ได้ เช่น ชิ้นส่วนของเนื้อหาที่ปลอดภัยหลังเพย์วอลล์ บทความ ผลิตภัณฑ์ หรือหน้าจอเข้าสู่ระบบ ผู้ใช้สามารถเข้าถึงตำแหน่งในแอปที่ต้องการได้เพียงแค่คลิกที่ URL หรือทรัพยากรโดยไม่จำเป็นต้องค้นหาหน้านั้นด้วยตนเอง

แนวคิดของ Deep Linking ทำงานอย่างไร

ลิงก์ในรายละเอียดจะระบุรูปแบบ URL ที่กำหนดเอง เช่น ลิงก์สากล (สำหรับอุปกรณ์ iOS) และ URL เจตนา (สำหรับอุปกรณ์ Android) เมื่อผู้ใช้คลิกลิงก์ในรายละเอียด ระบบปฏิบัติการจะสกัดกั้นลิงก์และเปิดแอปพลิเคชันที่เกี่ยวข้องหากติดตั้งบนอุปกรณ์ของผู้ใช้ แอปพลิเคชันจะใช้ข้อมูลที่ปรากฏในลิงก์ในรายละเอียดเพื่อนำทางไปยังเนื้อหาหรือหน้าจอที่ต้องการ

Deep Link ที่เลื่อนออกไป?

จะเกิดอะไรขึ้นหากผู้ใช้ได้รับลิงก์ในรายละเอียดไปยังแอปพลิเคชัน แต่แอปพลิเคชันไม่ได้ติดตั้งบนอุปกรณ์ของพวกเขา ที่นี่ลิงก์ในรายละเอียดที่เลื่อนเวลาเข้ามาในรูปภาพ หากผู้ใช้คลิกลิงก์และไม่ได้ดาวน์โหลดแอปที่เป็นของลิงก์นั้น ผู้ใช้จะถูกนำไปที่ App Store แทน ที่นี่ ผู้ใช้จะถูกนำทางไปยังตำแหน่งที่แน่นอนของ App Store ซึ่งพวกเขาสามารถติดตั้งแอพที่ต้องการได้ด้วยการคลิกเพียงครั้งเดียว และเมื่อติดตั้งแอปแล้ว หน้าจอเฉพาะจะเปิดขึ้นพร้อมกัน

ประโยชน์ของการทำ Deep Link คืออะไร?

การเชื่อมโยงในรายละเอียดช่วยประหยัดเวลาของผู้ใช้และปรับปรุงประสบการณ์ของผู้ใช้อย่างมาก

ลิงก์ในรายละเอียดเป็นเครื่องมือที่ยอดเยี่ยมสำหรับแบรนด์ธุรกิจในการเพิ่มการรักษาผู้ใช้และอัตราการแปลง แบรนด์สามารถเชื่อมโยงแคมเปญส่งเสริมการขายและสิ่งจูงใจเข้ากับลิงก์ในรายละเอียด เปลี่ยนเส้นทางผู้ใช้ไปยังหน้าผลิตภัณฑ์ด้วยการคลิกเพียงครั้งเดียว ด้วยวิธีนี้ แบรนด์สามารถโน้มน้าวให้ผู้ใช้ลองผลิตภัณฑ์หรือบริการใหม่ๆ ได้อย่างง่ายดาย ตัวอย่างเช่น เจ้าของแอปเพลงต้องการโปรโมตอัลบั้มเพลงใหม่ เจ้าของเลยลงทุนลงโฆษณาผูกสัมพันธ์กับเว็บดัง ปกอัลบั้มเพลงที่มีลิงก์ในรายละเอียดจะแสดงบนเว็บไซต์นั้นเป็นแคมเปญโฆษณา เมื่อผู้ใช้เว็บไซต์คลิกที่ลิงก์ในรายละเอียด พวกเขาจะถูกเปลี่ยนเส้นทางไปยังหน้าเฉพาะในแอปเพลงและสามารถฟังอัลบั้มได้

นอกจากนี้ คุณสามารถติดตามแคมเปญ Deep Link และตรวจสอบประสิทธิภาพของแคมเปญได้ การเชื่อมโยงในรายละเอียดยังช่วยปรับปรุงอันดับ SEO ของคุณ และลดการหยุดทำงานของแอปพลิเคชันของคุณ

คุณจะใช้ Deep Linking ใน React Native Apps ได้อย่างไร

ไลบรารีการนำทางแบบตอบสนองมีโมดูลการลิงก์สำหรับแอปแบบพื้นเมืองของ React ที่ลิงก์ในรายละเอียด สิ่งนี้พิสูจน์ได้ว่ามีประโยชน์สำหรับนักพัฒนา React Native

คุณต้องกำหนดสคีมาลิงก์ในรายละเอียดในแอปพลิเคชันที่จะแมป URL เฉพาะกับหน้าจอแอปที่เกี่ยวข้อง react-navigation จัดเตรียมคอมโพเนนต์เช่น Linking module และ NavigationContainer เพื่อกำหนดสคีมา หลังจากกำหนดสคีมาแล้ว สามารถใช้จัดการลิงก์ในรายละเอียดที่เข้ามาได้ คุณต้องลงทะเบียนฟังก์ชันการโทรกลับด้วยความช่วยเหลือของเมธอด addEventListner ที่โมดูลการลิงก์จัดเตรียมไว้เพื่อจัดการลิงก์ในรายละเอียดที่เข้ามา เมื่อเปิดใช้แอปผ่านลิงก์ในรายละเอียด ฟังก์ชันการโทรกลับจะถูกเรียกใช้ ฟังก์ชันการโทรกลับนี้สามารถใช้สำหรับการไปยังหน้าจอที่ต้องการในแอปพลิเคชัน

การกำหนดค่า Deep Linking ใน IoS และ Android

คุณต้องกำหนดค่าแอปมือถือด้วยรูปแบบ URL (URL เฉพาะ) รูปแบบ URL นี้มีหน้าที่ในการค้นหาและเปิดแอปที่ติดตั้งบนอุปกรณ์สมาร์ทโฟนของผู้ใช้ ในการทำให้แอปนำทางไปยังหน้าจอ คุณต้องตั้งค่าคำนำหน้าที่ตรงกับรูปแบบ URL ที่แอปได้รับการกำหนดค่า จากนั้นหน้าจอจะต้องได้รับการแมปภายในแอพด้วยเส้นทางที่เกี่ยวข้อง เมื่อเส้นทางแนบกับ URL แอปจะสามารถนำทางไปยังหน้าจอที่ต้องการได้โดยตรง

การกำหนดค่าลิงก์ในรายละเอียดจะแตกต่างกันเล็กน้อยสำหรับระบบปฏิบัติการ iOS และ Android มาดูกันว่านักพัฒนา React Native มืออาชีพใช้ Deep Link สำหรับ Android และ iOS ได้อย่างไร!

การกำหนดค่า Deep Links ใน React Native Android Apps

ขั้นตอนที่ # 1 การกำหนด Deep Link

เปิดไฟล์ Manifest และกำหนด Deep Link ที่คุณวางแผนจะใช้ในแอป เพื่อให้ผู้ใช้สามารถไปยังหน้าที่ต้องการภายในแอปได้โดยตรง ที่นี่ คุณต้องกำหนดลิงก์ในรายละเอียดสำหรับหน้านั้นๆ วิธีกำหนด Deep Link ในไฟล์ AndroidManifest.xml มีดังนี้
<กิจกรรม

android:name=”.ProductActivity”

android:label="สินค้า">

<เจตนากรอง>

<การกระทำ android:name=”android.intent.action.VIEW” />

<หมวดหมู่ android:name=”android.intent.category.DEFAULT” />

<หมวดหมู่ android:name=”android.intent.category.BROWSABLE” />

<ข้อมูล

android:host=”example.com”

android:pathPrefix=”/ผลิตภัณฑ์”

android:scheme=”http” />

<ข้อมูล

android:host=”example.com”

android:pathPrefix=”/ผลิตภัณฑ์”

android:scheme=”https” />

</เจตนากรอง>

</กิจกรรม>

ขั้นตอนที่ #2 กำหนดค่า Intent Filter

ไปที่ android/app/src/main จากนั้นเปิดไฟล์ชื่อ AndroidManifest.xml ตอนนี้ คุณต้องกำหนดค่าตัวกรองเจตนาสำหรับลิงก์ในรายละเอียดทุกลิงก์ ตัวกรองความตั้งใจจะระบุจำนวนข้อมูลและการดำเนินการที่แอปพลิเคชันของคุณสามารถจัดการได้

ขั้นตอนที่ # 3 การจัดการเจตนา

คุณต้องจัดการกับความตั้งใจในกิจกรรมของแอปพลิเคชันของคุณ ความตั้งใจนี้จะเปิดแอปพลิเคชันของคุณจากลิงก์ในรายละเอียด สำหรับการจัดการความตั้งใจ คุณต้องแยกข้อมูลจากความตั้งใจและกำหนดตำแหน่งเฉพาะหรือหน้าจอเฉพาะภายในแอปของคุณที่คุณต้องการให้ผู้ใช้นำทางไป หลังจากนั้น โปรเจ็กต์ของคุณจะต้องสร้างใหม่ในโปรแกรมจำลอง Android

การกำหนดค่า Deep Links ใน React Native IOS Apps

ตั้งค่ารูปแบบ URL ของคุณภายใต้ประเภท URL ใน Xcode แก้ไขไฟล์ 'AppDelegate' และสร้างโครงการใหม่ในโปรแกรมจำลอง iOS ตอนนี้โครงการ iOS เปิดใน Xcode

ขั้นตอนที่ #1 กำหนดรูปแบบ URL

กำหนดรูปแบบ URL ที่กำหนดเองสำหรับแอปพลิเคชันของคุณ รูปแบบ URL นี้เป็นวิธีที่ไม่เหมือนใครในการระบุแอปของคุณ เว็บไซต์หรือแอปอื่นๆ จะใช้ตัวระบุเฉพาะนี้ในการเปิดใช้แอปพลิเคชันของคุณ

เปิดไฟล์ info.plist เพิ่มประเภท URL ใหม่ที่ด้านบนของไฟล์นี้ สามารถป้อนรูปแบบ URL ในช่องตัวระบุและรูปแบบ URL จากนั้นขยายรายการ 0 (ศูนย์) เลือก URL Schemes และตั้งชื่อรายการ 0 ชื่อนี้เป็นชื่อที่แอปพลิเคชันของคุณจะเชื่อมโยงได้ ตัวอย่างเช่น ชื่อแอปของคุณคือ “แอปของเรา” รูปแบบ URL จะมีลักษณะดังนี้ “ourapp://” หรือ “ourapp://detail?id=123”

ขั้นตอนที่ #2 จัดการการติดตั้งโค้ด

ตอนนี้ คุณต้องใช้โค้ดที่จะจัดการลิงก์ในรายละเอียด ไปที่ไฟล์ 'AppDelegate' และเพิ่มวิธีการจัดการโครงร่าง แอปของคุณจะเปิดตัวผ่านรูปแบบ URL เมื่อใด วิธีการนี้จะถูกเรียก วิธีนี้จะได้รับ URL ข้อมูลที่จำเป็นจะถูกแยกออกจาก URL และหน้าจอด้านขวาจะแสดงในแอปของคุณ

ขั้นตอนที่ # 3 การทดสอบ

ตอนนี้ลิงก์ในรายละเอียดจำเป็นต้องได้รับการทดสอบ สำหรับสิ่งนี้ คุณสามารถใช้เครื่องมือ Safari หรือแอปพลิเคชันของบุคคลที่สามอื่นๆ ที่รองรับแนวคิดการทำ Deep Link ตัวอย่างเช่น คุณกำลังใช้ Safari เปิด URL ที่มีรูปแบบ URL ที่กำหนดไว้ใน Safari หลังจากนั้น แอปของคุณจะเปิดขึ้นด้วยหน้าจอที่ถูกต้อง

ขั้นตอนที่ # 4 การจัดการ Universal Link

นอกจากการเพิ่มรูปแบบ URL ที่กำหนดเองแล้ว แอปของคุณยังสามารถกำหนดค่าให้รองรับลิงก์สากล – ลิงก์ HTTPS มาตรฐานที่ใช้โดยแอปหรือเว็บไซต์อื่น – เพื่อเปิดแอปของคุณ นี่คือวิธีที่คุณต้องการจัดการลิงก์สากล กำหนดค่าการให้สิทธิ์ของแอปพลิเคชันของคุณ จากนั้น สร้างรหัสที่เกี่ยวข้องสำหรับการจัดการลิงก์สากล และนำรหัสไปใช้ในผู้รับมอบสิทธิ์ของแอปของคุณ

ตอนนี้ คุณสามารถสร้างโปรเจ็กต์ของคุณใหม่ได้ในโปรแกรมจำลอง iOS

ความคิดสุดท้าย

ฉันหวังว่าคุณจะเข้าใจแนวคิดของการลบลิงก์และขั้นตอนการดำเนินการเป็นอย่างดี การเชื่อมโยงในรายละเอียดกลายเป็นสิ่งจำเป็นสำหรับแอปพลิเคชันในปัจจุบัน อย่างไรก็ตาม สิ่งสำคัญคือต้องดำเนินขั้นตอนการปรับใช้ Deep Link ด้วยความเชี่ยวชาญระดับมืออาชีพสูงสุด หากคุณขาดความเชี่ยวชาญด้านเทคนิคหรือทรัพยากรที่จำเป็น บริษัทพัฒนาแอป React Native ที่มีประสบการณ์สามารถช่วยคุณดำเนินการสร้างลิงก์ในรายละเอียดและกระบวนการดำเนินการได้อย่างง่ายดาย