Flow ve paywallları gösterme - Kotlin Multiplatform

Bir flow ya da eski Paywall Builder’da bir paywall oluşturduysanız, bunu kullanıcıya göstermek için mobil uygulama kodunuzda ayrıca render etmeniz gerekmez. Bu tür bir flow veya paywall, hem ne gösterileceğini hem de nasıl gösterileceğini içerir.

Warning

Bu kılavuz, Adapty tarafından render edilen flow’ları ve paywall’ları kapsar. Özel paywall’lar ve Observer modu için süreç farklıdır.

Özel paywalllar sunmak için bkz. Özel paywallları sunma.
Observer mode’da flow’ları sunmak için bkz. Observer mode’da flow’ları sunma.

Aşağıda kullanılan flow nesnesini almak için bkz. Flow’ları ve paywallları edinme.

Adapty Kotlin Multiplatform SDK, flow’ları ve paywallları sunmak için iki yöntem sunar:

Compose Multiplatform ile
Compose Multiplatform olmadan

Compose Multiplatform ile

Bir flow veya paywall görüntülemek için createFlowView metoduyla oluşturulan view üzerinde view.present() metodunu kullanın. Her view yalnızca bir kez kullanılabilir. Flow’u tekrar görüntülemeniz gerekiyorsa yeni bir view örneği oluşturmak için createFlowView metodunu bir kez daha çağırın.

Warning

Aynı view’ı yeniden oluşturmadan tekrar kullanmak hataya yol açabilir.


viewModelScope.launch {
    AdaptyUI.createFlowView(flow = flow).onSuccess { view ->
        view.present()
    }.onError { error ->
        // handle the error
    }
}

İletişim Kutusu Göster

Flow veya paywall, Android’de gösterildiğinde yerel uyarı iletişim kutuları yerine bu yöntemi kullanın. Android’de normal uyarılar, flow görünümünün arkasında kalır ve kullanıcılar tarafından görülmez. Bu yöntem, tüm platformlarda flow’un üzerinde iletişim kutusunun düzgün şekilde gösterilmesini sağlar.


viewModelScope.launch {
    view.showDialog(
        title = "Close this screen?",
        content = "You will lose access to exclusive offers.",
        primaryActionTitle = "Stay",
        secondaryActionTitle = "Close"
    ).onSuccess { action ->
        if (action == AdaptyUIDialogActionType.SECONDARY) {
            // User confirmed - close the flow
            view.dismiss()
        }
        // If primary - do nothing, user stays
    }.onError { error ->
        // handle the error
    }
}

iOS sunum stilini yapılandırma

Flow veya paywall’ın iOS’ta nasıl sunulacağını yapılandırmak için present() metoduna iosPresentationStyle parametresini geçirin. Bu parametre AdaptyUIIOSPresentationStyle.FULLSCREEN (varsayılan) veya AdaptyUIIOSPresentationStyle.PAGESHEET değerlerini kabul eder.


viewModelScope.launch {
    val view = AdaptyUI.createFlowView(flow = flow).getOrNull()
    view?.present(iosPresentationStyle = AdaptyUIIOSPresentationStyle.PAGESHEET)
}

Compose Multiplatform Olmadan

Note

createNativeFlowView, io.adapty:adapty-kmp çekirdek modülünün bir parçasıdır. Projeniz Compose Multiplatform kullanmıyorsa io.adapty:adapty-kmp-ui bağımlılığına ihtiyacınız yoktur.

Compose Multiplatform olmadan bir flow veya paywall yerleştirmek için createNativeFlowView metodunu çağırın. Bu metot, layout’unuza eklediğiniz bir AdaptyNativeFlowView döndürür:


val nativeView = AdaptyUI.createNativeFlowView(
    context = context,
    viewModelStoreOwner = activity,
    flow = flow,
    observer = myFlowObserver,
)

// Embed in your Compose layout:
AndroidView(
    factory = { nativeView.view },
    modifier = Modifier.fillMaxSize()
)

