Cómo evaluar la experiencia de usuario en WordPress con Net Promoter Score

En nuestro anterior post describíamos qué es el Net Promoter Score y cómo puede ayudarnos a identificar oportunidades de mejora en nuestros negocios, incluso en nuestro propio sitio web si lo que estamos analizando es una relación comercial digital.
Te recomiendo encarecidamente su lectura para poder entender el porqué de cada uno de las aspectos que detallaré a continuación sobre la medición del NPS en WordPress.

Qué características debe tener mi sistema de Net Promoter Score

Para que el sistema sea eficaz debemos tener en cuenta una serie de necesidades que deberemos cumplir:

1. Los datos deberán recogerse mediante un formulario que pregunta «¿Cuán probable es que recomiendes esta web a tus amigos o colegas?» al que se responderá con unos botones de radio (para que solo pueda escogerse una puntuación) de 1 a 10 definiendo la probabilidad.
2. Dicho formulario incluirá además dos preguntas de texto condicionales que se mostrarán solo si la puntuación ha sido de 1 a 8 ptos (Detractores y Pasivos) en un caso o de 9 o 10 ptos (Promotores) en el otro.
3. La información recogida por los formularios deberá exportarse a csv para poder ser importada en una hoja de cálculo y procesarse adecuadamente calculando los porcentajes y el valor final del NPS. Además nos permitirá mantener ordenadas las opiniones de las preguntas condicionales.
4. El formulario deberá aparecer mediante un trigger (un «disparador») que dependerá de cada proyecto: tiempo en el sitio, determinadas páginas, scroll, etc que mostrará un popup o similar.
5. Que sea lo más económico posible 😉 En este caso la solución que propongo es 100% gratis.

Qué plugins debo usar

Existe un antiguo plugin para monitorizar el NPS, NPS Monitoring,  pero no ha sido actualizado en los últimos 5 años, así que no recomiendo para nada su uso por potenciales problemas de seguridad e incompatibilidades.

Actualización agosto 2020: Ha aparecido un nuevo plugin en el repositorio que funciona bastante bien (tiene algún detalle menor que corregir) y simplifica mucho el proceso para mediciones simples. Se llama NPS computy.

Sin embargo en su lugar vamos a usar un paquete de 2 plugins + 2 extensiones que nos van a ayudar a completar nuestra tarea con éxito.

El plugin de formularios es de lo más sencillo de este proceso, escoge aquel con el que te sientas más cómodo siempre y cuando trabaje con shortcodes (la inmensa mayoría), porque más adelante los necesitaremos.

Personalmente me decanto por Contact Form 7, un verdadero clásico. Puede que no sea el más fácil de configurar inicialmente (carece de un sistema de bloques para arrastrar y soltar como otros) pero ese es también uno de sus encantos porque lo hace ligero, rápido y eficiente.

Añadiremos un nuevo formulario en la sección de «Contacto» que ha aparecido en nuestro escritorio de WordPress tras instalar y activar el plugin. Veras que ya incluye algo de código en la pestaña Formulario (un formulario de contacto clásico básico) pero puedes borrarlo porque no nos hace falta.

Ahí debemos escribir nuestra pregunta de NPS: «¿Cuán probable es que recomiendes esta web a tus amigos o colegas?». A continuación debemos añadir los botones de selección de 1 a 10.

El código resultante será algo parecido a:

 <label>¿Cuán probable es que recomiendes esta web a tus amigos o colegas?
 [radio vota "1" "2" "3" "4" "5" "6" "7" "8" "9" "10"]</label>
[submit "Enviar"]

A continuación deberemos incluir las preguntas condicionales que nos ayudaran a explicar la valoración recibida. Recuerda que para los votos de 1 a 8 ptos será «¿Qué podemos hacer para obtener una mejor valoración?» y para votos de 9 o 10 ptos será «¿Qué es lo que más te gusta?».

Cómo crear un formulario NPS con campos condicionales

Precisamente uno de los problemas de CF7 es que no dispone de campos condicionales de serie. Pero hay una solución excelente que es un plugin que funciona como extensión de CF7, Conditional Fields for Contact Form 7.

Esta extensión nos permite usar un nuevo código que agrupa los campos sometidos a condiciones. De esta forma el código completo resultante será:

<label> ¿Cuán probable es que recomiendes esta web a tus amigos o colegas?
[radio vota "1" "2" "3" "4" "5" "6" "7" "8" "9" "10"]</label>
[group NPSdetractores]
<label> ¿Qué podemos hacer para obtener una mejor valoración?
[text nps-0-8] </label>
[/group]
[group NPSpromotores]
<label> ¿Qué es lo que más te gusta?
[text nps-9-10] </label>
[/group]
[submit "Enviar"]

