Click-Tracking
Algunas conversiones son solo un clic. Un botón "Reservar una llamada", un enlace saliente a tu checkout de Polar, un CTA "Prueba gratis" que vive en una app de terceros. Añade una de las cinco clases CSS de Beaconry a ese elemento y el clic dispara una conversión real del lado del servidor a cada canal que tengas conectado, sin snippet por proveedor y sin pegamento de JavaScript.
Qué hace
Los envíos de formularios y los eventos de comercio los capturan hooks dedicados (Beaconry vincula el hook real de envío de siete plugins de formularios y los hooks reales del funnel de WooCommerce, EDD y SureCart). Pero muchas acciones relevantes no son ni un formulario ni un evento de carrito: un anchor que abandona tu sitio hacia un checkout externo, un botón que abre un widget de reservas, un enlace "descargar la prueba", un CTA de precios que hace scroll hasta un iframe. No hay ningún hook del lado del servidor al que vincularse, porque la acción ocurre por completo en el navegador y a menudo navega fuera.
Click-Tracking cierra esa brecha con una captura genérica, impulsada por clases. Decoras el elemento con una clase de Beaconry, lo anotas opcionalmente con unos cuantos data-attributes, y Beaconry trata el clic como cualquier otro evento: pasa por el mismo endpoint REST del mismo origen y el mismo forwarder del lado del servidor, así que aterriza en Meta, Google Ads, TikTok y el resto como una conversión estándar. Ningún pixel de proveedor toca la página.
Los cinco slots de clase
Hay exactamente cinco slots. Cada uno se asigna a un evento publicitario estándar, deliberadamente, para que los canales de los proveedores conserven su señal de optimización en lugar de recibir un evento personalizado opaco sobre el que no pueden pujar. Añade la clase a cualquier elemento clicable (<a>, <button> o cualquier cosa a la que delegues un clic) y el evento de ese slot se dispara.
| Clase CSS | Evento GA4 | Meta CAPI | Uso típico |
|---|---|---|---|
.beaconry-checkout | begin_checkout | InitiateCheckout | Enlace saliente a un checkout externo (Polar, Stripe, un carrito alojado). |
.beaconry-lead | generate_lead | Lead | Un botón "Solicitar presupuesto" o "Hablar con ventas" que abre un widget, no un formulario nativo. |
.beaconry-signup | sign_up | CompleteRegistration | Un CTA "Crear cuenta" / "Prueba gratis" que pasa el relevo a una app externa. |
.beaconry-contact | contact | Contact (custom) | Un enlace click-to-call, un mailto, un botón "Escríbenos por WhatsApp". |
.beaconry-cta | select_content | ViewContent | Un CTA de engagement genérico que quieres contar pero que no es un checkout, lead, signup ni contacto. |
Una nota sobre los nombres de GA4, porque hace tropezar a la gente: el slot de checkout envía GA4 begin_checkout, no initiate_checkout. begin_checkout es la grafía canónica de GA4, y es el forwarder el que lo traduce por canal: Meta y TikTok reciben InitiateCheckout, Pinterest recibe initiate_checkout, Snapchat su propio evento de inicio de checkout, y así sucesivamente. Configuras una clase CSS y cada plataforma recibe el nombre que espera.
Los slots .beaconry-contact y .beaconry-cta se resuelven en eventos que no son eventos estándar de Meta, así que en Meta salen como eventos personalizados (Contact, ViewContent) mientras siguen siendo eventos estándar de primera clase en GA4. Es intencionado: un contacto o un CTA genérico es engagement real que vale la pena registrar, pero no debería hacerse pasar por un checkout o una compra.
Overrides por botón con data-attributes
La clase decide el evento. Cuatro data-attributes data-bcnr-* opcionales deciden el payload, por elemento, de modo que dos botones que comparten una clase pueden seguir llevando valores e ids de catálogo distintos.
| Atributo | Efecto |
|---|---|
data-bcnr-value | Valor monetario para este clic. Anula el valor por defecto por slot de la pestaña Tracking. Un número simple, en la moneda del evento. |
data-bcnr-currency | Moneda ISO de tres letras para este clic. Anula el valor por defecto de la pestaña Tracking. Se pasa a mayúsculas automáticamente; recurre a EUR si no hay nada definido en ningún sitio. |
data-bcnr-content-id | Id de catálogo / producto para este clic. Rellena el content_ids[] de Meta y construye una única entrada items[] de GA4 para que los informes estándar puedan atribuirlo. |
data-bcnr-content-name | Nombre legible para ese item, adjunto junto al id (Meta content_name, GA4 item_name). |
Ejemplo, un botón de checkout que pasa el relevo a Polar y le dice a cada canal exactamente qué se compró y por cuánto:
<a class="beaconry-checkout"
data-bcnr-value="149"
data-bcnr-currency="USD"
data-bcnr-content-id="studio-tier"
data-bcnr-content-name="Studio Tier"
href="https://buy.polar.sh/...">Buy Studio</a>Ese único clic despacha un begin_checkout a GA4 con un array items[] de un solo item, un InitiateCheckout a Meta con content_ids: ["studio-tier"] y valor 149 USD, y el evento correspondiente a cada otro canal conectado. El texto visible del botón se captura como una etiqueta corta (truncada a 100 caracteres) para la columna "Source" del Live-Dashboard, y si el elemento es un <a> también se registra su href, así puedes ver en el dashboard de qué enlace saliente vino una conversión.
Los cuatro atributos son opcionales. Omítelos y el clic se dispara igual, usando el valor por defecto por slot y la moneda que definiste en la pestaña Tracking (o valor cero sin datos de catálogo si nunca definiste uno). Importan sobre todo en los slots de checkout y lead, donde un valor es genuinamente útil para pujar por ROAS; un simple clic de contacto o CTA suele estar bien sin valor alguno.
Cómo habilitarlo
Click-Tracking está desactivado por defecto. Actívalo en wp-admin, Beaconry, Tracking, tarjeta Click-Tracking. En esa tarjeta defines los valores por defecto globales que se aplican cuando un elemento no tiene ningún override data-bcnr-*:
- Una moneda por defecto para todos los eventos de clic.
- Un valor por defecto por slot: uno para cada uno de checkout, lead, signup, contacto y CTA. Deja un slot en cero si esos clics no tienen valor monetario que asignar.
Guarda, y desde la siguiente carga de página Beaconry adjunta un único listener de clic delegado al documento. No hay nada que añadir a tu tema más allá de las propias clases CSS, y nada que pegar en botones individuales a menos que quieras un override por botón.
Cómo funciona por dentro
- Un listener delegado. Cuando la función está habilitada, el motor del navegador (
nl-data.js) registra un único listener de clic en el documento y resuelve el ancestro más cercano que coincida con alguna de las cinco clases medianteclosest(). Un listener para toda la página, no uno por botón, así que añadir elementos etiquetados más tarde (o renderizarlos dinámicamente) simplemente funciona. - Clase a evento. La clase coincidente selecciona el nombre del evento GA4 y el slot de valor por defecto. Los data-attributes, si están presentes, anulan valor, moneda, content id y content name por encima de los valores por defecto de la pestaña Tracking.
- Entrega vía sendBeacon. El evento se envía con
navigator.sendBeacon()al endpoint REST del mismo origen. Eso importa específicamente para el click-tracking: la mayoría de los clics etiquetados son enlaces salientes que navegan fuera de inmediato, y unfetchnormal sería cancelado por la navegación.sendBeaconentrega la petición al navegador para que la envíe en segundo plano, así la conversión sobrevive al abandono de la página. - Fan-out estándar del lado del servidor. En el servidor, el evento pasa por exactamente el mismo dispatch de
BCNR_Forwarderque todo lo demás, así que hereda el manejo de PII, el consent gate, la normalización multi-moneda, el mapeo de nombres de evento por canal y el grabador del Live-Dashboard. No existe código de clic específico por canal; un canal nuevo añadido a Beaconry recoge los eventos de clic automáticamente. - Espejo híbrido. Si ejecutas Hybrid Mode para un canal (su pixel de navegador está cargado para construir audiencias), el motor dispara también el evento estándar correspondiente en ese pixel con el mismo
event_idque usó el servidor, de modo que el proveedor deduplica las copias del navegador y del servidor. El Insight Tag de LinkedIn y el gtag.js de Google Ads no tienen una llamada de conversión del lado del cliente utilizable, así que reciben el clic solo del lado del servidor. Consulta Hybrid Mode.
Sin doble conteo con auto-eventos
El motor del navegador de Beaconry ya dispara eventos de engagement genéricos para enlaces salientes y clics tipo CTA. Cuando Click-Tracking está activado, el motor detecta que un elemento clicado lleva una clase de Beaconry y suprime su propio auto-evento genérico de saliente / CTA para ese clic, de modo que un botón etiquetado produce exactamente un evento (la conversión de click-tracking) y no dos. Puedes etiquetar un enlace que el motor habría registrado de otro modo como un clic saliente genérico sin preocuparte por un duplicado.
El kill switch (wp-config)
Para usuarios avanzados y bases de datos compartidas hay un override duro. Define esto en wp-config.php:
define( 'BCNR_CLICK_TRACKING_ENABLED', false );Cuando la constante está definida, gana sobre el toggle de la BD en el momento de lectura, exactamente igual que los otros overrides por constante de Beaconry. El caso de uso clásico es un sitio de staging que comparte (o fue clonado de) la base de datos de producción: producción tiene Click-Tracking habilitado en la BD, pero no quieres que staging dispare conversiones reales a tus cuentas publicitarias, así que defines la constante en false en el wp-config.php de staging y toda la función queda desactivada allí, independientemente de lo que diga la opción compartida. Defínela en true para forzar la activación de la misma manera.
Cuándo usarlo (y cuándo no)
Click-Tracking es la herramienta correcta cuando la conversión es un clic en algo que Beaconry no puede hookear del lado del servidor. Recurre a él para:
- Enlaces salientes a un checkout externo o de afiliado, donde la compra se completa fuera de tu dominio.
- Botones que abren un widget de terceros (reservas, chat, calculadora) sin ningún formulario de WordPress detrás.
- Enlaces click-to-call, mailto y de mensajería que quieres contar como contactos.
- Cualquier CTA de alta intención donde el clic en sí es la señal hacia la que quieres optimizar.
Es la herramienta equivocada cuando ya existe un hook dedicado, porque el hook es más preciso. En concreto:
- Formularios nativos: usa los adaptadores de formularios. Se disparan con el envío real (un clic en un botón de envío no es un envío, el usuario todavía podría fallar la validación), y hashean la PII reconocida para la calidad de coincidencia, algo que un clic no puede hacer.
- WooCommerce, EDD o SureCart: usa el funnel de comercio. Un
begin_checkoutreal del adaptador de comercio lleva el contenido y el valor reales del carrito; un clic.beaconry-checkoutsolo lleva lo que codifiques fijo en los data-attributes.
Regla general: si hay un hook del lado del servidor para la acción, prefiérelo y reserva Click-Tracking para los clics que no tienen otro sitio donde ser capturados. Las dos capas no entran en conflicto, el begin_checkout de comercio y un begin_checkout de clic son eventos distintos de fuentes distintas, pero normalmente quieres uno u otro para un botón dado, no ambos.