Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Obviously, social interactions that occur on your website indicate a high level of user engagement, so there is no doubt that we need to track social interactions. Luckily, it’s pretty easy to monitor them thanks to Google Tag Manager and Google Analytics.

Likes, tweets, etc. are already demystified in my other blog post, How To Track Social Interactions with GTM, but lately, I have received a question from a reader asking What about Facebook Comments? 

At first, I wanted to answer No, comments are not supported. But moments later, I thought Maybe that shouldn’t be difficult? Turns out tracking Facebook Comments with GA is piece of cake.

In this blog post, I’ll show you how to track Facebook Comments with Google Tag Manager and automatically send that data to Google Analytics as Social Interactions.

This blog post assumes you have at least moderate knowledge of Google Tag Manager. If you’re a beginner, I highly recommend checking out these free Google Tag Manager courses first. The minimum requirements are:

  • You have Google Tag Manager tracking code installed on your website.
  • You know what tags, triggers, variables, and the Data Layer are, and how they work in Google Tag Manager.

BEFORE WE CONTINUE

Here are several things to keep in mind, before we dive into this topic:

  • This tracking method supports only those Facebook comments which are embedded on your website. It’s impossible to track all comments that happen on other websites.
  • This tracking method supports only the default Facebook comment box (like in the screenshot below).
    Facebook Comment Box Example short
    None of other 3rd party comment plugins will be tracked.
  • The tracking method I’ve described in this blog post sends the data to Google Analytics as Social Interactions. You won’t see these events in Google Analytics Real-time reports. They will appear in your Social reports (Acquisition > Social > Plugins) after 24-48 hours. If you wish to send data as events, I’ll explain that option too. 

 

CUSTOM HTML TAG – FACEBOOK Comments LISTENER

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 socialInteraction (which we’ll use as a trigger to launch a Universal Analytics tag).

Here’s the entire workflow in a nutshell:Track Facebook Comments with Google Tag Manager - Scheme
Now, I will explain how Facebook comment tracking works in detail. Let’s create a Facebook Listener tag in GTM.

Facebook Comments Listener for Google Tag Manager

  • Tag type: Custom HTML
  • Tag titlecHTML – Facebook Comment Listener. cHTML stands for Custom HTML.
  • In HTML field paste the following code (it monitors Facebook Comment Box on a page and fires a dataLayer event socialInteraction in case of a successful comment submission):

    • In Triggering section, click the entire block:
      Add trigger to Twitter Listener for GTM
      … and choose Window Loaded trigger. If you don’t have one – create it. Trigger’s configuration should look as follows:
      Window Loaded TriggerAssign it to a newly created Facebook Comment Listener’s custom HTML tag.

    Why didn’t I choose a regular All Pages trigger? I have noticed that listener occasionally does not work properly if it’s launched in the early stage of page loading process.

    I chose Window Loaded event for a reason. It fires our Facebook Comments listener only when all other scripts on the page (including Facebook Comment Box) are loaded. That way I can be assured that all submissions will be tracked correctly.

    However, there’s one but. If a page takes 10 seconds to load all scripts and a visitor submits a comment on the 8th second of his/her visit, that interaction will not be tracked (because Facebook Comments Listener is not launched yet).

    But that’s a tiny drawback because I don’t expect my visitors to start commenting my content like crazy right after they have landed on a page.

LET’S TEST that FACEBOOK Comments LISTENER

Now, let’s use Google Tag Manager’s Preview and Debug mode to find out whether Facebook Comment Listener properly functions. At the top-right corner of your GTM account, click the Preview button.

GTM Preview button

An orange notification bar should appear in your account.

Preview and Debug mode

Once the preview mode is enabled, navigate to the site where the container is implemented and you will see a debug console at the bottom of your browser showing detailed information about your tags, including their firing status and what data is being processed.

First, check whether Facebook Comments Listener has initialized on Window Loaded event. On the left side, click Window Loaded. It should look like this:

Facebook Comment Listener dispatched

Then submit an FB comment on that very same page and look for socialInteraction event in the events stream of Preview and Debug panel (it might take up to several seconds for it to appear), like in the screenshot below:

Social Interaction Event in GTM Preview and Debug mode

That’s it! Our Facebook Comments Listener in Google Tag Manager works! Now, click the Data Layer tab (while socialInteraction event is chosen) and you’ll see what exactly was pushed with that event.

Social Interaction Data Layer event in Google Tag Manager

SocialNetwork, socialAction, and socialTarget are some really useful data points, aren’t they? It’d be great to see them in Google Analytics reports. Luckily, that’s a pretty easy task to do. Continue reading and I’ll show you how to do that.

 

THREE VARIABLES

By default, Google Tag Manager does not recognize data stored in the Data Layer. Therefore if you want to pass some information to other tools (i.e. Google Analytics), you need to create data layer variables first. Let’s take another look at what data was passed by Facebook Comments Listener.

Social Interaction Data Layer event in Google Tag Manager

See socialNetwork, socialAction, and socialTarget? Let’s create 3 Data Layer Variables for each one of them. Open Variables in GTM account and create 3 variables with the following settings:

Twitter Listener dlv

In case you’re wondering what does dlv mean in the title of every variable, it’s Data Layer Variable.

 

CUSTOM TRIGGER

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.

In Google Tag Manager, go to Triggers and hit New. Create a trigger with the following settings:

Social Interaction Custom Trigger in GTM

It means that every socialInteraction Data Layer event will trigger Google Analytics tag.

 

GOOGLE ANALYTICS TAG

Final step, create Google Analytics tag. It will fire only when the following sequence is complete:

  1. A page will all script is completely loaded (Window Loaded event occurs).
  2. Custom HTML Facebook Comments Listener tag fires.
  3. Visitor submits a comment.
  4. Facebook Comments Listener spots the submission and creates socialInteraction Data Layer event.
  5. SocialInteraction event triggers Google Analytics tag.

All steps are required and must be completed in this exact order.

Go to Tags in GTM and hit New button. Choose Universal Analytics Tag type and enter the following settings:

Universal Analytics Social Interaction Tag

As you can see, all three variables are used as Network, Action and Target in Google Analytics Event tag. Since I used Social track type, all comment submissions will appear not in the Events report of Google Analytics, but rather in Acquisition > Social > Plugins.

Feel free to change track type to Event, if you wish. In that case, you’ll also be able to see events in GA Real-time reports.

If you’re wondering why I entered {{Constant – GA UA}} in Tracking ID field, read this post by Google about user-defined constant variables and why you should always use them.

 

FINAL TEST

If you chose Social as Google Analytics Track Type, the data will appear within 24-48 hours in Social Plugins report (Acquisition > Social > Plugins) within 24-48 hours.

If you chose Event as Google Analytics Track Type, use Google Analytics Real-time reports to see whether Facebook comment submissions are passed correctly to GA.

 

TRACK FACEBOOK Comments with Google TAg Manager: CONCLUSION

So there you have it. In this blog post, I have explained how to track Facebook comments with Google Tag Manager and send that data to Google Analytics. First, you need to create a Custom HTML tag with Facebook Comments Listener’s JavaScript code.

Every time a listener spots a successful comment submission, it dispatches a Data Layer event (with additional useful information). Thanks to Data Layer Trigger and 3 Data Layer Variables this data can be passed to Google Analytics.

This solution follows the very same principle mentioned in my other blog post, How to Track Social Interactions with Google Tag Manager.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Julius Fedorovicius

Product manager at Soundest. I am highly interested in Google Tag Manager, Google Analytics, Adwords, Email marketing, Email Deliverability, Digital Marketing in general. You can follow me on Twitter.