React Native SDK'da onboarding olaylarını yönetin

Onboarding’ler SDK v4’te kullanımdan kaldırıldı ve gelecekteki bir sürümde kaldırılacak. Artık düzeltme veya iyileştirme almıyorlar. Bunun yerine flow’ları kullanın: bir WebView içinde çalışan onboarding’lerin aksine, flow’lar cihazda yerel olarak render edilir — bu da size daha akıcı animasyonlar, tutarlı bir yerel görünüm ve his, daha hızlı yükleme süreleri ve WebView çalışma zamanı bağımlılığının olmaması avantajını sağlar. Başlamak için bkz. Flow’ları ve paywall’ları getirme ve Flow’ları ve paywall’ları görüntüleme.

Başlamadan önce şunları kontrol edin:

Onboarding builder ile yapılandırılan onboarding’ler, uygulamanızın yanıt verebileceği olaylar üretir. Bu olayları nasıl ele alacağınız, hangi sunum yaklaşımını kullandığınıza bağlıdır:

Modal sunum: Tüm onboarding görünümleri için olayları işleyen olay işleyicilerinin kurulmasını gerektirir
React bileşeni: Olayları doğrudan widget içindeki satır içi callback parametreleri aracılığıyla işler

Adapty React Native SDK 3.8.0 veya daha yeni bir sürümünü yüklediniz.
Bir onboarding oluşturdunuz.
Onboarding’i bir placement’a eklediniz.

Mobil uygulamanızdaki onboarding ekranında gerçekleşen süreçleri kontrol etmek veya izlemek için olay işleyicilerini uygulayın:

React bileşeninde, olayları AdaptyOnboardingView bileşenindeki tekil olay işleyici prop’ları aracılığıyla yönetirsiniz:


function MyOnboarding({ onboarding }) {
  const onAnalytics = useCallback<OnboardingEventHandlers['onAnalytics']>((event, meta) => {}, []);
  const onClose = useCallback<OnboardingEventHandlers['onClose']>((actionId, meta) => {}, []);
  const onCustom = useCallback<OnboardingEventHandlers['onCustom']>((actionId, meta) => {}, []);
  const onPaywall = useCallback<OnboardingEventHandlers['onPaywall']>((actionId, meta) => {}, []);
  const onStateUpdated = useCallback<OnboardingEventHandlers['onStateUpdated']>((action, meta) => {}, []);
  const onFinishedLoading = useCallback<OnboardingEventHandlers['onFinishedLoading']>((meta) => {}, []);
  const onError = useCallback<OnboardingEventHandlers['onError']>((error) => {}, []);

  return (
    <AdaptyOnboardingView
      onboarding={onboarding}
      style={styles.container}
      onAnalytics={onAnalytics}
      onClose={onClose}
      onCustom={onCustom}
      onPaywall={onPaywall}
      onStateUpdated={onStateUpdated}
      onFinishedLoading={onFinishedLoading}
      onError={onError}
    />
  );
}

Modal sunum için event handler metodunu uygulayın.

setEventHandlers metodunu birden fazla kez çağırmak, sağladığınız handler’ları geçersiz kılar ve ilgili olaylar için hem varsayılan hem de daha önce ayarlanan handler’ların yerini alır.


const view = await createOnboardingView(onboarding);

const unsubscribe = view.setEventHandlers({
  onAnalytics(event, meta) {
    // Analitik olaylarını takip et
  },
  onClose(actionId, meta) {
    // Kapatma eylemini işle
    view.dismiss();
    return true;
  },
  onCustom(actionId, meta) {
    // Özel eylemleri işle
  },
  onPaywall(actionId, meta) {
    // Paywall eylemlerini işle
  },
  onStateUpdated(action, meta) {
    // Kullanıcı girişi güncellemelerini işle
  },
  onFinishedLoading(meta) {
    // Onboarding yüklemesi tamamlandı
  },
  onError(error) {
    // Yükleme hatalarını işle
  },
});

