Cómo insertar Zopim Live Chat con Tag Manager, Eva Torres

Eva Torres HHP - Guest Blogging en luciamarin.es

Hola a todos soy Eva Torres, agradezco a Lucía que me haya permitido hacer este post sobre cómo instalé el webchat de hhp.es (sitio web diseñado con WordPress) usando Google Tag Manager. La herramienta que use es esta https://www.zopim.com/ (Zopim Live Chat de Zendesk). Cabe destacar que me gusta mucho por lo fácil que es de integrar, todo es muy visual, la configuración de los agentes, departamentos, respuestas rápidas…, la he usado en Magento, en WordPress y en Joomla también.

En la versión avanzada, te permite hacer un seguimiento automático de Eventos en Google Analytics, sin configuración adicional. Las acciones de eventos aparecen bajo la categoría Zopim Livechat, al seleccionarlo podemos ver:

el número de veces en el que el widget del chat es clicado,
número de chats iniciados,
número de veces en que un formulario de pre-chat es enviado y
el número de veces en que se deja un mensaje mientras el chat está offline.

Podemos encontrar información detallada sobre el seguimiento de las conversiones y objetivos con Google Analitycs en el siguiente enlace de la documentación de Zopim Livechat.

Para WordPress, además, existe un plugin que permite la integración del zopim, pero aprovechando que estaba haciendo el curso de Google Tag Manager y que no quería insertar más código directamente en la web, ni instalar otro plugin, seguí los pasos que detallo a continuación para hacer una integración sencilla y rápida mediante TAG MANAGER.

Partimos desde la base de que ya tenemos el widget configurado dentro de la herramienta.

Cómo instalar Zopim Livechat con Google Tag Manager

Paso 1. Buscamos el código para embeber el webchat

Para encontrar el código que utilizaremos en TAG MANAGER, debemos entrar en la pestaña widget que se encuentra dentro de settings y hacer clic en el apartado de Getting started. Es el código que debería ser insertado entre las etiquetas <head> de tu web. Copiamos ese código y vamos a nuestro contenedor.

El código luce como el siguiente:

Código para embeber zopim

<!–Start of Zendesk Chat Script–>
<script type=»text/javascript»>
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute(«charset»,»utf-8″);
$.src=»https://v2.zopim.com/?4tClBV551hd8NtlbmcTbUeSgvKZfm1vI»;z.t=+new Date;$.
type=»text/javascript»;e.parentNode.insertBefore($,e)})(document,»script»);
</script>
<!–End of Zendesk Chat Script–><!–Start of Zendesk Chat Script–>
<script type=»text/javascript»>
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute(«charset»,»utf-8″);
$.src=»https://v2.zopim.com/?4tClBV551hd8NtlbmcTbUeSgvKZfm1vI»;z.t=+new Date;$.
type=»text/javascript»;e.parentNode.insertBefore($,e)})(document,»script»);
</script>
<!–End of Zendesk Chat Script–>

Paso 2. Insertar código en etiqueta HTML personalizada

En este paso vamos a nuestro contenedor de Google Tag Manager, creamos una etiqueta de html personalizado y pegamos el código que hemos copiado antes en el dashboard de Zopim.

Paso 3. Crear activadores para la etiqueta

En nuestro caso tenemos habilitado el seguimiento multidominio, por lo que no quería habilitar la etiqueta en todas las páginas. Así que escogí un activador de tipo Pageview o DOM (con ambos funciona), que me activara la etiqueta en todas las páginas cuya URL comenzara por https://www.hhp.es/.

De esta forma evitaba que el webchat se activara en los subdominios y permitía que se integrará también en el blog.

También, podemos añadir excepciones desde TAG MANAGER, para que el webchat no aparezca en páginas específicas, usando un activador donde la url sea igual a la página en la que no queremos que aparezca el webchat.

Previsualizamos y si todo está bien publicamos. Fácil, verdad?

★ Si necesitas aprender Google Tag Manager y Analytics, entonces te interesa mi curso online. Consta de material PDF actualizado constantemente. Un sitio para hacer tus prácticas. Y está tutorizado por foro/email durante 2 meses (más opción a clases particulares).

O si prefieres una formación in company, en tu empresa, sobre: