Rastrea Calendly con Google Tag Manager y GA4

Actualizado: 2 de abril de 2025

Si has llegado hasta aquí, es probable que hayas integrado un calendario de Calendly en tu sitio web. Gracias a esta herramienta, los visitantes pueden programar citas directamente desde tu página, y ahora deseas visualizar esos datos en tu analítica, como en Google Analytics 4 (GA4). Si adivinamos correctamente, has llegado al lugar indicado. En este artículo, te explicaré cómo hacer un seguimiento de Calendly utilizando Google Tag Manager (GTM) y cómo enviar estos datos a GA4 como eventos.

Antes de continuar: requisitos previos

Es fundamental que tengas al menos un conocimiento básico de Google Tag Manager. Si no es así, te recomiendo que revises este tutorial primero. Para aquellos que deseen profundizar en el uso de GTM, también se pueden encontrar cursos especializados aquí.

Interacciones que puedes rastrear con Calendly

Al realizar la integración, podrás registrar las siguientes interacciones:

• 1. Vista de la página de perfil: Se registra cuando un usuario accede a la página donde está incrustado el calendario de Calendly.
• 2. Vista de un tipo de evento: Se captura cuando se visualiza un tipo específico de evento dentro del calendario, por ejemplo, al hacer clic en una opción de cita.
• 3. Selección de fecha y hora: Se registra cuando un visitante elige una fecha y hora para una cita.
• 4. Evento programado: Se captura cuando un usuario finaliza el proceso de programación de un evento.

Nota: La solución que se presenta en este artículo no proporciona datos más detallados, como la fecha y hora exactas seleccionadas o el tipo de evento programado. Sin embargo, esta información es útil para un seguimiento general, permitiendo saber si los visitantes están interactuando y programando eventos en tu calendario.

Código del listener para Google Tag Manager

Para comenzar a rastrear Calendly con Google Tag Manager, necesitas crear una etiqueta HTML personalizada en tu contenedor GTM. Dirígete a Etiquetas > Nueva > HTML personalizado y pega el siguiente código:

<script>
window.dataLayer = window.dataLayer || [];
window.addEventListener('message', function(e) {
    if (e.data.event && e.data.event.indexOf('calendly') === 0) {
        window.dataLayer.push({
            'event': 'calendly',
            'calendly_event': e.data.event.split('.')[1]
        });
    }
});
</script>

Este código actúa como un listener que estará atento a los eventos de Calendly en la página (que son enviados por el calendario incrustado) y los hará disponibles en el Data Layer. A continuación, se pueden enviar uno de los cuatro eventos:

• profile_page_viewed – Se activa cuando se ve la página de perfil.
• event_type_viewed – Se activa cuando se visualiza un tipo de evento.
• date_and_time_selected – Se activa cuando se selecciona una fecha y hora.
• event_scheduled – Se activa cuando se programa un evento con éxito.

En la sección de activación de la etiqueta, selecciona el disparador “Todas las páginas”. Si tu calendario de Calendly solo está disponible en ciertas páginas, puedes crear un disparador de vista de página más específico, asegurándote de que la condición sea URL de la página contiene XXXX (reemplaza XXX con la URL de la página donde se ha incrustado el calendario).

Guarda la etiqueta y es momento de probar si el listener funciona. Haz clic en el botón Vista previa en la parte superior derecha del interfaz de Google Tag Manager.

Introduce la URL de la página donde tienes incrustado el calendario de Calendly y haz clic en conectar. Esto activará el modo de vista previa y depuración y abrirá otra pestaña con tu sitio web. A veces, puede aparecer una advertencia, pero ignórala y no hagas clic en “habilitar” en ella.

Ahora, interactúa con el calendario incrustado y programa un evento.

Regresa a la pestaña de la vista previa en GTM; allí deberías ver eventos de calendly. Expande uno de ellos y verifica que se registran todas las interacciones mencionadas anteriormente.

Creación de un disparador personalizado y variable de Data Layer

Más adelante en este artículo, crearemos una etiqueta de evento de Google Analytics 4 para enviar los datos a GA. Pero primero, necesitamos definir cuándo se enviará esa información, que será cuando el evento ‘calendly’ esté visible en el modo de vista previa. Para ello, debemos crear un disparador de evento personalizado. En Google Tag Manager, ve a Disparadores > Nuevo > Evento personalizado y configura lo siguiente.

Luego, crearemos una variable de capa de datos para identificar qué evento ocurrió: ¿fue profile_page_viewed o event_scheduled? O tal vez otro evento diferente.

Accede a Variables > Nueva > Variable de capa de datos y establece lo siguiente:

