Si eres un gestor de contenido o un administrador de sitios web, probablemente ya estés familiarizado con la importancia de la interacción del usuario en tu plataforma. Una forma efectiva de fomentar esta interacción es a través de un sistema de comentarios, como DISQUS. Sin embargo, más allá de permitir que los usuarios expresen sus opiniones, también es crucial medir el impacto de estas interacciones. En este artículo, te mostraré cómo puedes seguir los comentarios de DISQUS utilizando Google Analytics y Google Tag Manager (GTM), lo que te permitirá obtener información valiosa sobre la participación de tus lectores.
Este tutorial está diseñado para ayudarte a rastrear eventos en Universal Analytics; si estás interesado en realizar un seguimiento con Google Analytics 4, también te proporcionaremos recursos para que puedas familiarizarte con este nuevo sistema de seguimiento.
Una vez que hayas instalado DISQUS en tu sitio, el siguiente paso es configurar Google Tag Manager. Te guiaré a través del proceso de crear un listener personalizado que monitoreará los envíos de comentarios, permitiéndote recopilar datos sobre la participación de tus usuarios.
Configuración del listener de DISQUS en Google Tag Manager
Para comenzar, deberás crear una etiqueta de HTML personalizada en Google Tag Manager. Esta etiqueta actuará como un listener que se activará cada vez que un visitante publique un comentario en tu sitio. Cuando esto ocurra, DISQUS generará un evento en dataLayer, que luego podrás utilizar como desencadenador en GTM.
A continuación, se describen los ajustes que deberás configurar para la etiqueta de HTML personalizada:
Título – cHTML – DISQUS Listener
Tipo – HTML personalizado
Código a pegar (encontrado en diversas fuentes):
<script>
var disqus_config = function () {
this.page.url = '{{Page URL}}'; // Reemplaza PAGE_URL con la variable de URL canónica de tu página
this.page.identifier = '{{YOUR_UNIQUE_DISQUS_ID}}'; // Reemplaza PAGE_IDENTIFIER con tu identificador único de DISQUS
this.callbacks.onNewComment = [function() {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'disqus_comment'
});
}];
};
</script>
Importante: debes reemplazar {{YOUR_UNIQUE_DISQUS_ID}} (Línea: 4) con tu propio identificador único. Para encontrarlo, abre el código de instalación de DISQUS y busca this.page.identifier. Si no puedes encontrarlo, es posible que estés utilizando un plugin de WordPress, y más adelante te explicaré cómo solucionar esto.
Una vez que hayas ajustado el código, guárdalo en GTM.
Prueba del listener de DISQUS
Ahora es momento de probar si tu listener de DISQUS está funcionando correctamente. Utiliza el modo de vista previa y depuración de GTM. Para activarlo, ve a la esquina superior derecha de tu cuenta de Google Tag Manager, expande las opciones del botón Publicar y haz clic en «Vista previa».
Una vez que el modo de vista previa esté habilitado, dirígete al sitio donde se encuentra el formulario de comentarios. Verás una consola de depuración en la parte inferior de la ventana de tu navegador que mostrará información detallada sobre tus etiquetas, incluyendo su estado de activación y los datos que se están procesando. Esta ventana de consola solo será visible en tu computadora mientras pruebas el sitio.
Escribe y publica un comentario utilizando el widget de comentarios de DISQUS. Debería aparecer el evento disqus_comment, lo que indica que alguien ha dejado un comentario en tu página. Este evento es clave, ya que lo utilizaremos como desencadenador para activar el evento en Google Analytics.
Creación de Variables y Triggers en GTM
Antes de crear el desencadenador en GTM, asegúrate de que la variable Page URL esté habilitada entre las variables incorporadas en Google Tag Manager.
Ahora, procede a crear un desencadenador con las siguientes configuraciones:
Título – Custom – DISQUS Comment
Tipo – Evento personalizado
Nombre del evento – disqus_comment
Este desencadenador se activa en – Todos los eventos personalizados
Creación de la etiqueta de evento de Google Analytics
Ya tienes creado el listener de DISQUS y el desencadenador personalizado, ahora solo falta la etiqueta de evento de Google Analytics que enviará los datos a GA.
Dirígete a la sección de Etiquetas y haz clic en Nuevo. Configura los siguientes ajustes:
Tipo de etiqueta – Universal Analytics
ID de seguimiento – Introduce tu ID de Google Analytics. Yo utilicé mi variable constante: Constante – GA UA.
Tipo de seguimiento – Evento
Categoría del evento – Comentario de DISQUS
Acción del evento – {{Page URL}}. Cada vez que se active un evento, Google Tag Manager enviará la dirección de la página donde ocurrió el envío del comentario.
En la sección de Activación, elige el desencadenador personalizado que acabas de crear.
¡Prueba de nuevo!
Es hora de volver a habilitar el modo de vista previa y depuración. Además, refresca la página donde estás probando el seguimiento de DISQUS.
Verifica si la etiqueta de evento de Google Analytics se activa solo cuando se envía un comentario.
Accede a los informes de eventos en tiempo real de Google Analytics. Tu Comentario de DISQUS debería aparecer allí en cuestión de segundos.
Si encuentras problemas con el modo de vista previa, te recomiendo consultar recursos adicionales para solucionar estos inconvenientes.
Usuarios de WordPress, ¡atención!
Si instalaste DISQUS utilizando un plugin de WordPress, hay algunas consideraciones especiales que debes tener en cuenta.
El this.page.identifier que mencionamos anteriormente puede tener uno de dos valores. En la mayoría de los casos, es un ID único de DISQUS (ej. 4991950000), pero cuando se utiliza el plugin de WordPress, este injecta un script diferente que utiliza ID de post + URL de la página como identificador único.
Esto incluirá una modificación en el código del listener de DISQUS para generar un nuevo tipo de identificador. Vamos a explorar cómo hacerlo.
Requisitos para la solución alternativa
Para rastrear los comentarios de DISQUS en un sitio de WordPress, deberás seguir estos pasos:
Crear una variable adicional que devuelva el ID del post.
Crear una variable adicional que devuelva el protocolo (http o https).
Finalmente, necesitarás hacer algunos ajustes menores en el código del Listener de DISQUS.
Plugin de DuracellTomi para GTM
Después de instalar el plugin de WordPress, ve a Configuración > Google Tag Manager > Básico > Posts y marca la casilla ID de Publicación. Luego, guarda los cambios.
Esto permitirá que cada vez que una página se cargue, el plugin de GTM enviará el valor del ID de Post al dataLayer, lo que podrás extraer fácilmente con GTM y utilizar en el código de tu listener de DISQUS.
Ahora, habilita el modo de vista previa y depuración de GTM, refresca la ventana de tu sitio web y selecciona el evento de vista de página en la consola de P&D. Busca la sección de dataLayer y deberías ver el postID.
Creación de dos variables
Ahora, necesitamos extraer el postID del dataLayer y convertirlo en una variable dentro de tu contenedor de Google Tag Manager. En tu cuenta de GTM, crea una nueva variable del tipo Data Layer Variable con las siguientes configuraciones:
Volviendo a nuestro identificador de DISQUS, este consiste en los siguientes puntos de datos:
ID de publicación – gracias a la variable de Data Layer que creamos anteriormente, podemos usar esta información en cualquier etiqueta o desencadenador dentro de GTM.
Protocolo (http o https) – necesitaremos crear una variable adicional de usuario, ya que esta información no está disponible en GTM por defecto.
Nombre de host (subdominio o dominio) – esta información está disponible, gracias a la variable incorporada Page Hostname en GTM.
/?=postID – esta parte también se obtendrá sin problemas gracias a la variable DLV Post ID.
Ahora, vamos a crear otra variable que devuelva el protocolo (http o https).
Edición del código del Listener de DISQUS
Abre el código del Listener de DISQUS y busca this.page.url.
<script>
var disqus_config = function () {
this.page.url = '{{Page URL}}'; // Reemplaza PAGE_URL con la variable de URL canónica de tu página
this.page.identifier = '4991950000'; // Reemplaza PAGE_IDENTIFIER con tu identificador único de DISQUS
this.callbacks.onNewComment = [function() {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'disqus_comment'
});
}];
};
</script>
En el ejemplo anterior, su valor es 4991950000. Pero en el caso de WordPress, debemos construirlo nosotros mismos para que coincida con el identificador mencionado anteriormente.
Ya que hemos creado todas las variables necesarias, esto se puede lograr fácilmente. En el listener de DISQUS, en lugar de:
Una de las características más impresionantes de Google Tag Manager es que reemplaza dinámicamente las variables con datos reales. Si GTM detecta una {{variable}} en cualquier etiqueta, desencadenador o variable, reemplaza estos valores con los datos actuales disponibles en ese momento, por ejemplo:
En lugar de {{dlv – postID}}, Google Tag Manager insertará el ID del post (ej. 1234).
En lugar de {{url – protocol}}, devolverá http o https (dependiendo de la configuración de tu sitio).
En lugar de {{Page Hostname}}, devolverá un dominio con un subdominio, como blog.ejemplo.com.
Como resultado, Google Tag Manager convertirá este ‘{{dlv – postID}} {{url – protocol}}://{{Page Hostname}}?p={{dlv – postID}}’ en este ‘1234 https://www.ejemplo.com?p=1234’.
¡Y eso es todo! Guarda la etiqueta del Listener de DISQUS, refresca el modo de vista previa y depuración, y vuelve a cargar la ventana de tu sitio. Prueba a enviar un nuevo comentario y debería aparecer el evento disqus_comment en GTM.
Para ofrecer las mejores experiencias, utilizamos tecnologías como las cookies para almacenar y/o acceder a la información del dispositivo. El consentimiento de estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o las identificaciones únicas en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones.
Funcional
Siempre activo
El almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas.
Preferencias
El almacenamiento o acceso técnico es necesario para la finalidad legítima de almacenar preferencias no solicitadas por el abonado o usuario.
Estadísticas
El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos.El almacenamiento o acceso técnico que se utiliza exclusivamente con fines estadísticos anónimos. Sin un requerimiento, el cumplimiento voluntario por parte de tu Proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarte.
Marketing
El almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en una web o en varias web con fines de marketing similares.
