Flow ve paywall alma - Capacitor

Flow veya Paywall Builder paywallınızı tasarladıktan sonra, onu mobil uygulamanızda gösterebilirsiniz. İlk adım, aşağıda açıklandığı gibi placement ile ilişkili flow veya paywall’ı ve görünüm yapılandırmasını almaktır.

Bu konunun flow’lar ve Paywall Builder ile özelleştirilmiş paywalllar için geçerli olduğunu lütfen unutmayın. Paywalllarınızı manuel olarak uyguluyorsanız, Mobil uygulamanızda remote config paywallları için paywallları ve ürünleri getirme konusuna bakın.

Mobil uygulamanızda flow’ları ve paywall’ları görüntülemeye başlamadan önce (genişletmek için tıklayın)

1. Adapty Kontrol Paneli’nde ürünlerinizi oluşturun.
2. Adapty Kontrol Paneli’nde bir flow/paywall oluşturun ve ürünleri ekleyin.
3. Adapty Kontrol Paneli’nde placement’lar oluşturun ve flow/paywall’ınızı ekleyin.
4. Mobil uygulamanıza Adapty SDK’yı yükleyin.

Flow/paywall’ı getirme

Flow Builder veya Paywall Builder ile bir flow ya da paywall tasarladıysanız, bunu kullanıcıya göstermek için mobil uygulama kodunuzda ayrıca render etmeniz gerekmez. Böyle bir flow veya paywall, içinde neyin ve nasıl gösterileceği bilgisini zaten barındırır. Bununla birlikte, placement üzerinden ID’sini, görünüm yapılandırmasını almanız ve ardından mobil uygulamanızda sunmanız gerekir. Flow veya paywall’ı mümkün olduğunca erken — ideal olarak sunmadan çok önce — çekin ve view’unu oluşturun. createFlowView metodu, view yapılandırmasını yükler ve arka planda görsellerini indirip önbelleğe almaya başlar. Bu metodu ne kadar erken çağırırsanız, indirmelerin tamamlanması için o kadar çok zaman kalır. Flow veya paywall’ı sunduğunuzda, yapılandırma ve görseller zaten önbellekte hazır olabilir.

Bir flow veya paywall almak için getFlow metodunu kullanın:

try {
  const flow = await adapty.getFlow({
    placementId: 'YOUR_PLACEMENT_ID',
  });
  // istenen flow/paywall
} catch (error) {
  // hatayı işle
}

Parametreler:

Parametre	Zorunluluk	Açıklama
placementId	zorunlu	İstenen Placement’ın tanımlayıcısı. Bu, Adapty Kontrol Paneli’nde bir placement oluştururken belirttiğiniz değerdir.
fetchPolicy	varsayılan: 'reload_revalidating_cache_data'	İsteğe bağlı params nesnesinin içinde iletilir. Varsayılan olarak SDK, sunucudan veri yüklemeye çalışır ve başarısız olursa önbelleğe alınmış veriyi döndürür. Bu varyantı kullanmanızı öneririz, çünkü kullanıcılarınızın her zaman en güncel verilere ulaşmasını sağlar. Ancak kullanıcılarınızın kararsız bir internet bağlantısıyla karşılaştığını düşünüyorsanız, mevcut olması durumunda önbelleğe alınmış veriyi döndürmek için 'return_cache_data_else_load' kullanmayı değerlendirin. Bu senaryoda kullanıcılar her zaman en güncel verilere ulaşamayabilir; ancak internet bağlantıları ne kadar kesintili olursa olsun daha hızlı yükleme süreleri yaşarlar. Önbellek düzenli olarak güncellenir, bu nedenle ağ isteklerinden kaçınmak amacıyla oturum sırasında güvenle kullanılabilir. Önbelleğin uygulama yeniden başlatıldığında bozulmadan kaldığını ve yalnızca uygulama yeniden yüklendiğinde veya manuel temizleme yapıldığında silindiğini unutmayın. Adapty SDK, paywall’ları yerel olarak iki katmanda depolar: yukarıda açıklanan düzenli olarak güncellenen önbellek ve yedek paywall’lar. Paywall’ları daha hızlı getirmek için CDN, CDN’ye ulaşılamadığı durumlarda ise bağımsız bir yedek sunucu kullanırız. Bu sistem, paywall’larınızın her zaman en güncel sürümünü almanızı sağlarken internet bağlantısının yetersiz olduğu durumlarda bile güvenilirliği koruyacak şekilde tasarlanmıştır.
loadTimeoutMs	varsayılan: 5 sn	İsteğe bağlı params nesnesinin içinde iletilir. Bu değer, söz konusu yöntem için zaman aşımını sınırlar. Zaman aşımına ulaşılırsa önbelleğe alınmış veri veya yerel yedek döndürülür. Nadir durumlarda bu yöntemin loadTimeoutMs içinde belirtilenden biraz daha geç zaman aşımına uğrayabileceğini unutmayın; çünkü işlem, arka planda farklı isteklerden oluşabilir.
Ürün ID’lerini kodun içine gömmeyин. Kodun içine gömmeniz gereken tek şey placement ID’sidir. Flow’lar ve paywall’lar uzaktan yapılandırıldığından, ürün sayısı ve mevcut teklifler her an değişebilir. Uygulamanız bu değişiklikleri dinamik olarak ele almalıdır; bir paywall bugün iki ürün döndürüyorsa ve yarın üç ürün döndürüyorsa, kod değişikliği yapmadan hepsini gösterin.

Yanıt parametreleri:

Parametre	Açıklama
Flow	Flow’un tanımlayıcılarını (id, variationId), adını, placement’ını, paywall varyasyonlarını (paywalls) ve remote config’leri (remoteConfigs) içeren bir AdaptyFlow nesnesi.

Görünüm yapılandırmasını getir

Placement Flow Builder veya Paywall Builder ile tasarlandıysa, Adapty arayüzü sizin için oluşturur. createFlowView ile görünümü oluşturun, ardından flow veya paywall’ı gösterin. Placement, Builder arayüzü olmayan özel bir paywall ise bunun yerine remote config paywall olarak işleyin. Capacitor SDK’sında, view yapılandırmasını önceden almanıza gerek yoktur; createFlowView metodunu doğrudan çağırabilirsiniz.

try {
  const view = await createFlowView(flow);
} catch (error) {
  // handle the error
}

Parametreler:

Parametre	Zorunluluk	Açıklama
flow	zorunlu	İstenen flow/paywall için controller elde etmek üzere kullanılan AdaptyFlow nesnesi.
customTags	opsiyonel	Özel etiketlerin ve çözümlenmiş değerlerinin bir sözlüğünü tanımlar. Özel etiketler, içerikteki yer tutucular olarak işlev görür ve flow/paywall içinde kişiselleştirilmiş içerik sunmak amacıyla belirli dizelerle dinamik olarak değiştirilir. Daha fazla ayrıntı için Paywall Builder’da özel etiketler konusuna bakın.
prefetchProducts	opsiyonel	Ürünlerin ekranda gösterilme zamanlamasını optimize etmek için etkinleştirin. true olduğunda AdaptyUI gerekli ürünleri otomatik olarak çeker. Varsayılan: true.
android.enableSafeArea	opsiyonel	Yalnızca Android (iOS’ta yoksayılır). android anahtarı altında yer alır. true olduğunda flow görünümü güvenli alan dolgularını uygular. Varsayılan: true. Varsayılan değer çoğu durum için uygundur.

Görünümü elde ettikten sonra flow/paywall’ı gösterin.

Varsayılan kitle için flow veya paywall getirerek daha hızlı yükleme sağlayın

