Vamos a empezar una serie de posts regulares sobre cómo medir cosas con Google Tag Manager en Inside-GTM. En este caso vamos a aprender cómo
medir las interacciones de los usuarios en nuestra web, si en ella disponemos del sistema de comentarios Disqus.

Los posts se van a basar en la siguiente estructura:

• Tracking Flow: Definiremos que pasos vamos a seguir para poder realizar la medición
• Etiquetas, Reglas y Macros: Aquí se explicarán y mostrarán capturas de las configuraciones necesarias en nuestro contenedos
• Código Fuente: Se mostrará el código fuente utilizado en las macros y etiquetas para que sea posible copiarlo, cosa que no sería posible desde las capturas de pantalla.

Tracking Flow

1. Comprobar que disqus está disponible en la página.
2. Esperar a que la página se haya cargado completamente ( gtm.load )
3. Lanzar el Tag de medición.

Etiqueta, Reglas y Macros

Disqus necesita disponer de la definición de los callbacks antes de que este sea cargado, es decir deberíamos tenerlo definido, antes de que el script
este cargado en la página. En muchas situacion esto no es posible por lo que utilizando el propio API de la herramienta vamos a definir los callbacks que se ejecutarán cuando los usuarios hagan un comentario, páginen o cuando se logeen. Lo que vamos a hacer es lanzar un push al dataLayer con la información de la acción del usuario, para después a través de Google Tag Manager poder lanzar un evento.

Etiqueta

Reglas

Tan solo vamos a utilizar una regla, que se va a encargar de lanzar nuestra etiqueta cuando sucedan dos cosas:

1. Que la página haya sido completamente cargada ( gtm.load )
2. Qué la página actual tenga el script del embed de Disqus cargado. ( Para sacar esta información utilizaremos una Macro )

Macros

Y por último vamos a configurar una macro que nos va a devolver “true” en el caso de que el iframe del widget the Disqus esté disponible y cargado actualmente en el DOM de la página.

De está forma tan solo nos quedará configurar un tag de evento, y recoger las variables desde el dataLayer para enviar la información necesaria a Google Analytics.

Código Fuente:

function()
{
    // Let's see if disqus embed iframe is available on the DOM, We don't want
    // to fire it in pages where it is not available
    var iframes = document.getElementsByTagName('iframe');
    for (var i = 0; i < iframes.length; i++) {
             if(iframes[i].src.indexOf('//disqus.com/embed/comments/')>-1)
           return true;
    }
}