Tracking Disqus activity with Google Tag Manager

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

disqus_tracking_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  )

 

tracking_disqus_rule

 

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.

isDisqusAvailableMacro

 

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

David Vallejo

Google Analytics Consultant and implementer. I have some experience with Google Tag Manager
Follow me: @thyng

Author: David Vallejo

Google Analytics Consultant and implementer. I have some experience with Google Tag Manager Follow me: @thyng

9 thoughts on “Tracking Disqus activity with Google Tag Manager”

  1. I am curious, with the code you’ve posted what is the difference
    between the Pagination action and the User Logged action? The rest of
    the call is identical.

    Otherwise, good post. For newer users it might be helpful to show how to put it all together. In my experience that’s the most difficult part for new users in GTM to grasp.

    In my implementation there is an additional tag and rule in order for all of this to work. 1) A UA tag to map the category, action, and label into GA, and a rule to fire that tag when the event is disqus (My equivalent of your gaEvent. In my case my tags and rules are less general than I think you’ve intended for yours.). Any opinion on the up sides or down sides of implementing general vs specific tags?

    1. Hi Danielle that’s a bug on the code in the post :/ . Last one should be “onIdentify” . I’ve just updated the post. This should be fired when the users logs in into Disqus from your page.

      We’ve been thinking about how to write the posts so they’re easy to understand for everyone, but I hear that it can be a bit hard if you’re not used to how GTM works. Maybe we should write some basic posts about how GTM work 😕

      In this case is not that difficult, we have 1 macro to know when Disqus is available on the page and then we have one rule that uses that macro to fire the tracking tag, just when Disqus is really loaded into the page 🙂

      I prefer to have a general tag for firing all the events. Why would you need to have a separate tags for each event type if they’re doing the same. I usually add a different Events tag for example when the events that are going to be binded to it have a different configuration, let’s say they use differente custom variables, or when those events are going to send the new Enhnaced Ecommerce info.

      By the way, thanks for your comment, if it wasn’t for you I wouldn’t noticed that error/typo.

      1. “Why would you need to have a separate tags for each event type if they’re doing the same.”
        An example may be interaction vs. non-interaction events. e.g. Timer events set as non-interaction events, whereas posting a comment would be an interaction.

Leave a Reply

Your email address will not be published. Required fields are marked *