Genellikle flow’lar ve paywall’lar neredeyse anında getirilir, bu nedenle bu süreci hızlandırmak için endişelenmenize gerek yoktur. Ancak çok sayıda kitle ve placement’ınız varsa ve kullanıcılarınızın internet bağlantısı zayıfsa, bir flow veya paywall getirmek istediğinizden daha uzun sürebilir. Bu gibi durumlarda, hiçbir şey göstermemek yerine sorunsuz bir kullanıcı deneyimi sağlamak amacıyla varsayılan bir flow veya paywall görüntülemek isteyebilirsiniz. Bunu çözmek için, belirtilen placement’ın All Users kitlesi için flow veya paywall’ı getiren getFlowForDefaultAudience metodunu kullanabilirsiniz. Ancak şunu anlamak kritik önem taşır: önerilen yaklaşım, yukarıdaki Flow/paywall getirme bölümünde ayrıntılı olarak açıklanan getFlow metoduyla flow veya paywall’ı getirmektir.

try {
  const flow = await adapty.getFlowForDefaultAudience({
    placementId: 'YOUR_PLACEMENT_ID',
  });
  // the requested flow/paywall
} catch (error) {
  // handle the error
}

Parametre	Zorunluluk	Açıklama
placementId	zorunlu	Placement tanımlayıcısı. Adapty Kontrol Paneli’nde bir placement oluştururken belirttiğiniz değerdir.
fetchPolicy	varsayılan: 'reload_revalidating_cache_data'	İsteğe bağlı params nesnesi içinde iletilir. SDK varsayılan olarak sunucudan veri yüklemeye çalışır; hata durumunda önbellekteki veriyi döner. Bu seçeneği öneriyoruz çünkü kullanıcılarınızın her zaman en güncel veriye erişmesini sağlar. Ancak kullanıcılarınızın kararsız bir internet bağlantısıyla çalıştığını düşünüyorsanız, önbellekte veri varsa onu döndürmek için 'return_cache_data_else_load' kullanmayı değerlendirin. Bu senaryoda kullanıcılar en son veriyi alamayabilir; ama internet bağlantısı ne kadar tutarsız olursa olsun daha hızlı yükleme süreleri yaşarlar. Önbellek düzenli olarak güncellendiğinden, ağ isteklerini azaltmak amacıyla oturum boyunca güvenle kullanılabilir. Önbelleğin uygulama yeniden başlatıldığında silinmediğini unutmayın; yalnızca uygulama kaldırılıp yeniden yüklendiğinde veya manuel temizlik yapıldığında temizlenir.

Varlıkları özelleştirme

Flow/paywall’ınızdaki görselleri ve videoları özelleştirmek için özel varlıkları uygulayın.

Hero görseller ve videolar, önceden tanımlanmış ID’lere sahiptir: hero_image ve hero_video. Özel bir varlık paketinde bu öğeleri ID’leri aracılığıyla hedefler ve davranışlarını özelleştirirsiniz.

Diğer görseller ve videolar için Adapty kontrol panelinde özel bir ID belirlemeniz gerekir.

Örneğin şunları yapabilirsiniz:

• Bazı kullanıcılara farklı bir görsel veya video göstermek.
• Uzaktaki ana görsel yüklenirken yerel bir önizleme görseli göstermek.
• Video oynatılmadan önce bir önizleme görseli göstermek. İşte özel varlıkları basit bir sözlük aracılığıyla nasıl sağlayabileceğinize dair bir örnek:

const customAssets: Record<string, AdaptyCustomAsset> = {
  'custom_image': { type: 'image', relativeAssetPath: 'custom_image.png' },
  'hero_video': {
    type: 'video',
    fileLocation: {
      ios: { fileName: 'custom_video.mp4' },
      android: { relativeAssetPath: 'videos/custom_video.mp4' }
    }
  }
};

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

Adapty Kontrol Paneli’ndeki yeni Paywall Builder ile paywallınızın görsel kısmını tasarladıktan sonra, onu mobil uygulamanızda görüntüleyebilirsiniz. Bu süreçteki ilk adım, aşağıda açıklandığı gibi placement ile ilişkili paywallı ve görünüm yapılandırmasını almaktır. Lütfen bu konunun Paywall Builder ile özelleştirilmiş paywallları kapsadığını unutmayın. Remote config paywalllarını getirme hakkında bilgi için Mobil uygulamanızda remote config paywallları için paywall ve ürünleri getirme konusuna bakın.

Mobil uygulamanızda paywall göstermeye başlamadan önce (genişletmek için tıklayın)

