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

1. Ingresá a Google Tag Manager.
2. Hacé clic en Empezar gratis o iniciá sesión con tu cuenta Google.
3. Seleccioná Crear cuenta.
4. Completá:

• Nombre de la cuenta
• País
• Nombre del contenedor (podés usar el nombre de tu tienda)
• Plataforma: Web

1. Creá el contenedor.
2. 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

1. Ingresá a admin.pedix.app
2. Andá a:

Panel de control → Google Analytics y Facebook Pixel

1. Buscá el campo:

Google Tag Manager

1. Pegá tu código:

GTM-XXXXXXX

1. 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

1. Ingresá a tu cuenta de Google Tag Manager
2. Andá a Etiquetas → Nueva
3. Poné un nombre a la etiqueta:

Ejemplo:

Botón WhatsApp flotante

1. Elegí:

Etiqueta → HTML personalizado

1. 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

1. En la etiqueta, hacé clic en Activadores
2. Elegí Nuevo
3. Seleccioná:

Todas las páginas / All pages

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

4. Guardá el activador.

Paso 5: Publicar los cambios

1. Guardá la etiqueta.
2. En GTM hacé clic en Enviar
3. Publicá los cambios.
4. 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.