Instalar el widget mediante Google Tag Manager

¿Por qué usar GTM?

Google Tag Manager proporciona un control avanzado de la implementación sin modificar el código de tu sitio web:

• Segmentación por URL: Mostrar el widget solo en páginas o secciones específicas

• Filtrado por dispositivo: Implementar widgets diferentes para ordenadores y dispositivos móviles

• Enrutamiento por idioma: Mostrar widgets específicos por idioma según la estructura de la URL

• Pruebas A/B: Activar diferentes configuraciones del widget para segmentos de usuarios

Requisitos previos

Requisitos previos de ViaSay

• Asegúrate de haber creado un widget de ViaSay

👍 Implementa de forma invisible y lanza cuando estés listo

Establece la distribución de audiencia en el 0 % durante la configuración. El código del widget se implementa en producción, pero permanece oculto. Cuando estés listo para lanzarlo, ajusta el porcentaje en Integración para controlar la visibilidad, sin necesidad de cambiar el código.

Requisitos técnicos

• Google Tag Manager instalado en tu sitio web

• Acceso al contenedor de GTM con editar permisos

• Comprensión básica de los conceptos de GTM (etiquetas, activadores, variables)

Pasos de instalación

Paso 1: Crear un activador

Los activadores definen cuándo y dónde se carga tu widget.

1. Ve a Activadores en la barra lateral izquierda

2. Haz clic en Nuevos

3. Haz clic en el área de configuración del activador

4. Selecciona Vista de página como tipo de activador

5. Configura el ámbito del activador:

Implementar en todas las páginas:

• Selecciona Todas las vistas de página

Implementar en URL específicas:

• Selecciona Algunas vistas de página

• Añadir condición: URL de la página contiene /your-path/

Ejemplo: mostrar el widget solo en las páginas de preguntas frecuentes:

'Display widget only on FAQ pages:'
Page URL contains /faq

'Display widget only on FR pages:'
Page URL contains /fr

1. Asigna un nombre claro a tu activador (p. ej., «Widget - Todas las páginas», «Widget - Solo preguntas frecuentes», «Widget - Escritorio FR»)

2. Haz clic en Guardar

Paso 2: Crear una etiqueta

Las etiquetas contienen el código real del widget.

1. Ve a Etiquetas en la barra lateral izquierda

2. Haz clic en Nuevos

3. Haz clic en el área de configuración de la etiqueta

4. Selecciona HTML personalizado como tipo de etiqueta

5. Pega el código de tu widget de ViaSay (desde Build > Integrate > Channels > Integration pestaña)

6. Desplázate hasta Activación sección

7. Haz clic para añadir un activador

8. Selecciona los activadores creados en el paso 1

9. Ponle un nombre a tu etiqueta (p. ej., "ViaSay Widget", "ViaSay Widget - Desktop")

10. Haz clic en Guardar

Paso 3: Probar y publicar

1. Haz clic en Vista previa en la esquina superior derecha

2. Introduce la URL de tu sitio web para iniciar el modo de depuración

3. Verifica que el widget se cargue en las páginas previstas

4. Comprueba la lista de Etiquetas activadas sección confirma que tu etiqueta se ha ejecutado

5. Haz clic en Enviar para publicar los cambios

6. Añade un nombre y una descripción para la versión

7. Haz clic en Publicar

Configuraciones avanzadas

Orientar a tipos de dispositivos específicos

Crea una variable JavaScript personalizada para detectar el tipo de dispositivo:

1. Ve a Variables en la barra lateral izquierda

2. Haz clic en Nuevos en Variables definidas por el usuario

3. Selecciona JavaScript personalizado como tipo de variable

4. Añade esta función:

function() {
  return window.innerWidth <= 768 ? 'mobile' : 'desktop';
}

 

1. Llámala deviceType

2. Crea activadores independientes para móvil y escritorio:

   • Activador: deviceType es igual a mobile

   • Activador: deviceType es igual a desktop

Implementar varios widgets

Implementa diferentes configuraciones de widgets según la URL o el contexto:

Crea etiquetas independientes con distintos tokens de widget para cada activador.

Pasar variables personalizadas al widget

Enriquece las conversaciones con el contexto del usuario mediante variables del canal del usuario. Consulta la documentación sobre las variables del canal del usuario →

Solución de problemas

⚠️ Impacto de los bloqueadores de anuncios: GTM se bloquea con frecuencia debido a sus asociaciones con Google Analytics. Si la máxima visibilidad del widget es fundamental, utiliza una instalación mediante HTML directo.

GTM frente a la instalación mediante HTML directo

Documentación de GTM

• Referencia de tipos de activadores de GTM

• Referencia de tipos de variables de GTM

• Variables integradas de GTM

Próximos pasos

• Configura la apariencia del widget en Formato y diseño

• Configura saludos específicos para cada contexto en Saludos

• Pasa datos del usuario con variables personalizadas

• Supervisa el rendimiento por segmento de URL en Monitor