Debes ingresar “calendly_event” como nombre de la variable, ya que es el nombre del parámetro que se envía a la capa de datos.

Creación de una etiqueta de Google Analytics 4

Asumimos que ya tienes la etiqueta de configuración de GA4 en tu contenedor y conoces su función. Si no, sería útil que revises este tutorial primero.

Ahora ha llegado el momento de enviar los eventos de Calendly a Google Analytics 4. En Google Tag Manager, ve a Etiquetas > Nueva > Google Analytics > etiqueta de evento GA4.

Ingresa tu ID de medición.

Los nombres de los eventos pueden ser calendar_profile_page_viewed o calendar_event_scheduled. Tener nombres únicos para los eventos facilita el análisis, como en la exploración de rutas. Así, podrás ver claramente qué tipo de evento se ha registrado.

En la sección de activación de la etiqueta, selecciona el disparador de evento personalizado que acabas de crear. La configuración final de la etiqueta podría verse de la siguiente manera:

Prueba de la configuración

Guarda la etiqueta y haz clic nuevamente en el botón de vista previa en la interfaz de GTM para actualizar el modo de vista previa. La página con el calendario incrustado se recargará.

Nota: Recuerda la advertencia en el modo de vista previa sobre habilitar la depuración para el dominio de calendly.com. Esto podría ocasionar inconvenientes durante las pruebas de configuración. Si intentas refrescar el modo de vista previa en GTM, intentará conectarse al dominio de calendly.com en lugar del dominio de tu sitio web. Si esto sucede, cierra las pestañas del modo de vista previa y de tu sitio, y vuelve a hacer clic en el botón de Vista previa en la interfaz de GTM para reiniciar el modo de vista previa.

Interacciona nuevamente con el calendario y programa un evento.

Regresa a la pestaña del modo de vista previa en GTM y verifica si ves todos esos eventos de calendly. Si es así, haz clic en cada uno para comprobar que tu etiqueta de GA4 se ha activado correctamente.

Ahora, dirígete a tu propiedad de Google Analytics 4 > Administrador > y visita DebugView.

Localiza tu dispositivo en la parte superior izquierda y, en el flujo de eventos, deberías ver tus eventos de calendario. Haz clic en esos eventos para inspeccionar qué tipo de datos contienen. Si todo está correcto, haz clic en el botón de Enviar en tu interfaz de GTM y publica una nueva versión del contenedor. ¡El seguimiento de Calendly con Google Tag Manager ha comenzado!

Si el modo de depuración de GA4 no está funcionando como debería, consulta esta guía.

Solución de problemas comunes

A continuación, se presentan algunos escenarios comunes de solución de problemas en caso de que tu configuración no funcione correctamente.

• 1. El listener no parece funcionar: Si no ves eventos de calendly en el modo de vista previa, intenta activar la etiqueta listener más tarde (por ejemplo, al cargar la ventana). También verifica la consola de JavaScript del navegador, ya que podría haber errores de Calendly o de Google Tag Manager visibles allí.
• 2. Los eventos de Calendly aparecen en el modo de vista previa, pero la etiqueta no se activa: Esto puede deberse a un error tipográfico en tu disparador, o quizás los controles de consentimiento integrados estén impidiendo que la etiqueta se active. Para obtener más detalles, consulta esta guía.

Marcar calendar_event_scheduled como un evento clave (opcional)

De todos los eventos de Calendly que puede rastrear este listener, uno es más importante que los demás: calendar_event_scheduled. Este representa el objetivo final que deseas que tus visitantes logren al interactuar con el calendario.

Es recomendable señalar a Google Analytics que este evento es relevante. Para ello, debes marcarlo como «evento clave» (anteriormente conocido como conversión).

Dirígete a Google Analytics administrador > Eventos clave y haz clic en Nuevo evento clave, ingresa calendar_event_scheduled y haz clic en Guardar.

Después de esto (y de publicar el contenedor de GTM), espera entre 24 y 48 horas. Luego, podrás ver los datos de este evento clave en informes como los de Adquisición de tráfico.

Rastrear Calendly con Google Tag Manager: un proceso detallado

En este artículo has aprendido cómo rastrear Calendly incrustado utilizando Google Tag Manager y enviar esos eventos a Google Analytics 4. El proceso es el siguiente:

• Crea una etiqueta HTML personalizada con el código del listener y actívala en las páginas donde esté incrustado el calendario de Calendly.
• Crea una variable de capa de datos y un disparador de evento personalizado.
• Crea una etiqueta de evento de Google Analytics 4 que envíe los datos a Google Analytics.
• No olvides probar todo utilizando el modo de depuración de GA4.