Dynamic Links là một tính năng mạnh mẽ, cho phép ứng dụng tạo và quản lý các liên kết, đồng thời hoạt động liền mạch trên nhiều nền tảng và ngữ cảnh khác nhau. Trong khi đó, Branch.io là nền tảng quản lý các liên kết này, cung cấp nhiều tính năng hỗ trợ theo dõi và tăng mức độ tương tác của người dùng. Vì vậy, việc tích hợp Dynamic Links với Branch.io trong ứng dụng Flutter có thể giúp tăng khả năng thu hút người dùng, cải thiện tỷ lệ giữ chân và tối ưu trải nghiệm người dùng. Bài viết này sẽ cung cấp hướng dẫn đầy đủ về cách tích hợp Dynamic Link bằng Branch.io vào dự án Flutter. 

Tổng quan về Dynamic Link

Dynamic Link là gì?

Dynamic Link là các URL có thể được sử dụng trên nhiều nền tảng như iOS, Android và Web. Các liên kết này có thể xử lý hành vi khác nhau tùy thuộc vào việc ứng dụng đã được cài đặt hay chưa. Nếu ứng dụng chưa được cài đặt, Dynamic Link có thể chuyển người dùng đến App Store để tải ứng dụng. Sau khi cài đặt, liên kết có thể mở ứng dụng và đưa người dùng đến đúng nội dung được chỉ định.

Vì sao nên sử dụng Dynamic Link trong ứng dụng Flutter?

Dynamic Link mang lại nhiều lợi ích khi được sử dụng trong ứng dụng di động. Dưới đây là một số lợi ích nổi bật.

  • Cải thiện trải nghiệm người dùng: Dynamic Links nâng cao trải nghiệm bằng cách đưa người dùng trực tiếp đến nội dung họ quan tâm, thay vì chỉ chuyển đến màn hình chính của ứng dụng.
  • Enhanced marketing and retargeting: Tăng hiệu quả Marketing & Retargeting: Dynamic Links có thể được sử dụng trên nhiều kênh Marketing như Email, mạng xã hội và quảng cáo, giúp theo dõi hiệu quả của từng liên kết và xác định các chiến dịch mang lại hiệu quả cao.
  • Tương thích đa nền tảng: Dynamic Links hoạt động liền mạch trên nhiều nền tảng và thiết bị. Một liên kết có thể mở ứng dụng trên cả iOS và Android hoặc chuyển hướng đến phiên bản Web nếu ứng dụng chưa được cài đặt.
  • Tăng khả năng thu hút người dùng: Dynamic Links có thể thúc đẩy việc thu hút người dùng bằng cách đưa họ trực tiếp đến nội dung hoặc chương trình ưu đãi cụ thể, từ đó có thể cải thiện tỷ lệ chuyển đổi.
  • Cải thiện khả năng giữ chân người dùng: Cung cấp nội dung được cá nhân hóa và phù hợp thông qua Dynamic Links giúp tăng khả năng giữ chân và mức độ tương tác của người dùng.

Vì sao nên sử dụng Branch.io?

Branch.io hỗ trợ phát triển ứng dụng di động thông qua deep links giúp triển khai các chương trình giới thiệu, tính năng chia sẻ và lời mời, đồng thời cung cấp khả năng Attribution và phân tích chi tiết. Branch.io cũng hỗ trợ mở nhanh các ứng dụng khác từ trong ứng dụng và tương thích với cả nền tảng Android và iOS, đảm bảo khả năng tương thích trên nhiều thiết bị.

Thiết lập môi trường làm việc

  • Flutter – Dart SDK
  • Java SDK
  • Android
  • Xcode

Quy trình hoạt động của Dynamic Links

  • Branch.io cho phép người dùng mở ứng dụng thông qua một liên kết với quy trình được thiết lập như sau.
  • Người dùng có thể dễ dàng tạo Short Link và nhúng dữ liệu trực tiếp vào liên kết.

Xem xét tài liệu

  • Ứng dụng có tính phí, vì vậy hãy đảm bảo bạn đã chuẩn bị thẻ tín dụng để thanh toán. Bạn có thể xem thêm thông tin tại đây.
