Iubenda logo
Genera tus documentos

Documentación

Tabla de contenidos

Cómo implementar la Consent Solution en Joomla! con ChronoForms

Este tutorial utiliza ChronoForms, una extensión muy popular para Joomla!, para explicar cómo puedes integrar nuestra Consent Solution con tus formularios de Joomla!. Si estás utilizando otra extensión, este tutorial también puede serte útil, ya que la forma de implementación es generalmente la misma.

Para utilizar la Consent Solution con ChronoForms, tendrás que usar el método de implementación de JavaScript.

En resumen, tienes que:

  • integrar el código de la Consent Solution;
  • crear (o modificar) tu formulario de forma que incluya las etiquetas id necesarias; y
  • enviar los datos de consentimiento a las API de iubenda.

Para empezar, copia el código que encontrarás en Consent Solution > Integrar > JavaScript.

A continuación, pega este código dentro del head de todas tus páginas. Puedes hacerlo a través de uno de los siguientes métodos:

  • accede directamente al Template Manager; o
  • si no te sientes cómodo editando directamente los archivos de temas, puedes usar un complemento para la integración de los scripts y de los códigos, como HeadTag. Una vez que hayas instalado el plugin, puedes acceder a head entrando en Extensions > Plugins > System – Headtag > Menu Item Tags y pega el script de la Consent Solution.
Joomla! - HeadTag extension and Consent Solution code

2. Crea o modifica tu formulario

Una vez que hayas añadido el código de la Consent Solution en el head de tu web, accede a tu dashboard de Joomla! y crea un formulario (por ejemplo, “contacto”) usando la extensión ChronoForms.

ChronoForms for Joomla! - New form

Si ya estás utilizando ChronoForms en tu web, simplemente entra en tu página de resumen de formularios (Components > ChronoForms6) y haz clic en el formulario que te gustaría integrar con la Consent Solution.

Aquí tienes el formulario de contacto que vamos a utilizar en nuestro ejemplo de implementación (nombre, dirección de correo electrónico, mensaje y suscripción a la newsletter):

ChronoForms for Joomla! - Form

En ChronoForms, tendrá este aspecto:

ChronoForms for Joomla! - Form

Una vez que hayas definido el área de tu formulario, tendrás que personalizar el formulario para mapear sus diversas entradas de forma que la Consent Solution pueda identificar y extraer la información proporcionada por tus usuarios en los distintos puntos de entrada.

Para hacer el mapeo, puedes utilizar la función load (o submit) con el objeto map. Para que la función load/submit funcione, necesitarás:

  • un id para el elemento form;
  • distintos nombres para todos los inputs subject y preferences;
  • un id para el elemento submit;

a. Haz clic en el icono de ajustes al lado del área de formulario y añade un id a tu formulario:

ChronoForms for Joomla! - Form configuration

b. De forma similar al “Form ID”, añade un id a los campos de texto (en nuestro ejemplo, nombre, email y mensaje):

ChronoForms for Joomla! - Text field configuration

Y a las casillas de verificación (en nuestro caso, “generic” y “newsletter”):

ChronoForms for Joomla! - Checkbox configuration

