Procesar datos de onboardings en Flutter SDK

Los onboardings están obsoletos en el SDK v4 y se eliminarán en una versión futura. Ya no reciben correcciones ni mejoras. Usa flows en su lugar: a diferencia de los onboardings, que se ejecutan dentro de un WebView, los flows se renderizan de forma nativa en el dispositivo — lo que ofrece animaciones más fluidas, una apariencia nativa consistente, tiempos de carga más rápidos y sin dependencia del runtime de WebView. Consulta Obtener flows y paywalls y Mostrar flows y paywalls para empezar.

Cuando tus usuarios responden a una pregunta de quiz o introducen sus datos en un campo de entrada, se invocará el método onStateUpdatedAction. Puedes guardar o procesar el tipo de campo en tu código.

Por ejemplo:

// Full-screen presentation
void onboardingViewOnStateUpdatedAction(
  AdaptyUIOnboardingView view,
  AdaptyUIOnboardingMeta meta,
  String elementId,
  AdaptyOnboardingsStateUpdatedParams params,
) {
  // Process data 
}

// Embedded widget
onStateUpdatedAction: (meta, elementId, params) {
  // Process data 
}

Consulta el formato de acción aquí.

Formas de las propiedades para cada tipo de parámetros (haz clic para expandir)

void onboardingViewOnStateUpdatedAction(
  AdaptyUIOnboardingView view,
  AdaptyUIOnboardingMeta meta,
  String elementId,
  AdaptyOnboardingsStateUpdatedParams params,
) {
  // elementId is a String:
  elementId; // 'preference_selector'

  // meta — AdaptyUIOnboardingMeta:
  meta.onboardingId;   // 'onboarding_123'
  meta.screenClientId; // 'preferences_screen'
  meta.screenIndex;    // 1
  meta.screensTotal;   // 3

  // params is one of the AdaptyOnboardingsStateUpdatedParams subclasses:
  switch (params) {
    case AdaptyOnboardingsSelectParams(:final id, :final value, :final label):
      // a single selected option
      id;    // 'option_1'
      value; // 'premium'
      label; // 'Premium Plan'
      break;
    case AdaptyOnboardingsMultiSelectParams(:final params):
      // a list of selected options, each an AdaptyOnboardingsSelectParams
      params; // [(id: 'interest_1', value: 'sports', label: 'Sports'), (id: 'interest_2', value: 'music', label: 'Music')]
      break;
    case AdaptyOnboardingsInputParams(:final input):
      switch (input) {
        case AdaptyOnboardingsTextInput(:final value):
          value; // 'John Doe'
          break;
        case AdaptyOnboardingsEmailInput(:final value):
          value; // 'user@example.com'
          break;
        case AdaptyOnboardingsNumberInput(:final value):
          value; // 25.0 (a double)
          break;
      }
      break;
    case AdaptyOnboardingsDatePickerParams(:final day, :final month, :final year):
      day;   // 15
      month; // 6
      year;  // 1990
      break;
  }
}

Casos de uso

Enriquecer perfiles de usuario con datos

Si quieres vincular directamente los datos de entrada con el perfil del usuario y evitar pedirle la misma información dos veces, necesitas actualizar el perfil del usuario con los datos de entrada al gestionar la acción.

Por ejemplo, le pides al usuario que introduzca su nombre en el campo de texto con el ID name, y quieres establecer el valor de ese campo como el nombre del usuario. También le pides que introduzca su correo electrónico en el campo email. En el código de tu app, puede quedar así:

// Full-screen presentation
void onboardingViewOnStateUpdatedAction(
  AdaptyUIOnboardingView view,
  AdaptyUIOnboardingMeta meta,
  String elementId,
  AdaptyOnboardingsStateUpdatedParams params,
) {
  // Store user preferences or responses
  if (params is AdaptyOnboardingsInputParams) {
    final builder = AdaptyProfileParametersBuilder();
    
    // Map elementId to appropriate profile field
    switch (elementId) {
      case 'name':
        if (params.input is AdaptyOnboardingsTextInput) {
          builder.setFirstName((params.input as AdaptyOnboardingsTextInput).value);
        }
        break;
      case 'email':
        if (params.input is AdaptyOnboardingsEmailInput) {
          builder.setEmail((params.input as AdaptyOnboardingsEmailInput).value);
        }
        break;
    }
    
    // Update profile
    Adapty().updateProfile(builder.build()).catchError((error) {
      // handle the error
    });
  }
}

// Embedded widget
onStateUpdatedAction: (meta, elementId, params) {
  // Store user preferences or responses
  if (params is AdaptyOnboardingsInputParams) {
    final builder = AdaptyProfileParametersBuilder();
    
    // Map elementId to appropriate profile field
    switch (elementId) {
      case 'name':
        if (params.input is AdaptyOnboardingsTextInput) {
          builder.setFirstName((params.input as AdaptyOnboardingsTextInput).value);
        }
        break;
      case 'email':
        if (params.input is AdaptyOnboardingsEmailInput) {
          builder.setEmail((params.input as AdaptyOnboardingsEmailInput).value);
        }
        break;
    }
    
    // Update profile
    Adapty().updateProfile(builder.build()).catchError((error) {
      // handle the error
    });
  }
}

Personalizar paywalls en función de las respuestas

Usando cuestionarios en los onboardings, también puedes personalizar los paywalls que muestras a los usuarios una vez que completan el onboarding.

Por ejemplo, puedes preguntarles sobre su experiencia con el deporte y mostrar diferentes CTAs y productos a distintos grupos de usuarios.

Añade un cuestionario en el editor de onboarding y asigna IDs significativos a sus opciones.

Gestiona las respuestas del cuestionario según sus IDs y establece atributos personalizados para los usuarios.

// Full-screen presentation
void onboardingViewOnStateUpdatedAction(
  AdaptyUIOnboardingView view,
  AdaptyUIOnboardingMeta meta,
  String elementId,
  AdaptyOnboardingsStateUpdatedParams params,
) {
  // Handle quiz responses and set custom attributes
  if (params is AdaptyOnboardingsSelectParams) {
    final builder = AdaptyProfileParametersBuilder();
    
    // Map quiz responses to custom attributes
    switch (elementId) {
      case 'experience':
        // Set custom attribute 'experience' with the selected value (beginner, amateur, pro)
        builder.setCustomStringAttribute(params.value, 'experience');
        break;
    }
    
    // Update profile
    Adapty().updateProfile(builder.build()).catchError((error) {
      // handle the error
    });
  }
}

// Embedded widget
onStateUpdatedAction: (meta, elementId, params) {
  // Handle quiz responses and set custom attributes
  if (params is AdaptyOnboardingsSelectParams) {
    final builder = AdaptyProfileParametersBuilder();
    
    // Map quiz responses to custom attributes
    switch (elementId) {
      case 'experience':
        // Set custom attribute 'experience' with the selected value (beginner, amateur, pro)
        builder.setCustomStringAttribute(params.value, 'experience');
        break;
    }
    
    // Update profile
    Adapty().updateProfile(builder.build()).catchError((error) {
      // handle the error
    });
  }
}

Crea segmentos para cada valor de atributo personalizado.
Crea un placement y añade audiencias para cada segmento que hayas creado.
Muestra un paywall para el placement en el código de tu app. Si tu onboarding tiene un botón que abre un paywall, implementa el código del paywall como respuesta a la acción de ese botón.