Varsayılan olarak, gömülü bir view güvenli alan dolguları uygulamaz — layout’unuzun iç boşlukları kendisinin yönetmesi beklenir. View’ın bu dolguları kendisi uygulamasını istiyorsanız, createNativeFlowView fonksiyonuna androidEnableSafeArea = true parametresini geçin. Bu parametre yalnızca Android’e özgüdür.

KMP arayüz varsayılan metotları Swift’te @required olarak çevrildiğinden, AdaptyUIFlowsEventsObserver’ı doğrudan Swift üzerinden uygulayamazsınız. Önce iosMain içinde açık bir temel sınıf tanımlayın:

open class BaseFlowObserver : AdaptyUIFlowsEventsObserver

Ardından Swift’te yalnızca ihtiyacınız olanı geçersiz kılarak alt sınıf oluşturun:

class MyFlowObserver: BaseFlowObserver {
    override func flowViewDidPerformAction(view: AdaptyUIFlowView, action: any AdaptyUIAction) {
        if action is AdaptyUIActionCloseAction {
            // remove nativeView from your view hierarchy
        }
    }
}

let nativeView = AdaptyUI.shared.createNativeFlowView(
    flow: flow,
    observer: MyFlowObserver()
)
// nativeView.viewController is a UIViewController.
// Add it to your SwiftUI view or UIKit hierarchy.

Görünümü imha etme

Görünümü düzeninizden kaldırırken dispose() metodunu çağırın. Bu işlem, olay dinleyicisinin kaydını siler ve dahili kaynakları serbest bırakır.

nativeView.dispose()

Özel etiketler

Ana makale: Flow’lara veri aktarma

Özel etiketler, farklı senaryolar için ayrı flow’lar veya paywall’lar oluşturmanıza gerek kalmamasını sağlar. Kullanıcı verilerine göre dinamik olarak uyum sağlayan tek bir flow hayal edin. Örneğin, genel bir “Merhaba!” yerine kullanıcıları kişisel olarak “Merhaba, John!” veya “Merhaba, Ann!” şeklinde karşılayabilirsiniz.

Özel etiketleri şu şekillerde kullanabilirsiniz:

Kullanıcının adını veya e-postasını flow’da ya da paywall’da gösterin.
Satışları artırmak için haftanın gününü gösterin (örneğin, “İyi Perşembeler”).
Sattığınız ürünler hakkında kişiselleştirilmiş ayrıntılar ekleyin (bir fitness programının adı veya VoIP uygulamasında telefon numarası gibi).

Custom tag’ler, çeşitli durumlarla uyum sağlayan ve uygulamanızın arayüzünü daha kişiselleştirilmiş ve ilgi çekici kılan esnek bir flow oluşturmanıza yardımcı olur.

Uygulamanızın değerlerini AdaptyUI.createFlowView veya AdaptyUI.createNativeFlowView fonksiyonunun customTags parametresine Map<String, String> olarak aktarın:


viewModelScope.launch {
    val customTags = mapOf(
        "username" to "DragonSlayer42",
        "day_of_week" to "Thursday"
    )

    AdaptyUI.createFlowView(
        flow = flow,
        customTags = customTags
    ).onSuccess { view ->
        view.present()
    }.onError { error ->
        // handle the error
    }
}


val customTags = mapOf(
    "username" to "DragonSlayer42",
    "day_of_week" to "Thursday"
)

val nativeView = AdaptyUI.createNativeFlowView(
    context = context,
    viewModelStoreOwner = activity,
    flow = flow,
    observer = myFlowObserver,
    customTags = customTags,
)


val customTags = mapOf(
    "username" to "DragonSlayer42",
    "day_of_week" to "Thursday"
)

val nativeView = AdaptyUI.createNativeFlowView(
    flow = flow,
    observer = myFlowObserver,
    customTags = customTags,
)

Uygulamanız bir custom tag için herhangi bir değer geçmezse, kullanıcılar bunun yerine tag’in Başlangıç değerini görür.

Özel zamanlayıcılar