1. Adapty Kontrol Paneli’nde ürünlerinizi oluşturun.
2. Adapty Kontrol Paneli’nde bir paywall oluşturun ve ürünleri ekleyin.
3. Adapty Kontrol Paneli’nde placement’lar oluşturun ve paywall’ınızı ekleyin.
4. Mobil uygulamanıza Adapty SDK yükleyin.

Paywall Builder ile Tasarlanmış Paywall’ı Getirme

Paywall Builder ile bir paywall tasarladıysanız, bunu kullanıcıya göstermek için mobil uygulama kodunuzda render etmeniz gerekmez. Böyle bir paywall, hem gösterilecek içeriği hem de nasıl gösterileceğini içerir. Bununla birlikte, paywall’ın ID’sini placement aracılığıyla, görünüm yapılandırmasını ise ayrıca almanız ve ardından mobil uygulamanızda sunmanız gerekir. En iyi performansı sağlamak için, paywall’u ve onun görünüm yapılandırmasını mümkün olduğunca erken almanız kritik önem taşır; böylece görseller kullanıcıya sunulmadan önce indirilmesi için yeterli zaman olur.

Bir paywall almak için getPaywall metodunu kullanın:

try {
  const paywall = await adapty.getPaywall({
    placementId: 'YOUR_PLACEMENT_ID',
    locale: 'en',
  });
  // istenen paywall
} catch (error) {
  // hatayı işle
}

Parametreler:

Parametre	Zorunluluk	Açıklama
placementId	zorunlu	İstenen Placement’ın tanımlayıcısı. Bu, Adapty Kontrol Paneli’nde bir placement oluştururken belirttiğiniz değerdir.
locale	isteğe bağlı varsayılan: en	Paywall yerelleştirmesinin tanımlayıcısı. Bu parametrenin, eksi (-) karakteriyle ayrılmış bir veya iki alt etiket içeren bir dil kodu olması beklenir. İlk alt etiket dil için, ikincisi ise bölge için kullanılır. Örnek: en İngilizce anlamına gelir, pt-br Brezilya Portekizcesini temsil eder. Yerel ayar kodları ve bunların nasıl kullanılmasını önerdiğimiz hakkında daha fazla bilgi için Yerelleştirmeler ve yerel ayar kodları bölümüne bakın.
params	isteğe bağlı	Paywall’u getirmek için ek parametreler.
Ürün ID’lerini sabit kodlamayın. Sabit kodlamanız gereken tek ID, placement ID’sidir. Paywall’lar uzaktan yapılandırıldığından, ürün sayısı ve mevcut teklifler her an değişebilir. Uygulamanız bu değişiklikleri dinamik olarak ele almalıdır; bir paywall bugün iki ürün, yarın üç ürün döndürüyorsa, kod değişikliği yapmadan hepsini göstermelidir.

Yanıt parametreleri:

Parametre	Açıklama
Paywall	Ürün kimliklerinin listesini, paywall tanımlayıcısını, remote config’i ve diğer birçok özelliği içeren bir AdaptyPaywall nesnesidir.

Paywall Builder ile tasarlanmış paywall’ın görünüm konfigürasyonunu alma

Paywall’ı aldıktan sonra, Paywall Builder kullanılarak oluşturulduğunu belirten ViewConfiguration içerip içermediğini kontrol edin. Bu, paywall’ı nasıl göstereceğiniz konusunda size yol gösterecektir. ViewConfiguration mevcutsa Paywall Builder paywall’ı olarak işleyin; değilse, remote config paywall olarak ele alın.

Capacitor SDK’da, view configuration’ı manuel olarak önceden almadan doğrudan createPaywallView metodunu çağırın.

if (paywall.hasViewConfiguration) {
  try {
    const view = await createPaywallView(paywall);
  } catch (error) {
    // handle the error
  }
} else {
  // use your custom logic
}

Parametreler:

