Cómo agregar un botón flotante de WhatsApp en tu tienda usando Google Tag Manager

Cómo agregar un botón flotante de WhatsApp en tu tienda usando Google Tag Manager

Si querés sumar elementos personalizados a tu tienda sin tocar código, podés hacerlo con Google Tag Manager (GTM).

En esta guía te mostramos cómo instalar Google Tag Manager en Pedix y crear un botón flotante de WhatsApp.

>

Esta funcionalidad es ideal si querés personalizar tu tienda con scripts, eventos o herramientas avanzadas.

Paso 1: Crear una cuenta en Google Tag Manager

• Ingresá a Google Tag Manager.

• Hacé clic en Empezar gratis o iniciá sesión con tu cuenta Google.

• Seleccioná Crear cuenta.

• Completá:

• Nombre de la cuenta

• País

• Nombre del contenedor (podés usar el nombre de tu tienda)

• Plataforma: Web

• Creá el contenedor.

• Google te mostrará un código como este:

GTM-XXXXXXX

Copiá únicamente ese identificador.

>

En Pedix solo necesitás el código del contenedor (el que empieza con GTM-).

Paso 2: Vincular Google Tag Manager en Pedix

• Ingresá a admin.pedix.app

• Andá a:

Panel de control → Google Analytics y Facebook Pixel

• Buscá el campo:

Google Tag Manager

• Pegá tu código:

GTM-XXXXXXX

• Hacé clic en Guardar

Listo. Tu tienda ya quedó conectada con Google Tag Manager.

Paso 3: Crear la etiqueta para el botón de WhatsApp

• Ingresá a tu cuenta de Google Tag Manager

• Andá a Etiquetas → Nueva

• Poné un nombre a la etiqueta:

Ejemplo:

Botón WhatsApp flotante

• Elegí:

Etiqueta → HTML personalizado

• Pegá este código:

<script>
(function() {
var phoneNumber = '5493517337251';
var message = encodeURIComponent('Hola, quiero saber más sobre...');

var whatsappButton = document.createElement('div');
whatsappButton.style.position = 'fixed';
whatsappButton.style.bottom = '20px';
whatsappButton.style.right = '20px';
whatsappButton.style.backgroundColor = '#25D366';
whatsappButton.style.width = '50px';
whatsappButton.style.height = '50px';
whatsappButton.style.borderRadius = '50%';
whatsappButton.style.boxShadow = '0 2px 10px rgba(0,0,0,0.2)';
whatsappButton.style.cursor = 'pointer';
whatsappButton.style.display = 'flex';
whatsappButton.style.alignItems = 'center';
whatsappButton.style.justifyContent = 'center';
whatsappButton.style.transition = 'transform 0.5s ease-in-out';

var whatsappIcon = document.createElement('img');
whatsappIcon.src = 'https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg';
whatsappIcon.style.width = '60%';

whatsappButton.appendChild(whatsappIcon);

whatsappButton.onclick = function() {
window.open('https://wa.me/' + phoneNumber + '?text=' + message, '_blank');
};

document.body.appendChild(whatsappButton);

var position = 0;
var direction = 1;

function float() {
position += direction * 0.05;
if (position > 5) direction = -1;
if (position < 0) direction = 1;

whatsappButton.style.transform =
'translateY(' + position + 'px)';

requestAnimationFrame(float);
}

float();

})();
</script>

Personalizá el botón

Modificá estos dos valores:

Número de WhatsApp

var phoneNumber = '5493517337251';

Reemplazalo por tu número con código de país.

Mensaje inicial

var message = encodeURIComponent('Hola, quiero saber más sobre...');

Podés cambiarlo por el mensaje que quieras.

Ejemplos:

• Hola, quiero hacer una consulta

• Quiero pedir más información

• Me interesa este producto

Paso 4: Configurar el activador

• En la etiqueta, hacé clic en Activadores

• Elegí Nuevo

• Seleccioná:

Todas las páginas / All pages

Esto hará que el botón aparezca en toda tu tienda.

• Guardá el activador.

Paso 5: Publicar los cambios

• Guardá la etiqueta.

• En GTM hacé clic en Enviar

• Publicá los cambios.

• Probá tu tienda en modo incógnito para verificar:

• Que aparece el botón

• Que abre WhatsApp correctamente

• Que el mensaje precargado funciona

¿Qué podés hacer con Google Tag Manager además de esto?

Una vez instalado GTM también podés sumar:

• Scripts personalizados

• Eventos de conversión

• Pixels adicionales

• Herramientas externas

• Seguimiento avanzado de marketing

• Integraciones sin tocar código

Importante

• Revisá siempre que el script funcione correctamente antes de publicarlo.

• Si hacés cambios, recordá volver a Enviar/Publicar en GTM.

• Podés adaptar colores, tamaño o posición del botón editando el código.

¿Necesitás ayuda?

Si necesitás asistencia para configurarlo o adaptar otros scripts en tu tienda, comunicate con soporte desde tu panel y te ayudamos.