NPS (Net Promoter Score)

El componente NPS es una herramienta de recopilación de comentarios que te ayuda a medir la lealtad y satisfacción del cliente a través de la metodología Net Promoter Score. Presenta a los usuarios una escala simple del 1 al 10 para calificar la probabilidad de que recomienden tu servicio.

Características

• Escala de valoración simple del 1 al 10
• Preguntas de seguimiento según la puntuación
• Recolección opcional de correo electrónico
• Apariencia personalizable
• Múltiples posiciones de visualización
• Diseño responsivo
• Soporte para configuración remota

Instalación

import { NPS } from './ruta-al-archivo/nps';

Uso Básico

// Inicializar con configuración predeterminada
const nps = new NPS({
  tracker: tuInstanciaDeTracker,
  question: '¿Qué tan probable es que recomiendes este servicio?',
  themeColor: '#2563eb',
  position: 'bottom-center',
  autoShow: false,
  delay: 2000,
  mode: 'manual'
});
 
// Mostrar el widget manualmente
nps.open();

Opciones de Configuración

Opción	Tipo	Predeterminado	Descripción
tracker	SystemTracker	Requerido	Instancia del rastreador para análisis
question	string	'¿Qué tan probable es que recomiendes este servicio?'	Pregunta principal del NPS
themeColor	string	'#2563eb'	Color principal del widget
position	string	'bottom-center'	Posición del widget en la pantalla
autoShow	boolean	false	Si se muestra el widget automáticamente
delay	number	2000	Retraso en ms antes de mostrar automáticamente el widget
mode	`'manual'	'remote'`	'manual'

Posiciones Disponibles

• bottom-right (predeterminado)
• bottom-left
• bottom-center
• top-right
• top-left

Métodos

open()

Abre manualmente el widget NPS.

nps.open();

close()

Cierra manualmente el widget NPS.

nps.close();

Recolección de Datos

Cuando un usuario envía su puntuación NPS, se recopilan los siguientes datos:

• Puntuación NPS (1-10)
• Comentario opcional
• Dirección de correo electrónico opcional
• URL actual
• Agente de usuario
• Marca de tiempo
• ID de negocio

Estilos

El componente incluye estilos predeterminados pero se pueden personalizar usando las siguientes clases CSS:

• .nps-card - Contenedor principal
• .nps-close - Botón de cierre
• .nps-question - Texto de la pregunta
• .nps-options - Contenedor de botones de puntuación
• .nps-btn - Botón de puntuación individual (1-10)
• .nps-input - Campo de entrada de correo electrónico
• .nps-text - Área de texto para comentarios
• .nps-submit - Botón de envío
• .nps-footer - Texto del pie de página

Cálculo del NPS

El Net Promoter Score se calcula como:

NPS = % de Promotores (9-10) - % de Detractores (0-6)

• Promotores (9-10): Entusiastas leales que seguirán comprando y refiriendo a otros
• Pasivos (7-8): Clientes satisfechos pero poco entusiastas que son vulnerables a ofertas de la competencia
• Detractores (0-6): Clientes insatisfechos que pueden dañar tu marca a través de comentarios negativos

Mejores Prácticas

1. Momento: Muestra la encuesta NPS después de que el usuario haya tenido tiempo de experimentar tu producto
2. Frecuencia: No encuestes al mismo usuario con demasiada frecuencia (recomendado: cada 3-6 meses)
3. Seguimiento: Considera implementar acciones de seguimiento basadas en la puntuación
4. Personalización: Adapta las preguntas de seguimiento según la puntuación del usuario
5. Información accionable: Utiliza los comentarios para realizar mejoras significativas en tu producto

Compatibilidad con Navegadores

• Chrome (última versión)
• Firefox (última versión)
• Safari (última versión)
• Edge (última versión)
• Navegadores móviles

Manejo de Errores

El componente incluye manejo de errores para:

• Problemas de red durante el envío
• Configuraciones inválidas
• Envíos duplicados

Seguridad

• Todos los datos se transmiten a través de HTTPS
• Las direcciones de correo electrónico son opcionales y solo se recopilan con el consentimiento del usuario
• No se recopilan datos personales sensibles