Zamanlayıcı, süreli özel ve sezonluk teklifleri tanıtmak için harika bir araçtır. Ancak bu zamanlayıcının teklifin geçerlilik süresiyle veya kampanyanın bitiş tarihiyle herhangi bir bağlantısı olmadığını belirtmek gerekir. Yalnızca belirlediğiniz değerden başlayıp sıfıra kadar azalan bağımsız bir geri sayımdır. Zamanlayıcı sıfıra ulaştığında hiçbir şey olmaz; sadece sıfırda kalır.

İstediğiniz mesajı oluşturmak için zamanlayıcının önüne ve arkasına metin ekleyebilirsiniz; örneğin: “Teklif bitiyor: 10:00 sn.”

Flow veya paywallınızda özel zamanlayıcılar kullanmak için, flow görünümünü oluştururken bunları aktarın:


viewModelScope.launch {
    val customTimers = mapOf(
        "CUSTOM_TIMER_NY" to LocalDateTime(2025, 1, 1, 0, 0, 0),
        "CUSTOM_TIMER_SALE" to LocalDateTime(2024, 12, 31, 23, 59, 59)
    )

    AdaptyUI.createFlowView(
        flow = flow,
        customTimers = customTimers
    ).onSuccess { view ->
        view.present()
    }.onError { error ->
        // handle the error
    }
}


val customTimers = mapOf(
    "CUSTOM_TIMER_NY" to LocalDateTime(2025, 1, 1, 0, 0, 0),
    "CUSTOM_TIMER_SALE" to LocalDateTime(2024, 12, 31, 23, 59, 59)
)

val nativeView = AdaptyUI.createNativeFlowView(
    context = context,
    viewModelStoreOwner = activity,
    flow = flow,
    observer = myFlowObserver,
    customTimers = customTimers,
)


val customTimers = mapOf(
    "CUSTOM_TIMER_NY" to LocalDateTime(2025, 1, 1, 0, 0, 0),
    "CUSTOM_TIMER_SALE" to LocalDateTime(2024, 12, 31, 23, 59, 59)
)

val nativeView = AdaptyUI.createNativeFlowView(
    flow = flow,
    observer = myFlowObserver,
    customTimers = customTimers,
)

Paywall Builder kullanarak bir paywall özelleştirdiyseniz, bunu kullanıcıya göstermek için mobil uygulama kodunuzda ayrıca render etmeniz gerekmez. Bu tür bir paywall, hem neyin gösterileceğini hem de nasıl gösterileceğini içerir.

Warning

Bu kılavuz yalnızca eski builder ile oluşturulmuş paywalllar içindir. Paywall sunma süreci, custom paywalllar ve Observer mode için farklılık gösterir.

Custom paywall sunmak için bkz. Custom paywall sunma.

Adapty Kotlin Multiplatform SDK, paywall’ları sunmak için iki yöntem sunar:

Compose Multiplatform ile
Compose Multiplatform olmadan

Compose Multiplatform ile

Bir paywall görüntülemek için, createPaywallView metodu tarafından oluşturulan view üzerinde view.present() metodunu kullanın. Her view yalnızca bir kez kullanılabilir. Paywall’ı tekrar görüntülemeniz gerekiyorsa, yeni bir view örneği oluşturmak için createPaywallView’ı bir kez daha çağırın.

Warning

Aynı view’ı yeniden oluşturmadan tekrar kullanmak hataya yol açabilir.


viewModelScope.launch {
    AdaptyUI.createPaywallView(paywall = paywall).onSuccess { view ->
        view.present()
    }.onError { error ->
        // handle the error
    }
}

Diyalog Göster

Android’de bir paywall görünümü sunulurken yerel uyarı diyalogları yerine bu yöntemi kullanın. Android’de normal uyarılar, paywall görünümünün arkasında görünür; bu da onları kullanıcılar için görünmez hale getirir. Bu yöntem, tüm platformlarda paywall’ın üzerinde diyaloğun düzgün şekilde gösterilmesini sağlar.


