.png)
.webp)
Esta guía te ayudará a añadir un botón a tu sitio web que abra un chat de WhatsApp. Si la URL incluye un parámetro gclid (de Google Ads), se incluirá en el texto del mensaje, lo que resulta útil para el seguimiento de clientes potenciales de campañas publicitarias.
Qué hace esta integración
- Muestra un botón “Escribir en WhatsApp” en su página web.
- Lee el parámetro gclid de la URL (si está presente).
- Genera un enlace de WhatsApp que incluye el valor gclid en el texto del mensaje.
- Actualiza el href del botón dinámicamente.
Paso 1: Agregar el botón HTML
Coloca el siguiente código HTML donde quieras que aparezca el botón de WhatsApp:
"wa-link" href= "#" target= "_blank" class = "btn btn-success" >Escribir a WhatsApp
Este botón se actualizará más tarde mediante JavaScript.
Paso 2: Agregar el código JavaScript
Antes del cierre</body> etiqueta, inserte el siguiente script:
function scriptToInclude(id, phone) { // 1. Read URL parameters
const params = new URLSearchParams(window.location.search); const gclid = params.get('gclid');
// 2. Generate WhatsApp link
const waBase = 'https://wa.me/' + phone; const text = 'Google Ads (gclid) '; const waLink = gclid ? `${waBase}?text=${encodeURIComponent(text + gclid)}` : waBase;
// 3. Update the button href
const linkEl = document.getElementById(id); if (linkEl) { linkEl.href = waLink; } }
// Call the function with your parameters
scriptToInclude('wa-link', '123456789');
Reemplaza 123456789 con tu propio número de WhatsApp en formato internacional sin "+" ni espacios .
Uso de la función generador de scripts
Si está insertando botones dinámicamente o necesita flexibilidad en varias páginas, puede utilizar esta función de plantilla:
función generateWhatsAppHrefUpdateScript ( id, teléfono ) { return ` (function() { const params = new URLSearchParams(window.location.search); const gclid = params.get('gclid'); const waBase = 'https://wa.me/' + '${phone}'; const text = 'Google Ads (gclid) '; const waLink = gclid ? waBase + '?text=' + encodeURIComponent(text + gclid) : waBase; const linkEl = document.getElementById('${id}'); if (linkEl) linkEl.href = waLink; })(); ` ; }
Ejemplo de uso:
documento .write(generateWhatsAppHrefUpdateScript( 'wa-link' , '7910000000' ));
Resumen
Este método te ayuda a rastrear leads de Google Ads al pasar el valor gclid al mensaje de WhatsApp. Puedes usar esta configuración en cualquier sitio que permita insertar JavaScript personalizado.
