Procesar datos de onboardings en el SDK de React Native

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

Por ejemplo:

// Presentación a pantalla completa
const unsubscribe = view.registerEventHandlers({
  onStateUpdated(action, meta) {
    // Procesar datos 
  },
});

// Widget embebido
<AdaptyOnboardingView
  onboarding={onboarding}
  eventHandlers={{
    onStateUpdated(action, meta) {
      // Procesar datos 
    },
  }}
/>

Consulta el formato de la acción aquí.

Ejemplos de datos guardados (el formato puede variar según tu implementación)
// Ejemplo de una acción de selección guardada
{
    "elementId": "preference_selector",
    "meta": {
        "onboardingId": "onboarding_123",
        "screenClientId": "preferences_screen",
        "screenIndex": 1,
        "screensTotal": 3
    },
    "params": {
        "type": "select",
        "value": {
            "id": "option_1",
            "value": "premium",
            "label": "Premium Plan"
        }
    }
}

// Ejemplo de una acción de selección múltiple guardada
{
    "elementId": "interests_selector",
    "meta": {
        "onboardingId": "onboarding_123",
        "screenClientId": "interests_screen",
        "screenIndex": 2,
        "screensTotal": 3
    },
    "params": {
        "type": "multiSelect",
        "value": [
            {
                "id": "interest_1",
                "value": "sports",
                "label": "Sports"
            },
            {
                "id": "interest_2",
                "value": "music",
                "label": "Music"
            }
        ]
    }
}

// Ejemplo de una acción de entrada guardada
{
    "elementId": "name_input",
    "meta": {
        "onboardingId": "onboarding_123",
        "screenClientId": "profile_screen",
        "screenIndex": 0,
        "screensTotal": 3
    },
    "params": {
        "type": "input",
        "value": {
            "type": "text",
            "value": "John Doe"
        }
    }
}

// Ejemplo de una acción de selector de fecha guardada
{
    "elementId": "birthday_picker",
    "meta": {
        "onboardingId": "onboarding_123",
        "screenClientId": "profile_screen",
        "screenIndex": 0,
        "screensTotal": 3
    },
"params": {
    "type": "datePicker",
    "value": {
        "day": 15,
        "month": 6,
        "year": 1990
        }
    }
}

Casos de uso

Enriquecer perfiles de usuario con datos

Si quieres vincular inmediatamente los datos introducidos con el perfil del usuario y evitar pedirle la misma información dos veces, debes actualizar el perfil de usuario con esos datos al gestionar la acción.

Por ejemplo, si pides a los usuarios que introduzcan su nombre en el campo de texto con el ID name y quieres usar ese valor como su nombre de pila, y también les pides su correo electrónico en el campo email, en el código de tu app quedaría así:

// Presentación a pantalla completa
const unsubscribe = view.registerEventHandlers({
  onStateUpdated(action, meta) {
    // Guardar preferencias o respuestas del usuario
    if (action.elementType === 'input') {
      const profileParams = {};
      
      // Mapear elementId al campo de perfil correspondiente
      switch (action.elementId) {
        case 'name':
          if (action.value.type === 'text') {
            profileParams.firstName = action.value.value;
          }
          break;
        case 'email':
          if (action.value.type === 'email') {
            profileParams.email = action.value.value;
          }
          break;
      }
      
      // Actualizar el perfil si hay datos que actualizar
      if (Object.keys(profileParams).length > 0) {
        adapty.updateProfile(profileParams).catch(error => {
          // gestionar el error
        });
      }
    }
  },
});

// Widget embebido
<AdaptyOnboardingView
  onboarding={onboarding}
  eventHandlers={{
    onStateUpdated(action, meta) {
      // Guardar preferencias o respuestas del usuario
      if (action.elementType === 'input') {
        const profileParams = {};
        
        // Mapear elementId al campo de perfil correspondiente
        switch (action.elementId) {
          case 'name':
            if (action.value.type === 'text') {
              profileParams.firstName = action.value.value;
            }
            break;
          case 'email':
            if (action.value.type === 'email') {
              profileParams.email = action.value.value;
            }
            break;
        }
        
        // Actualizar el perfil si hay datos que actualizar
        if (Object.keys(profileParams).length > 0) {
          adapty.updateProfile(profileParams).catch(error => {
            // gestionar el error
          });
        }
      }
    },
  }}
/>

Personalizar paywalls según las respuestas

Usando quizzes en los onboardings, también puedes personalizar los paywalls que muestras a los usuarios cuando completan el onboarding.

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

  1. Añade un quiz en el constructor de onboarding y asigna IDs con significado a sus opciones.
experience.webp
  1. Gestiona las respuestas del quiz según sus IDs y establece atributos personalizados para los usuarios.
// Presentación a pantalla completa
const unsubscribe = view.registerEventHandlers({
  onStateUpdated(action, meta) {
    // Gestionar respuestas del quiz y establecer atributos personalizados
    if (action.elementType === 'select') {
      const profileParams = {};
      
      // Mapear respuestas del quiz a atributos personalizados
      switch (action.elementId) {
        case 'experience':
          // Establecer el atributo personalizado 'experience' con el valor seleccionado (beginner, amateur, pro)
          profileParams.codableCustomAttributes = {
            experience: action.value.value
          };
          break;
      }
      
      // Actualizar el perfil si hay datos que actualizar
      if (Object.keys(profileParams).length > 0) {
        adapty.updateProfile(profileParams).catch(error => {
          // gestionar el error
        });
      }
    }
  },
});

// Widget embebido
<AdaptyOnboardingView
  onboarding={onboarding}
  eventHandlers={{
    onStateUpdated(action, meta) {
      // Gestionar respuestas del quiz y establecer atributos personalizados
      if (action.elementType === 'select') {
        const profileParams = {};
        
        // Mapear respuestas del quiz a atributos personalizados
        switch (action.elementId) {
          case 'experience':
            // Establecer el atributo personalizado 'experience' con el valor seleccionado (beginner, amateur, pro)
            profileParams.codableCustomAttributes = {
              experience: action.value.value
            };
            break;
        }
        
        // Actualizar el perfil si hay datos que actualizar
        if (Object.keys(profileParams).length > 0) {
          adapty.updateProfile(profileParams).catch(error => {
            // gestionar el error
          });
        }
      }
    },
  }}
/>
  1. Crea segmentos para cada valor de atributo personalizado.
  2. Crea un placement y añade audiencias para cada segmento que hayas creado.
  3. 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.