Gói dịch vụChi tiết
EnterpriseNền tảng Enterprise phù hợp với các doanh nghiệp có nhu cầu ứng dụng Mobile nâng cao, sử dụng hệ thống công nghệ phức tạp hoặc muốn đẩy nhanh quá trình phát triển hiện diện trên thiết bị di động.
Self-ServeNền tảng Self-Serve hoàn toàn miễn phí cho người dùng có tối đa 10K người dùng hoạt động hàng tháng (MAU). Chi phí $5/tháng cho mỗi 1K MAU vượt quá 10K. Tính năng Linking và Universal Ads được miễn phí khi dưới 10K MAU và yêu cầu cung cấp thông tin thẻ tín dụng.
  • Cấu hình Branch dashboard bằng cách đăng ký ứng dụng Flutter và hoàn tất thiết lập cơ bản theo tài liệu của Branch.io dành ch iOS và Android)

Luồng màn hình (Branch.io) của Dynamic Links trong Flutter

Cấu hình tài khoản Dashboard (Không thể Testing nếu chưa thanh toán)

  • Sau khi đăng ký ứng dụng và hoàn tất thanh toán (tạm thời tính phí $1 vào thẻ, khoản phí này sẽ được tự động hoàn lại).
  • Branch.io cung cấp 2 chế độ: Live và Test.
  • Người dùng có thể thêm nhiều ứng dụng vào cùng một tài khoản.

Cấu hình Dashboard cho Android và file native trong dự án Flutter

Android

Cấu hình Branch Dashboard

 

  • Bắt đầu bằng việc thiết lập Branch Dashboard cho ứng dụng.
  • Trong Configuration Page cho ứng dụng. Configuration page Cấu hình cài đặt liên kết mặc định (Default Link Settings) cho ứng dụng trong Configuration Page của Branch Dashboard.
    Đảm bảo đã chọn cả hai tùy chọn “I have an Android App” và “Enable App Links”.Nhập các giá trị “Android URI Scheme” và “Custom URL” tương ứng với ứng dụng.
    - Đồng thời nhập SHA256 Cert Fingerprint, SHA256 Cert Fingerprintđảm bảo tất cả các ký tự đều được viết IN HOA.

Lưu ý:
Default URL: https://0abc13.test-app.link
Android URI Scheme: deeplink://
Package Name: com.example.android
SHA256 Cert Fingerprint: Có thể lấy thông tin này từ phần Gradle trong Android Studio.

Cấu hình file Android Native

  • Để cấu hình ứng dụng sử dụng Branch Android SDK, bạn cần cập nhật file AndroidManifest.xml.
  • Trước khi điền các giá trị tương ứng, hãy chuẩn bị các thông tin sau:-
    • App package name
    • Android URI scheme
    • app.link domain được liên kết với ứng dụng
    • -alternate app.link domain được liên kết với ứng dụng
      Branch Live Key
    • Branch Test Key
    • Bạn có thể tìm các thông tin này trong Branch Dashboard thông qua App Settings và Link Settings.

      Tham khảo đoạn code mẫu bên dưới cho AndroidManifest.xml file và đảm bảo thay thế tất cả các giá trị được đánh dấu bằng comment “REPLACE”.

  • Cấu hình file AndroidManifest.xml theo các đoạn mã dưới đây và thay thế các giá trị tương ứng.

iOS

Cấu hình Branch Dashboard

Bắt đầu bằng việc cấu hình Branch Dashboard cho ứng dụng.

  • Trong Configuration Page cho ứng dụng. Configuration page Cấu hình cài đặt liên kết mặc định (Default Link Settings) cho ứng dụng trong Configuration Page của Branch Dashboard.
  • Trên cùng trang, đảm bảo đã chọn tùy chọnI have an iOS App” option is selected
  • Quay lại Configuration Page và nhập Team ID của bạn vào trường Apple App Prefix trong Branch Dashboard.
Cấu hình các file Native cho iOS

a. Cấu hình Bundle Identifier

  • Tiếp theo, đảm bảo “Apple Bundle ID” của project trùng khớp với Bundle ID đã được cấu hình trong Branch Dashboard.
  • Tìm Bundle Identifier của target tương ứng với project tại tab “Signing & Capabilities”. Xcode, dưới "Signing & Capabilities” tab.
  • Quay lại Configuration Page trong Branch Dashboard, sau đó nhấn nút “Add New Bundle ID” để thêm Bundle ID của bạn.