Además ha aparecido una nueva pestaña en el editor de formularios «Conditional Fields» que nos permite definir cuáles son las condiciones. Te dejo una captura de pantalla sobre cómo debería quedar en nuestro ejemplo.

Si quieres puedes usar el botón de importación de la parte inferior y utilizar este código para crear fácilmente las mismas condiciones:

show [NPSdetractores] if [vota] equals "1"
show [NPSdetractores] if [vota] equals "2"
show [NPSdetractores] if [vota] equals "3"
show [NPSdetractores] if [vota] equals "4"
show [NPSdetractores] if [vota] equals "5"
show [NPSdetractores] if [vota] equals "6"
show [NPSdetractores] if [vota] equals "7"
show [NPSdetractores] if [vota] equals "8"
show [NPSpromotores] if [vota] equals "9"
show [NPSpromotores] if [vota] equals "10"
 

Como podrás intuir si revisas el código, existen dos grupos (las dos preguntas) que se muestran solo si se da la condición de una votación determinada.

Para acabar solo nos queda definir cómo será la forma en la que se almacenarán los formularios, para lo que usaremos la pestaña «Correo electrónico». Ahí pondremos la siguiente información (coloca tus datos en los campos borrosos):

Si prefieres copiar-pegar el código del cuerpo del mensaje es el siguiente:

[vota],[nps-0-8],[nps-9-10]

La idea detrás de este código es disponer solo de la información que es relevante para el NPS (la votación y la respuesta a la pregunta condicional) separada por comas, lo que nos facilitará procesarla en nuestra hoja de cálculo.

Con esto tendremos nuestro formulario completo.

Como sabrás si has trabajado anteriormente con CF7, este envía todos los formularios que recibe por correo electrónico a donde tu lo indiques, normalmente a tu cuenta de correo. Pero nosotros no necesitamos toda esa información en nuestro buzón, queremos procesarla de forma conjunta.

Cómo exportar los formularios recibidos como un csv

Como CF7 no guarda copia de los formularios localmente en tu WordPress, necesitamos una nueva extensión que le dote de esa funcionalidad. Dicha extensión es el plugin Flamingo (del mismo autor que CF7, por cierto).

Una vez activado comprobaremos que crea una nueva opción en nuestro escritorio donde se almacenan todos los formularios que se van recibiendo. En la captura de pantalla puedes ver varios de ejemplo que he creado usando el formulario en una página o entrada para ser probado. Para ello solo debes añadir el shortcode del formulario donde desees y rellenarlo cuantas veces quieras en una vista previa.

Fíjate como sobre la lista de formularios recibidos tenemos un botón de exportación. Esta función nos permite exportar todos los datos recogidos en nuestros formularios NPS en un único CSV.

Si abres ese CSV en tu software de hojas de cálculo preferido verás algo parecido a esto (dependiendo de las respuestas recogidas, obviamente). De esta tabla podemos obviar la columna de la fecha (si es que no es relevante, dependerá de tu caso) y quedarnos con el resto. Para el cálculo del valor NPS nos vale con solo la primera columna, la de la valoración. Pero volveremos sobre esto más abajo.

Cómo «disparar» nuestro formulario automáticamente

Hasta aquí hemos visto cómo definir el formulario pero además tenemos que especificar cómo, o más bien cuándo, queremos que se dispare a los visitantes de nuestra web. Debemos tener en cuenta que es muy poco eficaz que invitemos a los usuarios a visitar una determinada url para dejar su valoración y será mucho más práctico usar una formula un poco más proactiva.

Atención: la fórmula de visitar una url o hacer clic en un botón para responder a la encuesta NPS podría ser interesante en un email de confirmación de un pedido de un ecommerce o algo similar. No lo descartemos a priori.

Sin embargo lo más habitual es que los formularios NPS aparezcan cuando llevas un tiempo navegando por la página, cuando haces un checkout en un ecommerce o cuando estás apunto de salir del sitio web, por ejemplo. El formato en el que el formulario aparece en estos casos suele ser el de popup, como decíamos al principio del post.

Para poder gestionar este tema usaremos Holler Box, un estupendo plugin freemium de generación de leads. Es muy similar al conocido Optin Monster pero en este caso cuenta con una versión gratuita muy completa.

Personalmente Holler Box me encanta. Es muy fácil de configurar y funciona muy bien. Nos va a permitir lanzar cualquier mensaje (incluidos aquellos que se generan mediante shortcodes, como el formulario NPS que nos ocupa) en un popup condicionado por un disparador.

