Esta es una traducción que desde EGA Futura ofrecemos como cortesía a toda la Ohana y comunidad de programadores , consultores , administradores y arquitectos de Salesforce para toda Iberoamérica .
El enlace a la publicación original, lo encontrarás al final de este artículo.
…
El panorama de la privacidad de los datos cambia constantemente y, para agregar más complejidad a los desarrolladores, cada empresa tiene sus propias necesidades y requisitos de seguridad. La nueva API JavaScript de seguimiento y consentimiento de Pardot ofrece a los desarrolladores una mayor flexibilidad y control sobre cómo y cuándo se lleva a cabo el seguimiento de usuarios. En esta publicación, le presentaremos la nueva API y le mostraremos cómo usarla para sus requisitos de consentimiento de cookies y cómo integrarla en aplicaciones de una sola página (SPA).
Cómo configurar la API de JavaScript de seguimiento y consentimiento
El primer paso es optar por usar la API desde la página Cuenta en Pardot. Si no realiza este paso, no se registra ninguna visita a la página y no se da ninguna respuesta para respetar la privacidad de los usuarios que interactúan con su contenido. Puede hacerlo haciendo clic en el botón Editar en la página Cuenta y marcando "Activar la API de JavaScript de seguimiento y consentimiento". Para obtener más información sobre la configuración de la cuenta, consulte la documentación de Pardot .
Para aprovechar nuestra nueva API en sus sitios, deberá generar el código de seguimiento en su configuración de Pardot.
A continuación, copiará y pegará este script en el HTML de su página web antes de la etiqueta del cuerpo de cierre (</body>) y realizará algunos cambios para optar por la API. Echemos un vistazo más de cerca a cómo se ven esos cambios.
Cómo funciona la API de JavaScript de seguimiento y consentimiento
El siguiente bloque de código muestra qué cambios deben realizarse en el script de seguimiento generado para aprovechar la nueva API. Hay tres elementos clave:
- En la línea 13, generamos un objeto JavaScript global que se adjunta al objeto
window. Esto se denomina "objeto de seguimiento" y se utilizará para interactuar con la API. - Es obligatorio inicializar el objeto rastreador usando el comando crear antes de que pueda ocurrir cualquier rastreo, como se muestra en la línea 18.
- Una vez que haya inicializado el objeto, puede enviar comandos posteriores, como el comando
sendPageViewen la línea 21, al objeto de seguimiento. Esos comandos se agregan a la cola del objeto rastreador y se ejecutan sincrónicamente.
<script> IDPI = 123456; piCId = 654321; // Cuenta opcional Pardot Tracker Nombre de host del dominio, será // respaldo a pi.pardot.com si no se proporciona piDomain = 'ir.ejemplo.com'; (función() { // El valor src ahora cargará pdt.js en lugar de pd.js var s=document.createElement('script');s.type='text/javascript';s.async=true;s.src='//'+piDomain+'/pdt.js?aid='+piAId; var c=document.getElementsByTagName('script')[0];c.parentNode.insertBefore(s,c); // Inicializar la cola ventana['pdt'] = ventana['pdt'] || function(){(ventana['pdt'].cq = ventana['pdt'].cq || []).push(argumentos);}; })(); // La creación de un rastreador de análisis requiere lo siguiente: // pdt('create', <id de cuenta de pardot + 1000>, <id de campaña de pardot + 1000>, 'go.example.com'); pdt('crear', piAId, piCId, piDomain); // Enviar comandos a la cola pdt('sendPageView');
</script>
Si ya está familiarizado con nuestro mecanismo de seguimiento anterior, puede notar inmediatamente que las variables piAId y piCId ahora son valores enteros. Esas variables, que representan su cuenta y sus ID de campaña, anteriormente eran valores de cadena.
Una vez que se crea el objeto de seguimiento, hay una amplia gama de comandos que puede enviar a la cola, incluidos (pero no limitados a): actualizar el valor de un campo rastreado, configurar el estado de suscripción de un usuario, mostrar la opción en el banner y enviar una solicitud de análisis a Pardot. También es posible interactuar con el objeto de seguimiento y los comandos asociados fuera del fragmento de seguimiento. Todo lo que necesita hacer es volver a llamar a la API de Pardot desde JS en línea u otro archivo JS. Puede encontrar la lista de comandos y la sintaxis correcta en la descripción general de la API de seguimiento y consentimiento .
Cómo implementar el manejo de banners de consentimiento de cookies
Las leyes y regulaciones de consentimiento de cookies pueden variar según su región. Nuestra API puede ayudarlo a garantizar que siempre cumpla con las normas y respete la privacidad de quienes interactúan con su contenido. Hidratamos el banner de consentimiento con HTML de las preferencias de suscripción de seguimiento de su cuenta, lo que le da el poder de mostrar el banner cuando sea necesario.
Para adquirir el consentimiento inicial de sus usuarios, puede agregar el comando showConsentBanner a su fragmento de seguimiento después de crear el objeto de seguimiento.
<script> /*
* Comienzo del fragmento de seguimiento
*/ pdt('crear', piAId, piCId, piDomain); pdt('showConsentBanner');
</script>
Una llamada a showConsentBanner desde la API de JavaScript de seguimiento y consentimiento volverá a mostrar el banner de consentimiento, lo que permitirá a los visitantes del sitio web realizar cambios en sus preferencias de consentimiento. Esto se puede hacer en forma de botones o enlaces en su sitio web que los usuarios pueden usar para volver a abrir el banner.
<button type="button" id="show_banner_button" onClick="pdt('showConsentBanner')"> Configuración de consentimiento de cookies
</botón>
hideConsentBanner es otro comando dentro de la API que le permite manejar los cambios de consentimiento. Cuando pasa un valor booleano, establecerá el estado optIn , tal como lo hace cuando hace clic en "Sí" o "No" en el banner. También ocultará cualquier HTML que exista bajo su ID de banner de consentimiento.
<button type="button" id="hide_banner_button" onClick="pdt('hideConsentBanner', nulo)"> Ocultar configuración de consentimiento de cookies
</botón>
Consulte la descripción general de la API de seguimiento y consentimiento para obtener más información sobre los diferentes comandos de consentimiento y sus parámetros.
Cómo implementar la API para aplicaciones de una sola página
Nuestro código de seguimiento original heredado se ejecuta solo durante la carga de la página o cuando el usuario envía algo al servidor. Esto lo hizo incompatible con los SPA, ya que no requieren cargas de página completas. Con nuestra nueva API, llenamos este vacío para permitirle usar el seguimiento de Pardot en todo tipo de aplicación web.
Los SPA pueden variar según el marco que esté utilizando. El siguiente fragmento de código muestra una implementación genérica que rastrea cuando un usuario navega en nuestro SPA a una página diferente.
- A partir de la línea 1, incorporamos el fragmento de seguimiento actualizado
- Las líneas 18 y 19 contienen etiquetas de anclaje para los elementos de navegación.
- A partir de la línea 23, implementamos una función de invocación inmediata (también conocida como IIFE ), que hace dos cosas:
- Crea una función local,
trackView, que se usará para enviar comandos al objeto rastreador. - Consulta los elementos de navegación en nuestra página y adjunta un oyente
onclicka cada elemento. El eventoonclickactivará la invocación de la funcióntrackView.
- Crea una función local,
<!-- Incruste la biblioteca de análisis de Pardot -->
<tipo de script='texto/javascript'>
var piDomain = 'ir.ejemplo.com'; (función(){ var s=document.createElement('script');s.type='text/javascript';s.async=true;s.src='//'+piDomain+'/pdt.js'; var c=document.getElementsByTagName('script')[0];c.parentNode.insertBefore(s,c); ventana['pdt'] = ventana['pdt'] || function(){(ventana['pdt'].cq = ventana['pdt'].cq || []).push(argumentos);};
})(); // La creación de un rastreador de análisis requiere lo siguiente:
// pdt('create', <id de cuenta de pardot + 1000>, <id de campaña de pardot + 1000>, 'go.example.com');
pdt('crear', 0001, 0002, piDominio);
</script>
<!-- Finalizar la inserción de análisis de Pardot --> <!-- ejemplo de navegación por el menú -->
<a href="/inicio">Inicio</a>
<a href="/acerca de">Acerca de</a>
<!-- fin de la navegación del menú de ejemplo --> <script>
(función() { // Actualice el título de la página rastreada y envíe una vista de página a Pardot función trackView (título de la página) { pdt('conjunto', 'título', título de página); pdt('sendPageView'); } // Agregar detectores de eventos para clics en enlaces de navegación // Los clics en estos enlaces enviarán páginas vistas a Pardot let navLinks = document.getElementsByClassName('navegación-enlace'); for (sea i = 0; i < navLinks.length; i++) { navLinks[i].addEventListener('click', trackView(navLinks[i].text), false); }
})(); </script>
Resumen
¡La API de seguimiento y consentimiento de Javascript ahora está disponible para que la use! Si bien el consentimiento de cookies y las aplicaciones de una sola página son dos ejemplos importantes de cómo usar la API, también se puede utilizar para una amplia gama de casos de uso. Para obtener más información sobre la API de JavaScript de seguimiento y consentimiento, consulte la descripción general oficial de la API de seguimiento y consentimiento y las notas de la versión de Spring '22 .
Sobre el Autor
Katherine Pellman es ingeniera de software de Pardot. Se unió a Salesforce en agosto de 2021 después de graduarse de la Universidad de Texas con un título en Ciencias de la Computación.
…
Esta es una traducción realizada por EGA Futura, y este es el link a la publicación original: https://developer.salesforce.com/blogs/2022/02/how-to-work-with-pardots-new-tracking-consent-javascript-api.html
