React Native SDK'da flow ve paywall getirme işlemini optimize edin

React Native’de güvenilir bir flow veya paywall getirme işlemi üç şeyi yapar: hızlı render eder, kitleye özel varyantı döndürür ve ağ yavaş olduğunda sorunsuz şekilde yedek içeriğe geçer. Aşağıdaki kurallar bu hedeflere ulaşmak için gereken zamanlama, önbellekleme ve yedek desenlerini kapsar.

Tip

Bu kurallar, adapty.activate() ve adapty.identify() işlemlerinin zaten tamamlandığını varsayar. Daha fazla bilgi için bkz. React Native SDK’da çağrı sırası.

Kurallar ve yaygın hatalar

Bunu yapBunu yapmaNeden
Göstereceğiniz placement’ı getirin ya da preloadFlows ile önbelleği ısıtın (SDK 4.3.0+).Başlatma sırasında kendi eşzamanlı getFlow çağrılarınızı dağıtın.Elle yazılmış bir prefetch patlaması JS thread’ini bloke eder ve siyah ekrana yol açar. preloadFlows bunun için tasarlanmıştır ve toplu işlemi tek bir çağrıda native SDK’ya gönderir.
activate çağrısından 1–2 saniye sonra ya da onLatestProfileLoad tetiklendikten sonra gibi, attribution’ın çözümlenme şansı bulduktan sonra getFlow isteği yapın.getFlow çağrısını kök bileşen mount’ında yapın.Attribution henüz gelmemiştir. Flow, varsayılan kitleye göre çözümlenir ve segmentleri ile ASA kişiselleştirmesini sessizce atlar.
Her placement için bir loadTimeoutMs belirleyin ve yedek paywall yapılandırın.getFlow için süresiz bekleyin.Zaman aşımı olmadan, bağlantısı zayıf kullanıcılar ağ çözümlenene kadar boş ekran görür ya da uygulamayı kapatır.

Özel paywall’lar ve ürünler hakkında daha fazla bilgi için fetchPolicy ve loadTimeoutMs parametre referansını Özel paywall’ları ve ürünleri getirme sayfasında, doğru placement’ı seçmek için ise Placement’lar sayfasında bulabilirsiniz.

Placement’leri önceden yükleme

Info

preloadFlows ve preloadFlowsForDefaultAudience, SDK sürüm 4.3.0’dan itibaren kullanılabilir.

preloadFlows, flow JSON’ını önceden önbelleğe alır — placement başına bir istek. Ardından her zamanki gibi kullanırsınız: flow için getFlow, görünümü için createFlowView.

fetchPolicy, daha sonraki bir getFlow çağrısının hangi katmanı önce okuyacağını belirler; önbelleğe erişip erişemeyeceğini değil:

  • 'return_cache_data_else_load' önce önceden yüklenmiş kopyayı okur ve yalnızca önbellekte hiçbir şey yoksa ağa gider. 'return_cache_data_if_not_expired_else_load' aynısını yapar, ancak kopya maxAgeSeconds değerinden daha yeni olduğu sürece.
  • Varsayılan olan 'reload_revalidating_cache_data' önce ağa gider ve istek başarısız olduğunda ya da zaman aşımına uğradığında önceden yüklenmiş kopyaya geri döner.

Her iki durumda da önceden yükleme işe yarar; ancak farklı biçimlerde: önbellek öncelikli politika isteği tamamen ortadan kaldırırken, varsayılan politika isteği korur ve başarısız olduğunda devreye girecek sıcak bir kopya elde eder.

Hangi placement’ların oturumda kullanılacağını bildiğinizde ancak henüz göstermek istemediğinizde kullanın — örneğin, activate ve identify tamamlandıktan hemen sonra, kullanıcının henüz dokunmadığı bir butonun arkasındaki flow için.

try {
  await adapty.preloadFlows(['onboarding', 'main_paywall'], {
    loadTimeoutMs: 5000,
  });
} catch (error) {
  // en az bir placement ön yükleme başarısız oldu
}

// Daha sonra, kullanıcı paywalle ulaştığında:
const flow = await adapty.getFlow('main_paywall', {
  fetchPolicy: 'return_cache_data_else_load',
});

Parametreler:

  • placementIds (zorunlu): önceden yüklenecek placement’lar.
  • loadTimeoutMs (isteğe bağlı): milisaniye cinsinden zaman aşımı. Varsayılan değeri 5000’dir; 1000’in altındaki değerler 1000’e yükseltilir. iOS’ta zaman aşımı tüm grup için geçerliyken Android’de her placement için ayrı ayrı uygulanır.