try {
  await view.present();
} catch (error) {
  // hatayı işle
}

SDK version < 3.14 için yalnızca modal sunum desteklenmektedir:


const view = await createOnboardingView(onboarding);

const unsubscribe = view.registerEventHandlers({
  onAnalytics(event, meta) {
    // Analitik olaylarını takip et
  },
  onClose(actionId, meta) {
    // Kapatma eylemini işle
    view.dismiss();
    return true;
  },
  onCustom(actionId, meta) {
    // Özel eylemleri işle
  },
  onPaywall(actionId, meta) {
    // Paywall eylemlerini işle
  },
  onStateUpdated(action, meta) {
    // Kullanıcı girişi güncellemelerini işle
  },
  onFinishedLoading(meta) {
    // Onboarding yüklemesi tamamlandı
  },
  onError(error) {
    // Yükleme hatalarını işle
  },
});

try {
  await view.present();
} catch (error) {
  // hatayı işle
}

Etkinlik türleri

Aşağıdaki bölümler, hangi sunum yaklaşımını kullandığınızdan bağımsız olarak işleyebileceğiniz farklı etkinlik türlerini açıklamaktadır.

Özel eylemleri yönetme

Builder’da bir butona özel eylem ekleyebilir ve ona bir ID atayabilirsiniz.

Ardından bu ID’yi kodunuzda kullanabilir ve özel bir eylem olarak işleyebilirsiniz. Örneğin, bir kullanıcı Login veya Allow notifications gibi özel bir butona dokunduğunda, olay işleyicisi Action ID parametresiyle tetiklenir ve bu parametre builder’daki Action ID ile eşleşir. “allowNotifications” gibi kendi ID’lerinizi oluşturabilirsiniz.


function MyOnboarding({ onboarding }) {
  const onCustom = useCallback<OnboardingEventHandlers['onCustom']>((actionId, meta) => {
    switch (actionId) {
      case 'login':
        login();
        break;
      case 'allow_notifications':
        allowNotifications();
        break;
    }
  }, []);

  return (
    <AdaptyOnboardingView
      onboarding={onboarding}
      style={styles.container}
      onCustom={onCustom}
    />
  );
}


const view = await createOnboardingView(onboarding);

const unsubscribe = view.setEventHandlers({
  onCustom(actionId, meta) {
    switch (actionId) {
      case 'login':
        login();
        break;
      case 'allow_notifications':
        allowNotifications();
        break;
    }
  },
});


const view = await createOnboardingView(onboarding);

const unsubscribe = view.registerEventHandlers({
  onCustom(actionId, meta) {
    switch (actionId) {
      case 'login':
        login();
        break;
      case 'allow_notifications':
        allowNotifications();
        break;
    }
  },
});

Olay örneği (Genişletmek için tıklayın)

{
  "actionId": "allow_notifications",
  "meta": {
    "onboardingId": "onboarding_123",
    "screenClientId": "profile_screen",
    "screenIndex": 0,
    "screensTotal": 3
  }
}

Onboarding yüklemesi tamamlandığında

Bir onboarding yüklemesi tamamlandığında şu olay tetiklenir:


function MyOnboarding({ onboarding }) {
  const onFinishedLoading = useCallback<OnboardingEventHandlers['onFinishedLoading']>((meta) => {
    console.log('Onboarding loaded:', meta.onboardingId);
  }, []);

  return (
    <AdaptyOnboardingView
      onboarding={onboarding}
      style={styles.container}
      onFinishedLoading={onFinishedLoading}
    />
  );
}


const view = await createOnboardingView(onboarding);

const unsubscribe = view.setEventHandlers({
  onFinishedLoading(meta) {
    console.log('Onboarding loaded:', meta.onboardingId);
  },
});


const view = await createOnboardingView(onboarding);

const unsubscribe = view.registerEventHandlers({
  onFinishedLoading(meta) {
    console.log('Onboarding loaded:', meta.onboardingId);
  },
});

Etkinlik örneği (Genişletmek için tıklayın)

