Tracking Disqus activity with Google Tag Manager
Table of Contents
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
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:
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; } }