Bilinmesi gereken davranışlar:

  • Promise, yalnızca her placement denenip tamamlandıktan sonra reddedilir; hata, placement bazındaki başarısızlıkları bir arada toplar. Bir placement’taki başarısızlık diğerlerini durdurmaz; yüklenen placement’lar önbellekte kalır.
  • Bir placement zaman aşımına uğrar ya da ağ hatasıyla başarısız olursa SDK, o placement için varsayılan kitle varyasyonuna geri döner. Diğer hatalar olduğu gibi raporlanır.
  • Ön yükleme yalnızca önbelleği ısıtır. İçerik döndürmez — göstermek için yine getFlow çağırmanız gerekir.

Bir preload’un kapsadıkları

Bir flow, ekrana katmanlar hâlinde ulaşır. Preload, getFlow’un yaptığı gibi yalnızca ilk katmanı kapsar:

KatmanKim tarafından alınırPreload ile ısıtılır mı
Flow JSON — seçilen varyant, ürün kimlikleri ve remote configgetFlowEvet
UI düzeni — ekranın yapısı, stili ve metnicreateFlowViewHayır
Görseller, bir video öğesinin yerine geçen sabit kare dahilcreateFlowView, arka plandaHayır
Video dosyalarıEkran render edilirken sistem oynatıcısıSDK tarafından önbelleğe alınmaz

Dolayısıyla belirli bir layout için ilk createFlowView çağrısı, ön yükleme sonrasında bile bir ağ isteği gerektirir. Native SDK bu layout’u disk önbelleğinde tutar ve bu önbellek uygulama yeniden başlatmalarından etkilenmez; böylece maliyet her istekte değil, yalnızca ilk istekte oluşur.

Kitle segmentasyonunu atlama

Cache’i ısıtmak için kitle segmentasyonunu hiç beklemek istemiyorsanız, varsayılan kitle varyantını kullanın. Timeout almaz:

await adapty.preloadFlowsForDefaultAudience(['main_paywall']);

Uygulama paketinden ilk ekran medyasını göster

Bir flow, görselleri ve videoları Adapty’den indirir. İlk ekranın medyasını anında göstermek için bunları uygulama paketinden sunun. Bu, zaten gönderdiğiniz medyayı (örneğin mevcut bir native onboarding’in görsellerini) yeniden kullanmanın iyi bir yoludur.

  1. Flow & Paywall Builder’da görsel veya videoya özel medya ID’si belirleyin. Oraya yüklediğiniz dosya, yedek olarak kalır.
  2. Dosyayı yerel projelere ekleyin: iOS uygulama bundle’ı ve Android assets klasörü.
  3. Flow görünümünü oluştururken, customAssets içinde söz konusu ID için bundle’lanmış dosyayı geçin:
// "welcome_video", Flow & Paywall Builder'da ayarlanan özel medya kimliğidir
const bundledAssets: Record<string, AdaptyCustomAsset> = {
  'welcome_video': {
    type: 'video',
    fileLocation: {
      ios: { fileName: 'welcome.mp4' },
      android: { relativeAssetPath: 'videos/welcome.mp4' },
    },
  },
};

const view = await createFlowView(flow, { customAssets: bundledAssets });

Paketlenmiş dosyalar uygulamanızın indirme boyutunu artırır; bu nedenle yalnızca kullanıcıların ilk gördüğü medyayı paketleyin.

Paketlemediğiniz medyalar yine de anında görünür: flow’un düzeni, video için sabit kare dahil olmak üzere her görselin küçük, düşük çözünürlüklü bir kopyasını içerir ve tam dosya yüklenene kadar bunu gösterir.

customAssets referansının tamamı için bkz. Varlıkları özelleştirme.

Zayıf bağlantı için ayarlama

Sürekli zayıf bağlantının yaşandığı pazarlar için (kırsal bölgeler, toplu taşıma, yönlendirme sorunlarından etkilenen bölgeler):

  • İlk fetch dışındaki her fetch işleminde fetchPolicy: 'return_cache_data_else_load' ayarlayın.
  • Adapty Kontrol Paneli’ndeki her placement için bir yedek paywall yapılandırın.
  • loadTimeoutMs değerini 3–5 saniye olarak ayarlayın ve zaman aşımı gerçekleştiğinde yedek paywalli kabul edin.
  • Flow gösterimini getProfile() işlemine bağlamayın. Yavaş bir profilin arayüzü engellemesini önlemek için getFlow işlevini bağımsız olarak çağırın.