viewModelScope.launch {
    view.showDialog(
        title = "Close paywall?",
        content = "You will lose access to exclusive offers.",
        primaryActionTitle = "Stay",
        secondaryActionTitle = "Close"
    ).onSuccess { action ->
        if (action == AdaptyUIDialogActionType.SECONDARY) {
            // User confirmed - close the paywall
            view.dismiss()
        }
        // If primary - do nothing, user stays
    }.onError { error ->
        // handle the error
    }
}

iOS sunum stilini yapılandırın

present() metoduna iosPresentationStyle parametresini geçirerek paywallın iOS’ta nasıl sunulacağını yapılandırın. Parametre, AdaptyUIIOSPresentationStyle.FULLSCREEN (varsayılan) veya AdaptyUIIOSPresentationStyle.PAGESHEET değerlerini kabul eder.


viewModelScope.launch {
    val view = AdaptyUI.createPaywallView(paywall = paywall).getOrNull()
    view?.present(iosPresentationStyle = AdaptyUIIOSPresentationStyle.PAGESHEET)
}

Compose Multiplatform Olmadan

Note

createNativePaywallView, io.adapty:adapty-kmp çekirdek modülünün bir parçasıdır. Projeniz Compose Multiplatform kullanmıyorsa io.adapty:adapty-kmp-ui bağımlılığına ihtiyacınız yoktur.

Compose Multiplatform olmadan bir paywall gömmek için createNativePaywallView fonksiyonunu çağırın. Bu fonksiyon, layout’unuza eklediğiniz bir AdaptyNativePaywallView döndürür:


val nativeView = AdaptyUI.createNativePaywallView(
    context = context,
    viewModelStoreOwner = activity,
    paywall = paywall,
    observer = myPaywallObserver,
)

// Embed in your Compose layout:
AndroidView(
    factory = { nativeView.view },
    modifier = Modifier.fillMaxSize()
)

KMP arayüzü varsayılan metodları Swift’te @required hale geldiğinden, AdaptyUIPaywallsEventsObserver’ı doğrudan Swift’ten implemente edemezsiniz. Önce iosMain içinde açık bir temel sınıf tanımlayın:

open class BasePaywallObserver : AdaptyUIPaywallsEventsObserver

Ardından Swift’te bu sınıfı alt sınıf olarak genişletin ve yalnızca ihtiyacınız olanları geçersiz kılın:

class MyPaywallObserver: BasePaywallObserver {
    override func paywallViewDidPerformAction(view: AdaptyUIPaywallView, action: any AdaptyUIAction) {
        if action is AdaptyUIActionCloseAction {
            // remove nativeView from your view hierarchy
        }
    }
}

let nativeView = AdaptyUI.shared.createNativePaywallView(
    paywall: paywall,
    observer: MyPaywallObserver()
)
// nativeView.viewController is a UIViewController.
// Add it to your SwiftUI view or UIKit hierarchy.

Görünümü serbest bırakın

Görünümü düzeninizden kaldırırken dispose() metodunu çağırın. Bu işlem, olay dinleyicisinin kaydını siler ve dahili kaynakları serbest bırakır.

nativeView.dispose()

Özel etiketler

Özel etiketler, farklı senaryolar için ayrı ayrı paywall oluşturma zahmetini ortadan kaldırır. Tek bir paywall’un kullanıcı verilerine göre dinamik biçimde uyarlandığını hayal edin. Örneğin genel bir “Merhaba!” yerine kullanıcıları “Merhaba, Ahmet!” ya da “Merhaba, Ayşe!” şeklinde kişisel olarak selamlayabilirsiniz.

Özel etiketleri şu amaçlarla kullanabilirsiniz:

Paywall üzerinde kullanıcının adını veya e-posta adresini göstermek.
Satışları artırmak için haftanın gününü göstermek (ör. “İyi Perşembeler”).
Sattığınız ürünlere ilişkin kişiselleştirilmiş ayrıntılar eklemek (bir fitness programının adı veya VoIP uygulamasında bir telefon numarası gibi).

