Flow ve paywallları gösterme - Kotlin Multiplatform

Bir flow veya paywall oluşturduysanız, bunu kullanıcıya göstermek için mobil uygulama kodunuzda ayrıca render etme konusunda endişelenmenize gerek yoktur. Böyle bir flow veya paywall, içinde neyin gösterileceğini ve nasıl gösterileceğini zaten kapsar.

Bu kılavuz, Adapty tarafından render edilen flow’ları ve yeni Paywall Builder paywall’larını kapsar. Remote config paywall’ları ve Observer mode için süreç farklıdır.

Remote config paywalls sunmak için, bkz. Remote config ile tasarlanmış paywall’ı render etme.
Observer mode’da flow’ları sunmak için, bkz. Observer mode’da flow’ları sunma.

Aşağıda kullanılan flow nesnesini edinmek için bkz. Flow’ları ve paywall’ları alma.

Adapty Kotlin Multiplatform SDK, flow’ları ve paywall’ları 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.

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

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

Özel etiketler, farklı senaryolar için ayrı flow’lar veya paywall’lar oluşturmaktan kurtarır. Kullanıcı verilerine göre dinamik olarak uyum sağlayan tek bir flow hayal edin. Örneğin, genel bir “Merhaba!” yerine kullanıcıları “Merhaba, Ahmet!” veya “Merhaba, Ayşe!” şeklinde kişisel olarak selamlayabilirsiniz.

Özel etiketleri şu şekillerde kullanabilirsiniz:

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

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

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

Özel etiketleri flow’unuzda veya paywallınızda kullanmak için, flow view oluştururken bunları iletmeniz gerekir:


viewModelScope.launch {
    val customTags = mapOf(
        "USERNAME" to "John",
        "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 "John",
    "DAY_OF_WEEK" to "Thursday"
)

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


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

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

Ö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. Böyle bir paywall, hem ne gösterileceğini hem de nasıl gösterileceğini içerir.

Bu kılavuz yalnızca yeni Paywall Builder paywallları içindir. Paywall sunma süreci, remote config paywallları ve Observer mode ile tasarlanan paywalllar için farklıdır.

Remote config paywalllarını sunmak için bkz. Remote config ile tasarlanan paywall’ı render etme.

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.

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

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.

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,
)