Para una casilla de verificación obligatoria como la “generic” anterior, asegúrate de:

  • Desactivar la validación Chronoforms - Checkbox configuration
  • Desactivar la opción “ghost” Chronoforms - Checkbox configuration
  • Añade dos eventos desencadenantes que habilitarán/deshabilitarán el botón de envío (ten en cuenta que estamos usando #contact-submit, tal y como se indica en la configuración general del botón de envío): Chronoforms - Checkbox configuration

c. Por último, añade también un id al botón de envío:

ChronoForms for Joomla! - Submit button configuration

Puede que también quieras añadir un mensaje de confirmación para que se muestre a tus usuarios una vez que hayan completado el formulario (submit > Actions):

ChronoForms for Joomla! - Message configuration

Guarda los cambios y asegúrate de que tu formulario se publique.

Integración del formulario

Si estás modificando un formulario ya existente de tu sitio web, salta a la siguiente sección, de lo contrario (si acabas de crear el formulario), copia el código generado por ChronoForms:

{chronoforms6}contact{/chronoforms6}

Y pégalo en una página de tu web (por ejemplo, “Ponte en contacto con nosotros”).

Ahora que tu formulario está preparado, debes asegurarte de que envía la información a la Consent Solution cuando el usuario lo rellena y lo envía. Hay dos maneras de hacerlo:

  • el método load te permite enviar los datos de la Consent Solution a las API de iubenda asincrónicamente;
  • El método submit te permite enviar los datos de la Consent Solution a las API de iubenda sincrónicamente.

Método load

La función load te permite vincular campos del objeto consent a los campos de entrada de tu <form> y registrar automáticamente el consentimiento, ya sea configurando una función de activación en submitElement: o mediante programación a través de un activador dedicado.

De forma predeterminada, este método escribe en localStorage para protegerte de cualquier pérdida de datos en caso de que se cargue una nueva página antes de que JavaScript haya terminado de ejecutarse.

Advertencia

La función load tan solo se debe invocar después de la declaración del objeto form (tal y como se puede ver en el ejemplo a continuación).

Aquí está la función load con el objeto map:

<script>
    _iub.cons_instructions.push(["load", {
        submitElement: document.getElementById("contact-submit"),
        form: {
            selector: document.getElementById("contact-form"),
            map: {
                subject: {
                    first_name: "name",
                    email: "email"
                },
                preferences: {
                    generic: "generic",
                    newsletter: "newsletter"
                }
            }
        },
        consent: {
            legal_notices: [{
                    identifier: "privacy_policy",
                },
                {
                    identifier: "cookie_policy",
                }
            ],
        }
    }])
</script>

Ten en cuenta lo siguiente en relación con el código anterior:

  • los ID de contact-submit y contact-form;
  • el first_name y email subject mapeo (recuerda que tienes cuatro opciones no editables disponibles: first_name, last_name, full_name y email);
  • las preferencias de la casilla de verificación, donde puedes utilizar las claves que prefieras (en nuestro caso, generic y newsletter);
  • los legal_notices, que son en gran medida automáticos si sincronizas tus documentos legales de iubenda con la Consent Solution (simplemente usa los identificadores estándar privacy_policy y cookie_policy).

Asegúrate de incluir el método load después del formulario (por ejemplo, dentro del pie de página de tu página de contacto), ¡y listo!

Una vez que hayas recopilado tus consentimientos, podrás ordenar y analizar tus datos en el dashboard de la Consent Solution.

Consulta la documentación de JS para obtener más información sobre el método load.

Método submit

El método submit te permite enviar los datos de la Consent Solution a las API de iubenda sincrónicamente.

Advertencia

Ten en cuenta que este método no funcionará si hay una redirección después de enviar el formulario.

<script>
    document.getElementById("contact-submit").onclick = function() {
        sendToConsentSolution()
    };

    function sendToConsentSolution() {
        var inputName = document.getElementById("name").value;
        var inputEmail = document.getElementById("email").value;
        var inputMessage = document.getElementById("message").value;
        var subjectId = inputEmail.toLowerCase().replace(/\W/g, '-'); //optional
        _iub.cons_instructions.push(["submit", {
            form: {
                selector: document.getElementById("contact-form"),
                map: {
                    subject: {
                        first_name: "name",
                        email: "email"
                    },
                    preferences: {
                        generic: "generic",
                        newsletter: "newsletter"
                    }
                }
            },
            consent: {
                subject: {
                    id: subjectId
                },
                legal_notices: [{
                        identifier: "privacy_policy"
                    },
                    {
                        identifier: "cookie_policy"
                    }
                ]
            }
        }])
    }
</script>

Ten en cuenta lo siguiente en relación con el código anterior:

  • los ID de contact-submit y contact-form;
  • el first_name y email subject mapeo (recuerda que tienes cuatro opciones no editables disponibles: first_name, last_name, full_name y email);
  • las preferencias de la casilla de verificación, donde puedes utilizar las claves que prefieras (en nuestro caso, generic y newsletter);
  • los legal_notices, que son en gran medida automáticos si sincronizas tus documentos legales de iubenda con la Consent Solution (simplemente usa los identificadores estándar privacy_policy y cookie_policy);
  • opcional: en lugar de dejar que se genere automáticamente, podemos personalizar el subjectId con la dirección de correo electrónico, por ejemplo, del asunto, todo en minúsculas y con el símbolo “-” en lugar de “.” y “@” (de esta manera para john.doe@iubenda.com el subjectId se convertiría en john-doe-iubenda-com).

Asegúrate de incluir el submit método después del formulario (por ejemplo, dentro del pie de página de tu página de contacto), ¡y listo!

Una vez que hayas recopilado tus consentimientos, podrás ordenar y analizar tus datos en el dashboard de la Consent Solution.

Consulta la documentación de JS para obtener más información sobre el método submit.

Más información