{
    "meta": {
        "onboarding_id": "onboarding_123",
        "screen_cid": "welcome_screen",
        "screen_index": 0,
        "total_screens": 4
    }
}

Onboarding’i kapatma

Kullanıcı Close eylemine atanmış bir butona dokunduğunda onboarding kapatılmış sayılır.

Kullanıcı onboarding’i kapattığında ne olacağını yönetmeniz gerektiğini unutmayın. Örneğin, onboarding’in kendisini göstermeyi durdurmanız gerekir.


function MyOnboarding({ onboarding, navigation }) {
  const onClose = useCallback<OnboardingEventHandlers['onClose']>((actionId, meta) => {
    navigation.goBack();  
  }, [navigation]);

  return (
    <AdaptyOnboardingView
      onboarding={onboarding}
      style={styles.container}
      onClose={onClose}
    />
  );
}


const view = await createOnboardingView(onboarding);

const unsubscribe = view.setEventHandlers({
  onClose(actionId, meta) {
    await view.dismiss();
    return true;
  },
});


const view = await createOnboardingView(onboarding);

const unsubscribe = view.registerEventHandlers({
  onClose(actionId, meta) {
    await view.dismiss();
    return true;
  },
});

Etkinlik örneği (Genişletmek için tıklayın)

{
  "action_id": "close_button",
  "meta": {
    "onboarding_id": "onboarding_123",
    "screen_cid": "final_screen",
    "screen_index": 3,
    "total_screens": 4
  }
}

Paywall Açma

Onboarding içinde bir paywall açmak istiyorsanız bu olayı işleyin. Paywall kapatıldıktan sonra açmak istiyorsanız daha kolay bir yol var: kapat aksiyonunu işleyip olay verisine gerek kalmadan paywall’ı açın.

Onboarding’lerde paywall’larla çalışmanın en kolay yolu, aksiyon ID’sini paywall placement ID’sine eşit yapmaktır.


function MyOnboarding({ onboarding }) {
  const onPaywall = useCallback<OnboardingEventHandlers['onPaywall']>((actionId, meta) => {
    openPaywall(actionId);
  }, []);

  return (
    <AdaptyOnboardingView
      onboarding={onboarding}
      style={styles.container}
      onPaywall={onPaywall}
    />
  );
}

const openPaywall = async (placementId) => {
  // Implement your paywall opening logic here
};

iOS’ta aynı anda yalnızca bir görünüm (paywall veya onboarding) ekranda gösterilebilir. Bir onboarding’in üzerine paywall sunarsanız, arka plandaki onboarding’i programatik olarak kontrol edemezsiniz. Onboarding’i kapatmaya çalışırsanız bunun yerine paywall kapanır ve onboarding görünür kalır. Bunu önlemek için paywall’ı sunmadan önce her zaman onboarding görünümünü kapatın.


const view = await createOnboardingView(onboarding);

const unsubscribe = view.setEventHandlers({
  onPaywall(actionId, meta) {
    view.dismiss().then(() => {
      openPaywall(actionId);
    });
  },
});

const openPaywall = async (placementId) => {
  // Paywall açma mantığınızı buraya ekleyin
};


const view = await createOnboardingView(onboarding);

const unsubscribe = view.registerEventHandlers({
  onPaywall(actionId, meta) {
    view.dismiss().then(() => {
      openPaywall(actionId);
    });
  },
});

const openPaywall = async (placementId) => {
  // Paywall açma mantığınızı buraya uygulayın
};

Etkinlik örneği (Genişletmek için tıklayın)

{
    "action_id": "premium_offer_1",
    "meta": {
        "onboarding_id": "onboarding_123",
        "screen_cid": "pricing_screen",
        "screen_index": 2,
        "total_screens": 4
    }
}

Onboarding akışı sırasında çeşitli navigasyonla ilgili olaylar gerçekleştiğinde bir analitik etkinliği alırsınız:


function MyOnboarding({ onboarding }) {
  const onAnalytics = useCallback<OnboardingEventHandlers['onAnalytics']>((event, meta) => {
    trackEvent(event.name, meta.onboardingId);
  }, []);

  return (
    <AdaptyOnboardingView
      onboarding={onboarding}
      style={styles.container}
      onAnalytics={onAnalytics}
    />
  );
}


const view = await createOnboardingView(onboarding);

const unsubscribe = view.setEventHandlers({
  onAnalytics(event, meta) {
    trackEvent(event.name, meta.onboardingId);
  },
});


const view = await createOnboardingView(onboarding);

const unsubscribe = view.registerEventHandlers({
  onAnalytics(event, meta) {
    trackEvent(event.name, meta.onboardingId);
  },
});

event nesnesi aşağıdaki türlerden biri olabilir:

Tür	Açıklama
`onboardingStarted`	Onboarding yüklendiğinde
`screenPresented`	Herhangi bir ekran gösterildiğinde
`screenCompleted`	Bir ekran tamamlandığında. İsteğe bağlı `elementId` (tamamlanan öğenin tanımlayıcısı) ve isteğe bağlı `reply` (kullanıcının yanıtı) içerir. Kullanıcılar ekrandan çıkmak için herhangi bir işlem yaptığında tetiklenir.
`secondScreenPresented`	İkinci ekran gösterildiğinde
`userEmailCollected`	Kullanıcının e-postası giriş alanı aracılığıyla toplandığında tetiklenir
`onboardingCompleted`	Kullanıcı `final` ID’sine sahip bir ekrana ulaştığında tetiklenir. Bu olaya ihtiyaç duyuyorsanız son ekrana `final` ID’sini atayın.
`unknown`	Tanınmayan olay türleri için. `name` (bilinmeyen olayın adı) ve `meta` (ek meta veriler) içerir
Her etkinlik, aşağıdakileri içeren `meta` bilgilerini barındırır:

Alan	Açıklama
`onboardingId`	Onboarding akışının benzersiz tanımlayıcısı
`screenClientId`	Mevcut ekranın tanımlayıcısı
`screenIndex`	Mevcut ekranın akıştaki konumu
`screensTotal`	Akıştaki toplam ekran sayısı

Etkinlik örnekleri (Genişletmek için tıklayın)

// onboardingStarted
{
  "name": "onboarding_started",
  "meta": {
    "onboarding_id": "onboarding_123",
    "screen_cid": "welcome_screen",
    "screen_index": 0,
    "total_screens": 4
  }
}

// screenPresented
{
    "name": "screen_presented",
    "meta": {
        "onboarding_id": "onboarding_123",
        "screen_cid": "interests_screen",
        "screen_index": 2,
        "total_screens": 4
    }
}

// screenCompleted
{
    "name": "screen_completed",
    "meta": {
        "onboarding_id": "onboarding_123",
        "screen_cid": "profile_screen",
        "screen_index": 1,
        "total_screens": 4
    },
    "params": {
        "element_id": "profile_form",
        "reply": "success"
    }
}

// secondScreenPresented
{
    "name": "second_screen_presented",
    "meta": {
        "onboarding_id": "onboarding_123",
        "screen_cid": "profile_screen",
        "screen_index": 1,
        "total_screens": 4
    }
}

// userEmailCollected
{
    "name": "user_email_collected",
    "meta": {
        "onboarding_id": "onboarding_123",
        "screen_cid": "profile_screen",
        "screen_index": 1,
        "total_screens": 4
    }
}

// onboardingCompleted
{
    "name": "onboarding_completed",
    "meta": {
        "onboarding_id": "onboarding_123",
        "screen_cid": "final_screen",
        "screen_index": 3,
        "total_screens": 4
    }
}

React Native SDK'da onboarding olaylarını yönetin

Etkinlik türleri

Özel eylemleri yönetme

Onboarding yüklemesi tamamlandığında

Onboarding’i kapatma

Paywall Açma

Navigasyonu İzleme