b. Cấu hình Associated Domains

  • Bạn cũng cần chỉ định các link domain mà project có thể sử dụng với Branch.
  • Trong Branch Dashboard, truy cập phần “Link Domain” trên Configuration Page.
  • Quay lại tab “Signing & Capabilities” trong Xcode, sau đó thêm các domain từ Branch Dashboard vào target của project.
  • Sử dụng định dạng: applinks:subdomain.app.link.
  • Cờ -alternate là bắt buộc để đảm bảo Universal Links và Deepviews hoạt động đúng khi người dùng chưa cài đặt ứng dụng.
  • Cờ .test cần được sử dụng nếu bạn muốn sử dụng Test Key.

Lưu ý (*): Nếu bạn sử dụng link domain tùy chỉnh, cần thêm link domain cũ, link domain -alternate và link domain mới vào project.
c. Cấu hình Info.plist

  • Branch yêu cầu một số cặp key/value trong file Info.plist của project, bao gồm:-
    • Mục branch_universal_link_domains khai báo các Associated Domains của bạn.
    • Mục branch_keynhập Live Key key và có thể thêm Test Key nếu cần.
  • URL type key: nơi khai báo các giá trị URL Scheme và URL Identifier.-
    • Lưu ý: Branch iOS SDK sẽ lấy URL Scheme đầu tiên trong danh sách không phải fb, db hoặc pin. Giá trị này sẽ được sử dụng một lần để thiết lập iOS URL Scheme trong Link Settings của Branch Dashboard.
  • Có một số cách để cập nhật file Info.plist:-
  • Bạn có thể chỉnh sửa phầnCustom iOS Target Properties” and “URL Types” sections within the “Infotab “Info” của target. Khi chọn “add new” cho các trường không mặc định trong những phần này, Xcode sẽ tự động tạo file Info.plist cho bạn.
  • Ngoài ra, bạn có thể chỉnh sửa trực tiếp XML trong info.plist file.
  • Quay lại tab “Signing & Capabilities” trong Xcode, sau đó thêm các domain từ Branch Dashboard vào target của project.
    • ios_url_scheme: config in dashboard branch

<key>CFBundleURLTypes</key> 

<array> 

<dict> 

<key>CFBundleTypeRole</key> 

<string>Editor</string> 

<key>CFBundleURLName</key> 

<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string> 



<key>CFBundleURLSchemes</key> 

<array> 

<string>${ios_url_scheme}</string> 

</array> 

</dict> 

</array>
  • Thêm Branch Key và Universal Link Domain
    • Domain: Lấy Link Domain trong phần Configuration của Branch Dashboard. 



<key>branch_key</key> 

<dict> 

<key>live</key> 

<string>key_live_hqiJ9DQdvbu12jegEpNhYlbptCpyySix</string> 

<key>test</key> 

<string>key_test_eucM5FKaAbwZ8khntgHc0bjlzFjurQdQ</string> 

</dict> 

<key>branch_universal_link_domains</key> 

<array> 

<string>${domain}.app.link</string> 

<string>${domain}-alternate.app.link</string> 

<string>${domain}-alternate.test-app.link</string> 

<string>${domain}.test-app.link</string> 

</array>

d. Cấu hình file Pod

  • Khai báo Branch SDK trong file Pod.


target 'Runner' do 

use_frameworks! 

use_modular_headers! 

pod 'BranchSDK' 

flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__)) 

end 

post_install do |installer| 

installer.pods_project.targets.each do |target| 

flutter_additional_ios_build_settings(target) end 

end
e. Cấu hình AppDelegate.swift
  • Trong file Application, khai báo Branch SDK để khởi tạo Session. 



Branch.getInstance().initSession(launchOptions: launchOptions) { (params, error) 

in 

print(params as? [String: AnyObject] ?? {}) 

// Access and use Branch Deep Link data here (nav to page, display content, 

etc.) 

}
  • Bên ngoài hàm Application, thêm đoạn mã để gửi thông báo khi người dùng mở liên kết trên Web. 


