Today we’re starting a new serie of posts about how to track things with Google Tag Manager en Inside-GTM. So this time we’re going to learn how we can measure our visitors interactions with the Disqus Comments System.

The posts are going to be structured this way:

• Tracking Flow: Definition about the Definiremos que pasos vamos a seguir para poder realizar la medición
• Tags, Rules and Macros: Here you will be able to see the screenshots about the tags, rules and Macros configuration.
• Source Code: Here you’ll be able to copy the current javascript code used in Tags and Macros.

Tracking Flow

1. We’ll chjeck that the current page is really using  Disqus ( we don’t want to fire the tag if it’s not present! )
2. We’ll wait till the page has been fully loaded before firing the Tag ( gtm.load )
3. If 1 and 2 are already true, we will fire the tracking tag.

Tags, Rules and Macros

Disqus needs to have the callbacks defined before it loads. That’s is something that we can’t control in some cases, so in order to have it working in all cases, We are using Disqus API to reload their iframe with our new callbacks configuration when the page has been loaded. We are going to track for now new comments, when a visitor uses the pagination and when an users logs in into Disqus. After the visitos performs any of those actions we’re pushing the needed data to the dataLayer so we can configure a Event Tag to send that info to Google Analytics.

Tag

Rule

In this case we’re going to use just one rule, that will need to match 2 conditions:

1. Current page must be fully loaded ( gtm.load Event )
2. Current page needs to have Disqus iframe loaded and available within the page’s DOM. ( We’re using a Macro to gather this info. This Macro is defined in the next post section  )

Macros

Finally we’re going to create a new Macro ( the one we were using as a condition on the tag firing rule ) , that will return “true” if Disqus iframe is available on the page DOM’s.

So now, everytime that a visitors leaves a comment , or performs any of the defined actions, our dataLayer will populated with that interaction data. We just need to fire an event based on the info available in the dataLayer.

Source Code:

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;
    }
}