Track Comments With Google Tag Manager

I've worked on plenty of sites over the past few years and I'm sure if you're reading this you're guilty of the following too. You have a site or a blog and you've been pumping out content for a while now, you're getting traffic, social shares and comments but they're not tracking additional metrics, apart from what Google Analytics provides out of the box.

Whats the point of creating all this content and not analysing its performance apart from how much traffic it gets? Adding additional metrics like social shares, comment tracking, scroll tracking and conversion funnel tracking can greatly improve your understanding of what your users want and how to give them more of it.

Capturing your Comments

Commenting is a big part of what makes a site a great place for discussion and generating really valuable user-generated content is what makes the internet such a useful tool for so many people. Its SEO value is also undeniable so I am always shocked to see that sites do not track this sort of user behaviour.

How to track comments with Google Tag Manager

Tracking comments before GTM was a bit of a pain especially if you were using a 3rd party tool but now with GTM it's been made a little easier for site owners. I've chosen 3 of the most popular options for capturing comments on your site, namely Facebook comments, Disqus comments plugin and your native comments function on your site.

Facebook embedded comments

In order to track Facebook comments on a website, we’ll need to create a custom HTML tag in GTM – Facebook Comments listener. As you can guess from its title, it will listen to Facebook comment submissions on your website. After the listener spots anything, it will dispatch a Data layer event called social interaction (which we’ll use as a trigger to launch a Universal Analytics tag).

Creating the Facebook comment listener

Let’s begin by creating a Facebook Listener tag in GTM.

• Open up GTM
• Create a new tag
• Tag type: Custom HTML
• Provide a tag title: cHTML – Facebook Comment Listener.

In HTML field paste the following code (it monitors Facebook Comment Box on a page and fires a dataLayer event social interaction in case of a successful comment submission):

<script>
FB.Event.subscribe('comment.create', function(commentResponse) {
var targetUrl = commentResponse.href;
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'socialInteraction',
'socialNetwork': 'Facebook',
'socialAction': 'Comment',
'socialTarget': targetUrl
});
});
</script>

Creating a facebook comment trigger

In Triggering section, choose Window Loaded trigger. If you don’t have one – create it and assign it to a newly created Facebook Comment Listener’s custom HTML tag.

Creating a facebook comment tracking tag

Now, we should configure a particular condition when Google Analytics events must be dispatched. What should we do? The correct answer is to create a trigger. Now for the final step, create Google Analytics tag. It will fire only when the following sequence is complete:

• Go to Tags in GTM and hit New button. Choose Universal Analytics Tag type and enter the following settings:
• A page will all script is completely loaded (Window Loaded event occurs).
• Custom HTML Facebook Comments Listener tag fires.
• Visitor submits a comment.
• Facebook Comments Listener spots the submission and creates socialinteraction Data Layer event.
• SocialInteraction event triggers Google Analytics tag.
• All steps are required and must be completed in this exact order.

Disqus embedded comments

If you're using the Disqus comment plugin to manage your site's comments you'll need to follow the following instructions. 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).

• Open up GTM
• Create a new tag
• Select the custom HTML tag’s settings
• Provide a name for your tag, example – cHTML – DISQUS Listener
• Paste the code provided below

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

Note: 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

Creating the disqus trigger Now you need to let GTM know when to fire this script, so you'll need to set up a trigger.

Tip! 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

Then save the tag. Congratulations you've now created a listener that will capture the relevant information needed for tracking.

Creating the disqus tracking tag

Your second step now is to create the event tracking tag. Go back to Tag Manager, create a new tag, 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 the Triggering section, choose the newly created custom trigger.

Then click save, and submit! It's that simple, you'll now see comments stats in your event tracking section of that GA account.

Native comment function

If you're using your own native comment functionality you will need to create a custom event via the data layer to capture the relevant information you want to track. Here is an example of a possible comment data layer setup: 

<script>
dataLayer = [];
dataLayer.push({
"Username":"John Smith",
"PageURL":"https://www.nichemarket.co.za/blog/article",
}],
"event":"commentComplete"
});

</script>

Feel free to add your own custom variable should you see fit. Once the datalayer is implemented its time to set up the tags Go back to Tag Manager, create a new tag, 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 – Comments
• Event Action – {{Page URL}}.
• Event Label – Username variable
• In the triggering section, choose a custom event and add commentComplete as your trigger.

Then click save, and submit! It's that simple, you'll now see comments stats in your event tracking section of that GA account.

The unfortunate truth

Unfortunately, with Google Analytics you cannot backdate any data you're now capturing with the above methods, it will only track comments going forward, so the sooner you implement this, the better.

The value behind improved tracking

The more insight you have into the performance of your content the easier it is to pull insights and trends that you can use to your advantage with future content initiatives or how to refine old content to perform better over time.

Contact us

If you want to know more about Google Tag Manager don’t be shy we’re happy to assist. Simply contact us here

Tags: google tag manager, How to, Tools, tracking