Sử dụng bản địa hóa và mã ngôn ngữ trong Capacitor SDK

Tại sao điều này quan trọng

Mã ngôn ngữ (locale code) được sử dụng khi Adapty chọn bản dịch cho một flow, và khi bạn đọc Remote Config cho một custom paywall.

Mã ngôn ngữ khá phức tạp và có thể khác nhau tùy nền tảng, vì vậy Adapty dựa trên một tiêu chuẩn nội bộ thống nhất cho mọi nền tảng được hỗ trợ. Hiểu được tiêu chuẩn đó sẽ giúp bạn dự đoán được bản dịch nào mà người dùng nhận được.

Tiêu chuẩn mã ngôn ngữ tại Adapty

Để mã hóa ngôn ngữ, Adapty sử dụng phiên bản chuẩn BCP 47 được điều chỉnh nhẹ: mỗi mã gồm các subtag viết thường, phân cách bằng dấu gạch ngang. Một số ví dụ: en (tiếng Anh), pt-br (tiếng Bồ Đào Nha (Brazil)), zh (tiếng Trung giản thể), zh-hant (tiếng Trung phồn thể).

Khớp mã locale

Khi Adapty tìm kiếm bản bản địa hóa phù hợp với locale của người dùng, quá trình diễn ra như sau:

Chuỗi locale được chuyển thành chữ thường và tất cả dấu gạch dưới (_) được thay thế bằng dấu gạch ngang (-)
Adapty tìm bản địa hóa có mã locale khớp hoàn toàn
Nếu không tìm thấy, Adapty lấy chuỗi con trước dấu gạch ngang đầu tiên (pt từ pt-br) và tìm bản địa hóa phù hợp
Nếu vẫn không tìm thấy, Adapty trả về bản địa hóa mặc định en

Nhờ vậy, 'pt_BR', pt-BR và pt-br đều trỏ đến cùng một bản địa hóa.

Triển khai bản địa hóa

Trong SDK v4, bạn không cần truyền mã ngôn ngữ khi lấy một flow.

Paywall dùng Flow Builder và Paywall Builder: Adapty tự động xác định bản địa hóa dựa trên thiết bị và các bản địa hóa bạn đã cấu hình trong builder. Render flow bằng createFlowView — không cần mã ngôn ngữ.
Paywall tùy chỉnh (remote config): getFlow trả về tất cả các bản địa hóa đã cấu hình trong flow.remoteConfigs. Mỗi mục có một mã lang và một đối tượng data. Hãy chọn mục phù hợp với người dùng, kèm theo logic dự phòng của riêng bạn:


const flow = await adapty.getFlow({ placementId: 'placement_id' });
const config = flow.remoteConfigs?.find((c) => c.lang === 'en') ?? flow.remoteConfigs?.[0];
// read your values from config?.data

Các quy tắc khớp mã ngôn ngữ ở trên mô tả cách Adapty chuẩn hóa các mã lang được lưu trữ trên mỗi remote config.

Tại sao điều này quan trọng

Có một số trường hợp mà mã ngôn ngữ (locale code) đóng vai trò quan trọng — ví dụ, khi bạn cần lấy đúng paywall cho ngôn ngữ hiện tại của ứng dụng.

Vì mã ngôn ngữ khá phức tạp và có thể khác nhau tùy nền tảng, chúng tôi sử dụng một tiêu chuẩn nội bộ thống nhất cho tất cả các nền tảng được hỗ trợ. Tuy nhiên, chính vì sự phức tạp đó, điều quan trọng là bạn cần hiểu rõ mình đang gửi gì lên server để nhận đúng bản ngôn ngữ, và quá trình xử lý tiếp theo diễn ra như thế nào — để luôn nhận được kết quả như mong đợi.

Tiêu chuẩn mã ngôn ngữ tại Adapty

Đối với mã ngôn ngữ, Adapty sử dụng phiên bản có chỉnh sửa nhẹ của tiêu chuẩn BCP 47: mỗi mã bao gồm các subtag viết thường, phân tách bằng dấu gạch ngang. Một số ví dụ: en (tiếng Anh), pt-br (tiếng Bồ Đào Nha (Brazil)), zh (tiếng Trung giản thể), zh-hant (tiếng Trung phồn thể).

