Capacitor SDK'da remote config ile tasarlanmış paywall'u render etme

Remote config kullanarak bir flow’u özelleştirdiyseniz, kullanıcılara göstermek için mobil uygulamanızın kodunda render işlemini kendiniz uygulamanız gerekir. Remote config ihtiyaçlarınıza göre esneklik sunduğundan, neleri dahil edeceğinizi ve flow görünümünüzün nasıl görüneceğini siz belirlersiniz. Remote config aracılığıyla yapılandırılmış özel flow’unuzu sergileyebilmeniz için remote configuration’ı getirmeye yönelik bir metot sunuyoruz.

Flow remote config’i alma ve sunma

v4’te bir flow, remoteConfigs dizisinde yapılandırılmış her dil için bir AdaptyRemoteConfig girişi taşır. Kullanıcının tercihiyle eşleşen dili seçin, ardından ihtiyacınız olan değerleri data alanından okuyun.


try {
  const flow = await adapty.getFlow({ placementId: 'YOUR_PLACEMENT_ID' });
  const config = flow.remoteConfigs?.find((c) => c.lang === 'en')
    ?? flow.remoteConfigs?.[0];
  const headerText = config?.data?.['header_text'];
} catch (error) {
  console.error('Failed to fetch flow:', error);
}

Bu noktada, gerekli tüm değerleri aldıktan sonra bunları görsel olarak çekici bir sayfada render edip bir araya getirme zamanı gelmiştir. Tasarımın farklı mobil ekran boyutlarına ve yönlerine uyum sağladığından emin olun; böylece farklı cihazlarda sorunsuz ve kullanıcı dostu bir deneyim sunabilirsiniz.

Adapty analitiğinin huni ve A/B testi verilerini toplayabilmesi için aşağıda açıklandığı gibi paywall görüntüleme etkinliğini kaydettiğinizden emin olun.

Flow’u görüntüledikten sonra satın alma akışını kurmaya devam edin. Kullanıcı bir satın alma işlemi gerçekleştirdiğinde, flow’unuzdaki ürünle birlikte .makePurchase() metodunu çağırmanız yeterlidir. .makePurchase() metodu hakkında ayrıntılı bilgi için Satın alma yapma bölümünü okuyun.

Yedek paywall olarak bir yedek paywall oluşturmanızı öneririz. Bu yedek, internet bağlantısı olmadığında veya önbellek mevcut olmadığında kullanıcıya gösterilir ve bu durumlarda bile sorunsuz bir deneyim sağlar.

Flow görüntüleme olaylarını izleme

Adapty, flow’larınızın performansını ölçmenize yardımcı olur. Satın alma verilerini otomatik olarak toplarken, flow görüntülemelerini kaydetmek için sizin müdahaleniz gerekir; çünkü bir kullanıcının flow’u ne zaman gördüğünü yalnızca siz bilebilirsiniz.

Bir flow görüntüleme olayını kaydetmek için .logShowFlow({ flow }) metodunu çağırmanız yeterlidir; bu, huniler ve A/B testlerindeki paywall metriklerinize yansıyacaktır.

Flow Builder veya Paywall Builder tarafından oluşturulan flow’ları ya da paywall’ları görüntülüyorsanız .logShowFlow({ flow }) çağırmanıza gerek yoktur. Bu durumlarda Adapty görüntülemeleri otomatik olarak takip eder.


await adapty.logShowFlow({ flow });

İstek parametreleri:

Parametre	Varlık	Açıklama
flow	zorunlu	`adapty.getFlow({ placementId })` aracılığıyla elde edilen bir `AdaptyFlow` nesnesi.

Remote config kullanarak bir paywall özelleştirdiyseniz, bunu kullanıcılara göstermek için mobil uygulamanızın kodunda render işlemini kendiniz uygulamanız gerekir. Remote config, ihtiyaçlarınıza göre esneklik sunduğundan, paywall görünümünüzde nelerin yer alacağına ve nasıl görüneceğine siz karar verirsiniz. Remote config aracılığıyla yapılandırılmış özel paywall’ınızı gösterebilmeniz için remote configuration’ı çekmeye yarayan bir metot sunuyoruz.

Paywall remote config’ini alın ve gösterin

Bir paywallın remote config’ini almak için remoteConfig özelliğine erişin ve ihtiyacınız olan değerleri çıkarın.


try {
  const paywall = await adapty.getPaywall({ 
    placementId: 'YOUR_PLACEMENT_ID',
    params: {
      fetchPolicy: 'reload_revalidating_cache_data', // Load from server, fallback to cache
      loadTimeoutMs: 5000 // 5 second timeout
    }
  });
  const headerText = paywall.remoteConfig?.data?.['header_text'];
} catch (error) {
  console.error('Failed to fetch paywall:', error);
}

Bu noktada, gerekli tüm değerleri aldıktan sonra bunları görsel olarak çekici bir sayfada render edip bir araya getirme zamanı gelmiştir. Tasarımın farklı mobil telefon ekranlarına ve yönelimlerine uyum sağladığından emin olun; bu sayede farklı cihazlarda sorunsuz ve kullanıcı dostu bir deneyim sunulur.

Adapty analitiğinin funnel’lar ve A/B testleri için bilgi toplayabilmesi amacıyla, aşağıda açıklandığı şekilde paywall görüntüleme olayını kaydettiğinizden emin olun.

Paywallı gösterme işlemini tamamladıktan sonra satın alma akışını kurmaya devam edin. Kullanıcı bir satın alma yaptığında, paywallınızdaki ürünle birlikte .makePurchase() metodunu çağırmanız yeterlidir. .makePurchase() metodu hakkında ayrıntılı bilgi için Satın alma yapma bölümünü okuyun.

Yedek paywall olarak adlandırılan bir yedek paywall oluşturmanızı öneririz. Bu yedek, internet bağlantısı olmadığında veya önbellek mevcut olmadığında kullanıcıya gösterilir ve bu durumlarda bile sorunsuz bir deneyim sağlar.

Paywall görüntüleme olaylarını takip edin

Adapty, paywalllarınızın performansını ölçmenize yardımcı olur. Satın almaları otomatik olarak takip ederken, paywall görüntülemelerini kaydetmek için sizin müdahaleniz gerekir; çünkü bir müşterinin paywallı ne zaman gördüğünü yalnızca siz bilirsiniz.

Paywall görüntüleme olayını kaydetmek için .logShowPaywall(paywall) metodunu çağırmanız yeterlidir; bu, dönüşüm hunileri ve A/B testlerindeki paywall metriklerinize yansıyacaktır.

Paywall builder ile oluşturulan paywallları görüntülüyorsanız .logShowPaywall(paywall) çağrısı yapmanıza gerek yoktur.


try {
  await adapty.logShowPaywall({ paywall });
} catch (error) {
  console.error('Failed to log paywall view:', error);
}

İstek parametreleri:

Parametre	Zorunluluk	Açıklama
paywall	zorunlu	Bir `AdaptyPaywall` nesnesi.