// This function is optional to allow BranchIO to handle push notifications 

func application(_ application: UIApplication, didReceiveRemoteNotification 

userInfo: [AnyHashable : Any], fetchCompletionHandler completionHandler: @escaping 

(UIBackgroundFetchResult) -> Void) { 

Branch.getInstance().handlePushNotification(userInfo) 

}
  • Bên ngoài hàm Application, thêm đoạn mã để gửi thông báo khi người dùng mở liên kết trên Web.
  • Dán đoạn mã bên dưới vào file của bạn hoặc tải xuống từ liên kết được cung cấp: branch.json.


branch.json 

{ 

"useTestInstance": false 

}

f. Xác thực tích hợp

  • Sau khi thiết lập tích hợp Branch iOS SDK, cần xác thực để đảm bảo dữ liệu được truyền đến Branch Dashboard một cách chính xác. Sau đó, bạn có thể bắt đầu cấu hình Branch Deep Links và gửi Branch Events.
  • Có 4 phương pháp để kiểm tra trạng thái Branch iOS SDK:-
  • Đảm bảo hoàn tất thiết lập cho cả hai nền tảng Android và iOS, đạt trạng thái 100% trên Dashboard.
Sau khi xác thực thành công tích hợp Branch iOS SDK, bạn có thể bắt đầu khám phá Branch Events hoặc Branch Deep Links.

Tạo Dynamic Links bằng Flutter và khởi tạo Link trong mã nguồn Flutter

Thiết lập tài liệu

Bước 1: Cấu hình Branch Dashboard

Bước 2: Đảm bảo chọn đúng nền tảng (iOS hoặc Android) cho ứng dụng:

Bước 3: Cấu hình Project theo nền tảng

Đối với tích hợp Android

Lưu ý: Bạn không cần cài đặt Branch Android SDK thủ công; plugin sẽ tự động xử lý việc này.

Đối với tích hợp iOS

Lưu ý: Bạn không cần cài đặt Branch iOS SDK thủ công; plugin sẽ tự động xử lý việc này.

Cách thiết lập thư viện Dynamic Links cho Flutter

  • Để sử dụng plugin, thêm flutter_branch_sdk làm dependency trong file pubspec.yaml..
  • Bạn có thể khởi tạo thư viện trong hàm main hoặc tại bất kỳ thời điểm nào trong quá trình ứng dụng đang chạy.
  • Bước tiếp theo là kiểm thử tích hợp Branch, có thể thực hiện từ hàm main hoặc tại bất kỳ thời điểm nào khi ứng dụng khởi chạy để bắt đầu lấy thông tin.
  • Đảm bảo khi ứng dụng khởi chạy, quá trình xác thực được thực hiện thành công và kết quả được ghi lại trong Flutter Debug Console
    • Android Debug log
    • iOS Debug log

Cách lắng nghe Dynamic Links trong Flutter

  • Để theo dõi lượt nhấp vào Deep Link và lấy dữ liệu liên quan, bạn cần thêm đoạn mã bên dưới.
  • Tùy thuộc vào dữ liệu nhận được, hãy cấu hình các thiết lập được sử dụng khi tạo Link để xử lý các bước tiếp theo sau khi đọc Link thành công.
  • Hàm addListener nên được gọi từ hàm main hoặc mỗi khi ứng dụng được mở. 

Cách tạo Link trong ứng dụng Flutter

  • Branch Universal Object chứa các nội dung mà bạn muốn chia sẻ.
  • Tạo Deep Link bên trong ứng dụng.

Cách tạo Link bằng API

  • Post API:

Kết quả Link

  • Mở trên Desktop
  • Mở trên ứng dụng

Tóm lại, việc tích hợp Branch.io Dynamic Links với ứng dụng Flutter mang đến một giải pháp hiệu quả để quản lý Deep Link và tăng cường mức độ tương tác của người dùng. Quy trình tích hợp bao gồm thiết lập Branch.io, cấu hình Flutter Plugin và triển khai cơ chế quản lý Link trong ứng dụng. Bằng cách tận dụng các tính năng của Branch.io, Developer có thể tăng khả năng thu hút người dùng, cải thiện tỷ lệ giữ chân và thu thập những thông tin giá trị về hành vi người dùng.