Una vez instalado y activado, nos creará una nueva entrada en nuestro escritorio llamada «Holler Box» (¡oh! sorpresa). Hay podemos crear una nueva «Box», es decir, un popup.

En este nuevo Box deberemos definir primero el título o nombre del mismo (en algunos tipos de box este título se mostrará) y a continuación, precisamente, el tipo de Box que deseamos usar.

Los de tipo Noticación y Falso Chat son los menos invasivos y que por tanto tendrán menos interacciones (también respetarán más a tus usuarios 😉 ). Personalmente me decanto por popup aunque cada proyecto puede requerir una elección diferente.

A continuación tenemos la caja de texto donde podemos definir el contenido del popup. Nosotros nos limitaremos a pegar el shortcode de nuestro formulario de Contact Form 7 (en la lista de formularios puedes ver el shortcode que corresponde a cada uno de los que hayas creado), ya que incluye todo el contenido que necesitamos.

Te recomiendo no añadir más información. Recuerda que la gran virtud de el sistema Net Promoter Score es que es muy rápido y ligero.

Después debemos definir el apartado «Display», donde escogeremos algunas de las plantillas disponibles. De nuevo te recomiendo encarecidamente elegir la «Custom», que respetará lo que has definido en el apartado anterior y no añadirá ninguna floritura extra. En esta sección tenemos también algunas opciones sobre los estilos visuales que se van a emplear. Es útil para mantener la linea estética de tu sitio web.

Y por fin llegamos al meollo del asunto donde definiremos la segmentación de a quien se va a mostrar el formulario y cuando:

• En qué tipo de páginas debe mostrarse (entradas y/o páginas).
• A que tipo de visitantes debe mostrarse (logueados o no, visitantes nuevos o recurrentes).
• Si el formulario debe desaparecer automáticamente con el tiempo o cuando el usuario haga clic en cerrar.
• Con qué frecuencia debe aparecer a cada usuario
• En qué tipo de dispositivos debe mostrarse (móvil y/o escritorio)

Destacamos en particular la elección del trigger, el disparador del evento del formulario donde puedes ver que podemos escoger entre:

1. 

   Que se muestre en cuanto alguien entre en el sitio (no tiene mucho sentido salvo que seas una marca muy reconocida y desees evaluar la marca y no el sitio web).
2. Que se muestre con un retardo de X segundos. Muy útil para estimar que el usuario ya ha consumido parte del contenido disponible en la página.
3. Cuando se haya avanzado con el scroll en la página actual
4. Cuando parezca que el usuario va a salir de la página (en realidad cuando el ratón se desplaza hacia fuera del marco de la página).

Personalmente me gustan la 2 y la 3 pero puedes escoger aquella que sea más lógica en la naturaleza de tu sitio web. Si tienes alguna duda sobre esto te invito a compartirla en los comentarios del post.

Una vez guardada la configuración ya puedes testear tu popup simulando ser un visitante del sitio. Si no funcionara, revisa que las normas definidas en la configuración no entran en conflicto con la situación que estás simulando.

Con todo esto ya tenemos nuestro sistema en marcha, solo nos faltan los visitantes y que rellenen los formularios (lo más difícil, todo hay que decirlo).

Cómo calcular el NPS en una hoja de cálculo

Cuando hayas recopilado una cantidad notable de formularios, cuantos más mejor, los exportamos como vimos antes y nos llevamos el CSV a nuestro software de hoja de cálculo. Allí podrás realizar los cálculos tal y como describimos en nuestro post sobre qué es el Net Promoter Score.

Si lo prefieres, te invito a usar mi propia hoja de cálculo de Google Spreadsheets donde ya tengo todas las fórmulas definidas y con solo pegar los datos de tus formularios obtendrás todos los porcentajes y tu NPS. Primero debes hacer una copia de la misma para poder editar los datos de los formularios.

Ver la hoja de cálculo para medir el Net Promoter Score

No olvides que también tenemos las respuestas a las preguntas condicionales, que deberás procesar de una forma manual o semi-automática para interpretar los insights que van a aportarte. Son la clave de mejorar de tu NPS, recuérdalo.

Con este último paso concluye este extenso tutorial de cómo medir el Net Promoter Score en WordPress. Me ha quedado bastante más extenso de lo que había proyectado pero he preferido no dejar nada por supuesto y que todo el que lo lea sea capaz de implementar un sistema analítico completo de medición del NPS.

Espero que te haya sido de utilidad y te invito a dejar en los comentarios cualquier matiz, o aporte que nos sirva a los demás. También te agradecería que me contarás si lo has aplicado y ha funcionado como esperabas 🙂