Parametre	Zorunluluk	Açıklama
paywall	zorunlu	İstenen paywall için bir controller elde etmek üzere kullanılan AdaptyPaywall nesnesi.
customTags	isteğe bağlı	Özel etiketlerin ve çözümlenmiş değerlerinin bir sözlüğünü tanımlar. Özel etiketler, paywall içeriğinde yer tutucu olarak işlev görür ve paywall içinde kişiselleştirilmiş içerik sunmak için belirli dizelerle dinamik olarak değiştirilir. Daha fazla ayrıntı için Paywall builder’da özel etiketler konusuna bakın.
prefetchProducts	isteğe bağlı	Ekranda ürünlerin görüntülenme zamanlamasını optimize etmek için etkinleştirin. true olarak ayarlandığında AdaptyUI, gerekli ürünleri otomatik olarak getirir. Varsayılan: false.

Görünümü elde ettikten sonra paywalli gösterin.

Varsayılan kitle için paywallı daha hızlı getir

Genellikle paywalllar neredeyse anında getirilir, bu yüzden bu süreci hızlandırmak için endişelenmenize gerek yoktur. Ancak çok sayıda kitle ve paywallınız varsa ve kullanıcılarınızın internet bağlantısı zayıfsa, bir paywallı getirmek istediğinizden daha uzun sürebilir. Bu durumlarda, hiç paywall göstermemek yerine sorunsuz bir kullanıcı deneyimi sağlamak için varsayılan bir paywall görüntülemek isteyebilirsiniz. Bunu çözmek için, belirtilen placement’ın paywall’ını All Users kitlesi için getiren getPaywallForDefaultAudience metodunu kullanabilirsiniz. Ancak şunu bilmeniz önemlidir: önerilen yaklaşım, paywall’ı yukarıdaki Paywall Bilgisini Getirme bölümünde açıklandığı gibi getPaywall metoduyla getirmektir.

try {
  const paywall = await adapty.getPaywallForDefaultAudience({
    placementId: 'YOUR_PLACEMENT_ID',
    locale: 'en',
  });
  // istenen paywall
} catch (error) {
  // hatayı işleyin
}

Parametre	Zorunluluk	Açıklama
placementId	zorunlu	Placement tanımlayıcısı. Adapty Kontrol Paneli’nde bir placement oluştururken belirttiğiniz değerdir.
locale	isteğe bağlı varsayılan: en	Paywall yerelleştirmesinin tanımlayıcısı. Bu parametre, eksi (-) karakteriyle ayrılmış bir veya daha fazla alt etiketten oluşan bir dil kodu olmalıdır. İlk alt etiket dili, ikincisi ise bölgeyi belirtir. Örnek: en İngilizce, pt-br ise Brezilya Portekizcesini temsil eder. Yerel ayar kodları ve bunların nasıl kullanılması gerektiği hakkında daha fazla bilgi için Yerelleştirmeler ve yerel ayar kodları bölümüne bakın.
params	isteğe bağlı	Paywall’ı getirmek için ek parametreler.

Varlıkları özelleştirin

Paywallınızdaki görselleri ve videoları özelleştirmek için özel varlıkları uygulayın.

Hero görseller ve videoların önceden tanımlanmış ID’leri vardır: hero_image ve hero_video. Özel bir varlık paketinde bu öğeleri ID’lerine göre hedefleyerek davranışlarını özelleştirirsiniz.

Diğer görseller ve videolar için Adapty kontrol panelinde özel bir ID ayarlamanız gerekir.

Örneğin şunları yapabilirsiniz:

• Bazı kullanıcılara farklı bir görsel veya video gösterebilirsiniz.
• Uzaktaki ana görsel yüklenirken yerel bir önizleme görseli gösterebilirsiniz.
• Video başlamadan önce bir önizleme görseli gösterebilirsiniz. İşte özel varlıkları basit bir sözlük aracılığıyla nasıl sağlayabileceğinize dair bir örnek:

const customAssets: Record<string, AdaptyCustomAsset> = {
  'custom_image': { type: 'image', relativeAssetPath: 'custom_image.png' },
  'hero_video': {
    type: 'video',
    fileLocation: {
      ios: { fileName: 'custom_video.mp4' },
      android: { relativeAssetPath: 'videos/custom_video.mp4' }
    }
  }
};

view = await createPaywallView(paywall, { customAssets });