Adapty, Paywall Builder ile görsel olarak oluşturulmuş paywallları uygulamanıza entegre etmenizi kolaylaştırır. Bu süreçte birkaç adım izlenir:

1. Paywall’ı getirme: SDK, hangi paywall’ın gösterileceğini belirler.
2. Yapılandırmayı getirme: Paywall Builder ile oluşturulmuş paywalllar için SDK, yerelleştirme ve görsel öğeler dahil tüm gerekli verileri alır.
3. Görünümü oluşturma ve gösterme: SDK, yerel bir görünüm oluşturur ve paywallı görüntüler.

Şu anki aşamada ilk iki adıma odaklanıyoruz; paywall’ı ve yapılandırmasını getirme.

Paywall’ı getirme

Capacitor SDK’da paywallı getirmek için Adapty.getPaywall() yöntemini kullanırsınız. Aşağıda bu yöntemin nasıl kullanılacağı açıklanmaktadır:

const placementId = "YOUR_PLACEMENT_ID";
const locale = "en";

const paywall = await Adapty.getPaywall(placementId, locale);

Bu yöntem belirli bir placement’a atanmış paywallı döndürür. Geri dönen AdaptyPaywall nesnesini bir sonraki adımda kullanacaksınız.

Parametreler:

Parametre	Açıklama
placementId	Adapty Kontrol Paneli’nde oluşturduğunuz placement’ın kimliği.
locale	(İsteğe bağlı) Paywall içeriğinin dil kodu. Belirtilmezse varsayılan dil kullanılır.
fetchPolicy	(İsteğe bağlı) Verinin nereden alınacağını belirleyen ilke.
loadTimeout	(İsteğe bağlı) Sunucudan veri bekleme süresi (milisaniye).

Paywall yapılandırmasını getirme

Paywall Builder ile oluşturulmuş paywalllar için paywallı aldıktan sonra yapılandırmasını da getirmeniz gerekir:

const view = await AdaptyUI.createPaywallView(paywall);

Bu yöntem, paywallın görsel yapılandırmasını döndürür ve görünümü oluşturmak için kullanılacak tüm verileri içerir.

Varsayılan kitle için paywall’ı getirme

Belirli bir kullanıcı kitlesini hedeflemek yerine varsayılan kitle için paywallı getirmek istiyorsanız getPaywallForDefaultAudience yöntemini kullanabilirsiniz:

const paywall = await Adapty.getPaywallForDefaultAudience(placementId, locale);

Adapty Kontrol Paneli’nde yeni Paywall Builder ile paywallınızın görsel kısmını tasarladıktan sonra, bunu mobil uygulamanızda görüntüleyebilirsiniz. Bu sürecin 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.

Bu konunun Paywall Builder ile özelleştirilmiş paywall’larla ilgili olduğunu unutmayın. Remote config paywall’larını getirme hakkında rehberlik için Mobil uygulamanızda remote config paywall’ları için paywall ve ürünleri getirme konusuna bakın.

Mobil uygulamanızda paywallları 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 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ı yükleyin.

Paywall Builder ile Tasarlanmış Paywall’ı Getirme

Paywall Builder kullanarak bir paywall tasarladıysanız, onu kullanıcıya göstermek için mobil uygulama kodunuzda render etmeniz gerekmez. Bu tür bir paywall, hem ne gösterileceğini hem de nasıl gösterileceğini içerir. Bununla birlikte, placement aracılığıyla paywall’ın ID’sini, görünüm yapılandırmasını almanız ve ardından bunu mobil uygulamanızda sunmanız gerekir. En iyi performansı sağlamak için, paywall’ı ve görünüm yapılandırmasını mümkün olduğunca erken almanız kritik önem taşır; bu sayede görseller kullanıcıya sunulmadan önce indirilmesi için yeterli süre tanınmış 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ı. 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 iki alt etiketten oluşan bir dil kodu olmalıdır. İlk alt etiket dil, ikincisi ise bölge içindir. Örnek: en İngilizce anlamına gelir, pt-br ise 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ı	Paywalli getirmek için ek parametreler.
Ürün ID’lerini sabit kodlamayın. Sabit kodlamanız gereken tek ID, placement ID’sidir. Paywalllar uzaktan yapılandırıldığı için ü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östermeniz gerekir.

Yanıt parametreleri:

Parametre	Açıklama
Paywall	Ürün ID’lerinin listesini, paywall tanımlayıcısını, remote config’i ve diğer çeşitli özellikleri içeren bir AdaptyPaywall nesnesi.

Paywall Builder ile tasarlanan paywallın görünüm yapılandırmasını getirme

Paywall’u aldıktan sonra, Paywall Builder kullanılarak oluşturulup oluşturulmadığını anlamak için ViewConfiguration içerip içermediğini kontrol edin. Bu bilgi, paywall’u nasıl göstereceğinizi belirler. ViewConfiguration mevcutsa Paywall Builder paywallı olarak ele alın; değilse remote config paywallı olarak işleyin.

Capacitor SDK’da, view configuration’ı manuel olarak çekmeden 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 controller almak ü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 görevi görerek kişiselleştirilmiş içerik sunmak amacıyla belirli dizelerle dinamik olarak değiştirilir. Daha fazla bilgi 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ü edindikten sonra paywallı gösterin.

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

Genellikle paywalllar neredeyse anında çekilir, 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, paywall çekme işlemi istediğinizden daha uzun sürebilir. Bu gibi durumlarda, hiç paywall göstermemek yerine sorunsuz bir kullanıcı deneyimi sağlamak amacıyla varsayılan bir paywall göstermek isteyebilirsiniz. Bunu çözmek için, belirtilen placement’ın All Users kitlesi için paywall’ı getiren getPaywallForDefaultAudience metodunu kullanabilirsiniz. Ancak, önerilen yaklaşımın yukarıdaki Paywall Bilgisini Getir bölümünde açıklandığı gibi getPaywall metoduyla paywall getirmek olduğunu unutmayın.

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

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 parametrenin, eksi (-) karakteriyle ayrılmış bir veya daha fazla alt etiket içeren bir dil kodu olması beklenir. İ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 bkz. Yerelleştirmeler ve yerel ayar kodları.
params	isteğe bağlı	Paywall’ı getirmek için ek parametreler.

Varlıkları özelleştirme

Paywall’unuzdaki görsel ve videoları özelleştirmek için özel varlıkları uygulayın.

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

Diğer görsel 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österin.
• Uzak bir ana görsel yüklenirken yerel bir önizleme görseli gösterin.
• Video oynatılmadan önce bir önizleme görseli gösterin.

Özel asset’leri 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 });