Surveyjs. Un servicio para la creación de encuestas

¿Has completado alguna vez una encuesta de satisfacción? ¿Has necesitado implementarla en alguno de tus proyectos?

Digamos que se te pide que implementes una encuesta en tu proyecto Web.

Digamos además que el cliente quiere poder modificar esa encuesta de vez en cuando, en base a sus propios criterios.

¿Qué harías? ¿crearías todo el sistema desde cero?

Es una opción, pero no hay necesidad de reinventar la rueda. E invariablemente, cuando en desarrollo de Software aparece un problema recurrente (y el de las encuestas lo es), más pronto que tarde aparecen una o varias soluciones en el mercado.

Hoy vengo a hablar de SurveyJS. SurveyJS proporciona la capacidad de embeber encuestas en aplicaciones web.

Se trata de una librería Javascript que cubre todo el flujo de vida de creación, realización y análisis de los resultados para encuestas.

Elementos de SurveyJS

Encuesta embebida en la aplicación

El centro del servicio es la presentación al usuario de los formularios de encuesta y la recogida de resultados.

Ejemplo de encuesta creada con surveyJS

SurveyJS define una estructura JSON para representar las encuestas. A modo de ejemplo, el formato JSON que representa la encuesta anterior es el siguiente:

{
    "completedHtml": "<h3>Thank you for your feedback.</h3> <h5>Your thoughts and ideas will help us to create a great product!</h5>",
    "completedHtmlOnCondition": [
        {
            "expression": "{nps_score} > 8",
            "html": "<h3>Thank you for your feedback.</h3> <h5>We glad that you love our product. Your ideas and suggestions will help us to make our product even better!</h5>"
        }, {
            "expression": "{nps_score} < 7",
            "html": "<h3>Thank you for your feedback.</h3> <h5> We are glad that you share with us your ideas.We highly value all suggestions from our customers. We do our best to improve the product and reach your expectation.</h5><br/>"
        }
    ],
    "pages": [
        {
            "name": "page1",
            "elements": [
                {
                    "type": "rating",
                    "name": "nps_score",
                    "title": "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
                    "isRequired": true,
                    "rateMin": 0,
                    "rateMax": 10,
                    "minRateDescription": "(Most unlikely)",
                    "maxRateDescription": "(Most likely)"
                }, {
                    "type": "checkbox",
                    "name": "promoter_features",
                    "visibleIf": "{nps_score} >= 9",
                    "title": "What features do you value the most?",
                    "isRequired": true,
                    "validators": [
                        {
                            "type": "answercount",
                            "text": "Please select two features maximum.",
                            "maxCount": 2
                        }
                    ],
                    "hasOther": true,
                    "choices": [
                        "Performance", "Stability", "User Interface", "Complete Functionality"
                    ],
                    "otherText": "Other feature:",
                    "colCount": 2
                }, {
                    "type": "comment",
                    "name": "passive_experience",
                    "visibleIf": "{nps_score} > 6  and {nps_score} < 9",
                    "title": "What is the primary reason for your score?"
                }, {
                    "type": "comment",
                    "name": "disappointed_experience",
                    "visibleIf": "{nps_score} notempty",
                    "title": "What do you miss and what was disappointing in your experience with us?"
                }
            ]
        }
    ],
    "showQuestionNumbers": "off"
}

Proporcionando una especificación de encuesta en el formato anterior, la librería de SurveyJS mostrará el formulario correspondiente y se encargará de recopilar los resultados. En cuanto a la apariencia visual, SurveyJS permite cambiar el estilado del formulario mediante CSS.

En cuanto a la especificación JSON que define la encuesta, ¿es necesario aprenderla para poder crear nuestras encuestas?. Bueno, esa es una opción, pero SurveyJS también ofrece una herramienta de creación de encuestas que genera esa especificación. Pero además, se proporcionan los medios para integrar dicha herramienta dentro de una aplicación propia.

Herramienta de creación de encuestas

Además de generar el formulario de las encuestas y generar los resultados, SurveyJS proporciona una herramienta para generar la encuesta. Esta herramienta permite construir distintos tipos de preguntas, distintos tipos de entradas para la encuesta (texto libre, elementos de rating, ranking, selección de imágenes, elección de distintas alternativas, estructuración de la encuesta en distintos campos…). todo esto se construye de forma visual. El resultado de la herramienta es la especificación JSON de la que se hablaba en el apartado anterior.

En la página Web de SurveyJS podemos encontrar dicha herramienta en funcionamiento y utilizarla para generar el formato JSON que luego utilizaremos para embeber la encuesta en nuestra aplicación. Pero además, la librería también proporciona una instancia de esta herramienta, para que nosotros mismos, como desarrolladores podamos ofrecerla en una aplicación propia.

Herramienta de creación de encuestas de SurveyJS

Análisis de resultados

La encuesta, claro, genera unos resultados. Y normalmente el objetivo de la realización de una encuesta es el análisis de esos resultados. Una opción, por ejemplo, es volcarlos en una hoja de cálculo y a partir de ahí poder extraer información relevante, generar gráficos, etc.

Pero además, SurveyJS ofrece sus propias herramientas de análisis que también podemos integrar en nuestras aplicaciones.

Ejemplo de la herramienta de análisis de SurveyJS

Integración

SurveyJS es una librería Javascript. Por tanto es posible integrarla con cualquier aplicación Javascript cliente. Además, también proporciona un empaquetado React, de forma que se pueda trabajar directamente con elementos React. La mejor manera de entender cómo se realiza la integración, es seguir los tutoriales de la propia página de SurveyJS (en especial, la sección titulada ‘Spend a Few Hours and Replicate What the Big Guys Do‘).

¿Te ha parecido interesante? ¿Crees que puedes hacer un buen uso de esta librería?

Comparte

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *