.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:
<a id="wa-link" href="#" target="_blank" class="btn btn-success">Escribir en 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:
<script>
function scriptToInclude(id, phone) {
// 1. Leer parámetros de URL
const params = new URLSearchParams(window.location.search);
const gclid = params.get('gclid');
// 2. Generar enlace de WhatsApp
const waBase = 'https://wa.me/' + phone;
const text = 'Google Ads (gclid) ';
const waLink = gclid ? `${waBase}?text=${encodeURIComponent(text + gclid)}` : waBase;
// 3. Actualizar el href del botón
const linkEl = document.getElementById(id);
if (linkEl) {
linkEl.href = waLink;
}
}
// Llamar a la función con sus parámetros
scriptToInclude('wa-link', '123456789');
</script>
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, phone) {
return `
<script>
(function() {
const params = new URLSearchParams(window.location.search);
const gclid = params.get('gclid');
const waBase = 'https://wa.me/' + '${phone}';
const text = 'Anuncios de Google (gclid) ';
const waLink = gclid ? waBase + '?text=' + encodeURIComponent(text + gclid) : waBase;
const linkEl = document.getElementById('${id}');
if (linkEl) linkEl.href = waLink;
})();
</script>
`;
}
Ejemplo de uso:
document.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.
