Track DISQUS Comments with Google Analytics and GTM

Updated: May 12th, 2017. DISQUS is an easy solution to install comments in any website. Just by adding a snippet of code you enable your readers to post comments. In this blog post I’ll show you how to track DISQUS comments with Google Analytics (via Google Tag Manager).

Note: this blog post teaches how to track events with Universal Analytics. If you want to get familiar with event tracking in Google Analytics 4, you can also refer to this blog post.

After you installed DISQUS on a website, log in to your Google Tag Manager and create custom listener which monitors comment submissions.

For those who are in a hurry, I have created an easy-to-import template for Google Tag Manager (a.k.a. GTM recipe). Just click the button below, follow the instructions and start tracking DISQUS comments in no time. If you wish to understand how it works, continue reading.

DISQUS Listener for Google Tag Manager

First, you’ll need to create a custom HTML tag in Google Tag Manager. It will listen to comment submissions. After a visitor publishes a comment, DISQUS auto-event listener will fire a dataLayer event (which will be used as a trigger).

Custom HTML tag’s settings are:

• Title – cHTML – DISQUS Listener
• Type – Custom HTML
• Paste this code (I found it on Isaac Abramowitz’s blog):

  <script>
   var disqus_config = function () {
   this.page.url = '{{Page URL}}'; // Replace PAGE_URL with your page's canonical URL variable
   this.page.identifier = '{{YOUR_UNIQUE_DISQUS_ID}}'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
   this.callbacks.onNewComment = [function() {
   window.dataLayer = window.dataLayer || [];
   window.dataLayer.push({
   'event': 'disqus_comment'
   });
   }];
   };
  </script>

Important: you need to replace {{YOUR_UNIQUE_DISQUS_ID}} (Line: 4) with your own. In order to do so, open your DISQUS installation code and look for this.page.identifier (If you can’t find it, you’re probably using WordPress Plugin. Continue reading and I’ll explain a workaround.).

Copy it (without quotation marks) and paste to custom HTML tag in GTM. Here’s an example:

<script>
 var disqus_config = function () {
 this.page.url = '{{Page URL}}'; // Replace PAGE_URL with your page's canonical URL variable
 this.page.identifier = '4991950000'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
 this.callbacks.onNewComment = [function() {
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
 'event': 'disqus_comment'
 });
 }];
 };
</script>

Save the tag.

 

 

Let’s test DISQUS listener

Now, let’s use GTM’s Preview and Debug mode to find out whether DISQUS listener fires dataLayer event when someone posts a comment. At the top-right corner of your Google Tag Manager account, expand Publish button’s options and click “Preview”.

Once the preview mode is enabled, navigate to the site where the form is published and you will see a debug console at the bottom of your browser window showing detailed information about your tags, including their firing status and what data is being processed. This console window will appear only on your computer as you preview the site, and is not visible to other website visitors. It should look something like this:

Now, write and publish a comment with DISQUS comment widget. Disqus_comment event should appear.

Disqus_comment event is a great indicator that someone posted a comment on our website. We can use it as a trigger to fire Google Analytics event. Let’s continue.

 

Variable and Trigger

Before you create a trigger in GTM, make sure that Page URL variable is enabled among other built-in variables in Google Tag Manager.

Then, create a trigger with the following settings:

• Title – Custom – DISQUS Comment
• Type – Custom Event
• Event name – disqus_comment
• This trigger fires on – All Custom Events

 

Create Google Analytics Event Tag

OK, so you have already created a DISQUS listener and a custom trigger. The last missing piece is Google Analytics Event tag which sends the data to GA.

Go to Tags and hit New, then enter the following settings:

• Tag Type – Universal Analytics
• Tracking ID – Enter your Google Analytics ID. I used my constant variable – Constant – GA UA
• Track Type – Event
• Event Category – Disqus comment
• Event Category – {{Page URL}}. Every time an event is fired, Google Tag Manager will pass website’s page address where the comment submission event occurred.
• In Triggering section, choose newly created custom trigger.

 

Let’s Test!

Refresh Preview and Debug mode. Also, refresh the page where you’re testing DISQUS tracking.

1. Check whether Google Analytics Event tag fires only when a comment is submitted.
2. Check Google Analytics real-time event reports. Your Disqus comment should appear there in seconds.

If you’re facing some problems with Preview and Debug mode, read this blog post.

 

