Sử dụng localizations và locale codes trong React Native SDK

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

Mã ngôn ngữ (locale code) được dùng khi Adapty chọn bản địa hóa cho một flow và khi bạn đọc Remote Config cho một paywall tùy chỉnh.

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 sử dụng một chuẩn nội bộ thống nhất trên mọi nền tảng được hỗ trợ. Hiểu được chuẩn đó sẽ giúp bạn dự đoán người dùng sẽ nhận được bản địa hóa nào.

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

Đối với mã ngôn ngữ, Adapty sử dụng tiêu chuẩn BCP 47 được chỉnh sửa nhẹ: mỗi mã bao gồm các subtag viết thường, phân cách bằng dấu gạch nối. 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 tìm kiếm bản địa hóa phù hợp với ngôn ngữ của người dùng, quá trình diễn ra như sau:

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

Theo cách này, 'pt_BR', pt-BR và pt-br đều được ánh xạ đế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 tải 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ã lang và đối tượng data. 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('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ã locale ở trên mô tả cách Adapty chuẩn hóa các mã lang được lưu trên mỗi remote config.

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

Có một vài tình huống mà mã locale phát huy vai trò — chẳng hạn, khi bạn cần lấy đúng paywall theo ngôn ngữ hiện tại của ứng dụng.

Vì mã locale khá phức tạp và có thể khác nhau tùy từng nền tảng, chúng tôi sử dụng một tiêu chuẩn nội bộ chung cho tất cả các nền tảng được hỗ trợ. Tuy nhiên, chính vì sự phức tạp đó, bạn cần hiểu rõ mình đang gửi gì lên server để nhận đúng bản địa hóa, và điều gì xảy ra tiếp theo — để 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 một phiên bản được điều chỉnh nhẹ của tiêu chuẩn BCP 47: mỗi mã gồm các subtag viết thường, được phân tách bằng dấu gạch ngang. Một vài 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 cùng với mã ngôn ngữ và bắt đầu tìm kiếm bản dịch tương ứng của paywall, quá trình diễn ra như sau:

1. 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 (-)
2. Chúng tôi tìm kiếm bản dịch có mã ngôn ngữ khớp hoàn toàn
3. Nếu không tìm thấy, chúng tôi lấy chuỗi con trước dấu gạch ngang đầu tiên (pt trong trường hợp pt-br) và tìm kiếm bản dịch khớp với chuỗi con đó
4. Nếu vẫn không tìm thấy, chúng tôi trả về bản dịch 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ẽ nhận được cùng một kết quả.

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 tệp chuỗi đã được bản địa hóa trong dự án của mình. Trong trường hợp đó, chúng tôi khuyến nghị bạn thêm một cặp key-value với mã locale Adapty tương ứng vào mỗi tệp bản địa hóa. Sau đó, trích xuất giá trị của key đó khi gọi SDK, 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);
  };
};

Bằng cách này, bạn có thể đảm bảo rằng mình hoàn toàn kiểm soát được bản dịch nào sẽ được truy xuất cho từng người dùng trong ứng dụng của bạn.

Triển khai bản địa hóa: 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 xác định rõ mã ngôn ngữ cho từng bản địa hóa. Thay vào đó, bạn có thể trích xuất mã ngôn ngữ từ thiết bị, ví dụ thông qua react-native-localize:

const fetchPaywall = async () => {
  // getLocales() returns the user's preferred locales in BCP-47 format (e.g., 'en-US', 'pt-BR')
  const locale = RNLocalize.getLocales()[0].languageTag;
  // 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:

1. Trên iOS, ngôn ngữ ưu tiên và locale khu vực hiện tại không giống nhau. Nếu bạn muốn bản địa hóa được chọn đúng, bạn cần dựa vào logic phân giải của Apple — hoạt động tự động khi bạn dùng cách tiếp cận được khuyến nghị với các file chuỗi đã bản địa hóa — hoặc tự xây dựng lại logic đó.
2. Locale của thiết bị có thể không khớp với bất kỳ bản địa hóa nào bạn đã cấu hình trong Adapty. Trong trường hợp đó, SDK sẽ dùng kết quả khớp theo subtag đầu tiên, hoặc cuối cùng là en — có thể không phải ngôn ngữ mặc định bạn muốn hiển thị cho người dùng đó. Should you decide to use this approach anyway — make sure you’ve covered all the relevant use cases.