
May 12, 2017
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.
- Check whether Google Analytics Event tag fires only when a comment is submitted.
- 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.
15 COMMENTS
Thanks for this site, it's a gold mine!
You're welcome, Marine!
Sorry, but I cannot understand everything:(
1. What exactly must be trigger for custom HTML tag? I don't know GTM very well.
2. As I understand in the right way, "this.page.url = " and "this.page.identifier = " in disqus must be unique for every page. In this case how can I choose these values (I want to track comments on all pages, not only in one especially page)? Or did I understand this information in the wrong way?
Hey Marina,
1. Trigger for custom HTML tag can be "All pages" which is available by default in GTM. In this blog post I used my own created trigger "Window Loaded", you can also use DOM ready. But, for sake of simplicity, you can use "All pages".
2. this.page.identifier isn't unique for each page. It is unique for each website. In other words, your website will have only one unique.identifier, which is repeated on every page.
this.page.url must be different for every page of your website. That's why I used {{Page URL}} variable in the script, because it automatically changes on every page.
Does that make sense?
Thanks a lot!
Almost everything is clear besides one thing. Where can I take this unique.identifier in Disqus for Wordpress?:) I have read: https://help.disqus.com/customer/en/portal/articles/2158629 .
For example, the Disqus WordPress plugin defines these variables by default using the following PHP values:
this.page.url = '';
this.page.identifier = '';
But cannot I use in custom HTML tag:
this.page.identifier = ''
?
Or is it not right?:)
I am not sure whether I understood your question.
Regardless of platform you're using (Wordpress or any other), you can easily find the identifier by checking website's source code.
1. Open your website where Disqus is installed.
2. Click CTRL + U (in Chrome). It opens page's source.
3. Hit CTRL + F (find) and look for "this.page.identifier"
Thanks a lot!:) Now everything is ok!
Hey Julius - Not sure if my website has a unique setup (Wordpress), but my search for the "this.page.identifier" is coming up empty. I can see the Disqus code when searching for "disqus", but the only unique ID I can see is the individual blog post ID. Here's a post URL that you can use to check:
https://divvyhq.com/2017/05/2017-content-planning-research-report-challenges-trends-opportunities/
If you can help me solve this, I should be good with the rest of your very good instructions.
Thanks in advance!
Hey Brody,
I have updated the blog post with additional instructions for Wordpress users. Turns out Disqus WP plugin uses a bit different unique idenfitier.
Let me know if it helped.
Hi Julis
Thank you for this great post.
I'm doing exactly what you say but on GMT preview mode the disqus comment tag doesn't fire when I do a comment.
Also, I cannot find "this.page.identifier" in my code:
https://danielezquerro.com/consejos-seo-rapidos/
Thank you in advance!!
Hey,
I've opened your website's source code, made a search and found that your disqusIdentifier is "745 http:\/\/danielezquerro.com\/?p=745". So to make this work you need to read the last chapter (of this blog post) titled "ATTENTION, WORDPRESS USERS!". It should help you.
Cheers
I cannot find the discuz page identifier in the source code either.
A good start to get help would be to share the exact link to the page where you can't find the DISQUS identifier. Please, always be specific.
Is it possible to track other disqus events and not only comment submission?
Disqus analytics offers:
- Article Reads
- Comment Reads
- Engagements
- Comments
I don't think so. But I'm also not 100% sure.