Özel etiketler, çeşitli durumlara uyum sağlayan esnek bir paywall oluşturmanıza yardımcı olarak uygulamanızın arayüzünü daha kişisel ve ilgi çekici hale getirir.

Warning

Bazı durumlarda, uygulamanız bir özel etiketi neyle değiştireceğini bilemeyebilir; özellikle kullanıcılar AdaptyUI SDK’nın eski bir sürümünü kullanıyorsa. Bunu önlemek için, bilinmeyen özel etiketler içeren satırların yerine geçecek bir yedek metin eklemeyi unutmayın. Aksi takdirde kullanıcılar etiketleri kod olarak görebilir (<USERNAME/>).

Paywall’ınızda özel etiketleri kullanmak için, paywall görünümünü oluştururken bunları iletin:


viewModelScope.launch {
    val customTags = mapOf(
        "USERNAME" to "John",
        "DAY_OF_WEEK" to "Thursday"
    )

    AdaptyUI.createPaywallView(
        paywall = paywall,
        customTags = customTags
    ).onSuccess { view ->
        view.present()
    }.onError { error ->
        // handle the error
    }
}


val customTags = mapOf(
    "USERNAME" to "John",
    "DAY_OF_WEEK" to "Thursday"
)

val nativeView = AdaptyUI.createNativePaywallView(
    context = context,
    viewModelStoreOwner = activity,
    paywall = paywall,
    observer = myPaywallObserver,
    customTags = customTags,
)


val customTags = mapOf(
    "USERNAME" to "John",
    "DAY_OF_WEEK" to "Thursday"
)

val nativeView = AdaptyUI.createNativePaywallView(
    paywall = paywall,
    observer = myPaywallObserver,
    customTags = customTags,
)

Özel zamanlayıcılar

Paywall zamanlayıcısı, süreli özel ve sezonluk teklifleri tanıtmak için harika bir araçtır. Ancak bu zamanlayıcının teklifin geçerlilik süresiyle veya kampanyanın uzunluğuyla herhangi bir bağlantısı olmadığını belirtmek gerekir. Belirlediğiniz değerden başlayıp sıfıra kadar geri sayan bağımsız bir geri sayım saatidir. Zamanlayıcı sıfıra ulaştığında hiçbir şey olmaz; sadece sıfırda kalır.

İstediğiniz mesajı oluşturmak için zamanlayıcının önüne ve arkasına metin ekleyebilirsiniz; örneğin: “Teklif bitiyor: 10:00 sn.”

Paywall’unuzda özel zamanlayıcılar kullanmak için, paywall view’ını oluştururken bunları aktarın:


viewModelScope.launch {
    val customTimers = mapOf(
        "CUSTOM_TIMER_NY" to LocalDateTime(2025, 1, 1, 0, 0, 0),
        "CUSTOM_TIMER_SALE" to LocalDateTime(2024, 12, 31, 23, 59, 59)
    )

    AdaptyUI.createPaywallView(
        paywall = paywall,
        customTimers = customTimers
    ).onSuccess { view ->
        view.present()
    }.onError { error ->
        // handle the error
    }
}


val customTimers = mapOf(
    "CUSTOM_TIMER_NY" to LocalDateTime(2025, 1, 1, 0, 0, 0),
    "CUSTOM_TIMER_SALE" to LocalDateTime(2024, 12, 31, 23, 59, 59)
)

val nativeView = AdaptyUI.createNativePaywallView(
    context = context,
    viewModelStoreOwner = activity,
    paywall = paywall,
    observer = myPaywallObserver,
    customTimers = customTimers,
)


val customTimers = mapOf(
    "CUSTOM_TIMER_NY" to LocalDateTime(2025, 1, 1, 0, 0, 0),
    "CUSTOM_TIMER_SALE" to LocalDateTime(2024, 12, 31, 23, 59, 59)
)

val nativeView = AdaptyUI.createNativePaywallView(
    paywall = paywall,
    observer = myPaywallObserver,
    customTimers = customTimers,
)