Khớp mã ngôn ngữ

Khi Adapty nhận được lệnh gọi từ SDK phía client kèm theo mã ngôn ngữ và bắt đầu tìm kiếm bản bản địa hóa tương ứng của paywall, quá trình diễn ra như sau:

Chuỗi ngôn ngữ đầu vào được chuyển thành chữ thường và tất cả dấu gạch dưới (_) được thay thế bằng dấu gạch ngang (-)
Hệ thống tìm kiếm bản bản địa hóa có mã ngôn ngữ khớp hoàn toàn
Nếu không tìm thấy, hệ thống lấy chuỗi con trước dấu gạch ngang đầu tiên (ví dụ: pt từ pt-br) và tìm kiếm bản bản địa hóa khớp với chuỗi đó
Nếu vẫn không tìm thấy, hệ thống trả về bản bản địa hóa mặc định en Theo cách này, một thiết bị iOS gửi 'pt_BR', một thiết bị Android gửi pt-BR, và một thiết bị khác gửi pt-br sẽ đều nhận được kết quả giống nhau.

Triển khai bản địa hóa: cách được khuyến nghị

Nếu bạn đang tìm hiểu về bản địa hóa, có thể bạn đã làm việc với các file chuỗi đã được bản địa hóa trong dự án của mình. Nếu vậy, chúng tôi khuyến nghị bạn thêm một cặp key-value chứa mã locale Adapty tương ứng vào mỗi file bản địa hóa. Sau đó, trích xuất giá trị của key đó khi gọi SDK của chúng tôi, như sau:

// 1. Modify your localization files (e.g., using react-i18next)

/*
en.json
*/
{
  "adapty_paywalls_locale": "en"
}

/*
es.json
*/
{
  "adapty_paywalls_locale": "es"
}

/*
pt-BR.json
*/
{
  "adapty_paywalls_locale": "pt-br"
}

// 2. Extract and use the locale code

const MyComponent = () => {
  const { t } = useTranslation();
  
  const fetchPaywall = async () => {
    const locale = t('adapty_paywalls_locale');
    // pass locale code to adapty.getPaywall or adapty.getPaywallForDefaultAudience method
    const paywall = await adapty.getPaywallForDefaultAudience('placement_id', locale);
  };
};

That way you can ensure you’re in full control of what localization will be retrieved for every user of your app.

Triển khai bản địa hóa theo cách khác

Bạn có thể đạt được kết quả tương tự (nhưng không hoàn toàn giống nhau) mà không cần phải khai báo rõ mã ngôn ngữ cho từng bản địa hóa. Thay vào đó, bạn có thể lấy mã ngôn ngữ từ các đối tượng khác mà nền tảng của bạn cung cấp, như sau:


const getLocaleCode = () => {
  if (Capacitor.getPlatform() === 'ios') {
    return navigator.language || 'en';
  } else {
    return navigator.language || 'en';
  }
};

const fetchPaywall = async () => {
  const locale = getLocaleCode();
  // pass locale code to adapty.getPaywall or adapty.getPaywallForDefaultAudience method
  const paywall = await adapty.getPaywallForDefaultAudience('placement_id', locale);
};

Lưu ý rằng chúng tôi không khuyến nghị cách tiếp cận này vì một số lý do:

Trên iOS, ngôn ngữ ưu tiên và locale hiện tại không giống nhau. Nếu bạn muốn localization được chọn đúng, bạn cần dựa vào logic của Apple — hoạt động tự động nếu bạn dùng cách được khuyến nghị với các file chuỗi đã được bản địa hóa — hoặc tự tái tạo logic đó.
Rất khó đoán chính xác server của Adapty sẽ nhận được gì. Ví dụ, trên iOS, thiết bị có thể trả về một locale như ar_OM@numbers='latn' và gửi nó lên server của chúng tôi. Với lệnh gọi này, bạn sẽ không nhận được bản địa hóa ar-om như mong đợi, mà thay vào đó là ar — điều này nhiều khả năng không phải kết quả bạn muốn. Should you decide to use this approach anyway — make sure you’ve covered all the relevant use cases.