Attention, WordPress Users!

Read this, if you’ve installed Disqus comments using WordPress Plugin.

Apparently, this.page.identifier (which is the key ingredient for this Disqus tracking to work) may have one of two possible values. The first one is the aforementioned unique Disqus ID (e.g. 4991950000). But that’s not the case when it comes to WordPress plugin.

When you install WP plugin, it injects a different Disqus script to your website and uses post ID + Page URL as unique identifier (instead of a string or random numbers).

This requires you to modify Disqus listener’s code and dynamically generate a new kind of identifier. Continue reading and I’ll explain how you can do that.

 

Requirements for the workaround

In order to track Disqus comments with Google Analytics on a WordPress site, you’ll need to complete the following steps:

• Have DuracellTomi’s Google Tag Manager Plugin installed on your WP site and configure it.
• Additional variable, which returns post ID.
• Additional variable, which returns protocol (http or https).
• Finally, you’ll need to do some minor changes to Disqus Listener’s code.

 

DurarellTomi’s GTM Plugin

After you install this WP plugin, in your WordPress admin, go to Settings > Google Tag Manager > Basic > Posts and make tick the Post ID checkbox. Then, click Save changes.

What you did here is every time a page loads, GTM plugin will push Post ID value to the Data Layer, which can be easily extracted with GTM and utilized within your Disqus listener’s code.

Now, enable GTM Preview and Debug mode, refresh your website window and choose Pageview event in P&D console. Then, click Data Layer and you should see postID.

 

Create Two Variables

Now, we need to extract postID from Data Layer and turn it into a variable within your Google Tag Manager container. In your GTM account, create a new Data Layer variable with the following settings (dlv stands for Data Layer Variable):

Let’s go back to our Disqus identifier.

In WordPress, this consists of the following data points:

• Post ID – thanks to the previously created Data Layer variable, we can use this data in any tag or trigger within GTM.
• Protocol (https or https) – we’ll need to create an additional user-defined variable because this data is not available in GTM by default.
• Hostname (subdomain or domain) – this data is already available, thanks to the built-in Page Hostname variable within GTM.
• /?=postID – this part will also cause no problems thanks to the DLV variable Post ID.

Let’s create another variable which returns protocol (http or https):

 

Edit Disqus Listener’s Code

Now, open Disqus Listener’s code and look for this.page.url.

<script>
 var disqus_config = function () {
 this.page.url = '{{Page URL}}'; // Replace PAGE_URL with your page's canonical URL variable
 this.page.identifier = '4991950000'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
 this.callbacks.onNewComment = [function() {
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
 'event': 'disqus_comment'
 });
 }];
 };
</script>

In the example above, its value is 4991950000. But in WordPress’s case, we have to construct it ourselves (in order to match the identifier below).

Since we have created all the necessary variables, this can be achieved very easily. In Disqus listener, instead of:

this.page.identifier = '4991950000';

write this piece of code:

this.page.identifier = '{{dlv - postID}} {{url - protocol}}://{{Page Hostname}}?p={{dlv - postID}}';

Another awesome feature of Google Tag Manager is that it dynamically replaces variables with actual data. If GTM spots a {{variable}} anywhere in a tag, trigger or variable, it replaces values with the actual data which is available at that particular moment, for example:

• Instead of {{dlv – postID}} Google Tag Manager will put post ID (e.g. 1234).
• Instead of {{url – protocol}} it will return either http or https (depending on your website’s configuration).
• Instead of {{Page Hostname}} it will return a domain with a subdomain, e.g. blog.example.com.

As a result Google Tag Manager will turn this ‘{{dlv – postID}} {{url – protocol}}://{{Page Hostname}}?p={{dlv – postID}}’ into this ‘1234 https://www.example.com?p=1234’.

That’ it! Save Disqus Listener’s tag, refresh Preview and Debug mode, refresh your website’s window. Try submitting a new comment and disqus_comment GTM event should appear.

 

Track DISQUS Comments with Google Analytics – Conclusion

As you can see, it’s pretty easy to track DISQUS comments with Google Analytics and Google Tag Manager. Just create a custom HTML tag (1) , add your DISQUS unique identifier (2), create a trigger (3) and Google Analytics Event tag (4).

If you’re using Disqus WordPress Plugin, you’ll need to do an additional (yet simple) configuration to make this work.