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

Social interactions that occur on your website clearly indicate a high level of user engagement, so there is no question that we need to track social interactions. Fortunately, it’s pretty easy to track them. In this blog post, I’ll show you how to track social interactions with Google Tag Manager and send that data to Google Analytics.

 

#1. Facebook Likes

Let’s start with the most popular one, Facebook.

There are several things to keep in mind before we dive in:

  • This tracking method supports only those buttons, which are embedded on your website. It’s impossible to track all likes and shares that happen on other websites.
  • This tracking method supports only default Facebook buttonSumo or any other social sharing plugins will not be tracked. In case of custom social buttons, you should either try using the default GTM Click Trigger or check if that social sharing vendor offers a built-in Google Analytics integration.
  • 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, that’s fine. I’ll explain that option too. 

CUSTOM HTML TAG – FACEBOOK LISTENER

In order to track clicks of Facebook buttons, we’ll need to create a custom HTML tag in GTM, Facebook listener. As you can guess from its title, it will listen to Facebook LIKE button interactions that occur on a website. After listener spots a click, it will dispatch a dataLayer event.

That event is really important: we’ll use it as a trigger to launch a Universal Analytics tag.

Workflow - Facebook Social Interaction Tracking with Google Tag Manager

By the way, I have published a ready-made Facebook Tracking Recipe for GTM. Feel free to download it and import to your Google Tag Manager container in no time.

Now, I will explain in detail how you can track Facebook social interactions with Google Tag Manager. First, let’s create a Facebook Listener tag in GTM.

Facebook Listener for Google Tag Manager

  • Tag type – Custom HTML
  • Tag title – cHTML – Facebook Listener. cHTML stands for Custom HTML (I like to keep all my tags tidy).
  • In HTML field, paste the following code (it monitors all Facebook LIKE buttons on a page and dispatches a dataLayer event socialInteraction when a click occurs):
  • 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. A trigger’s configuration should look like this:
    Window Loaded TriggerAssign it to a newly created Facebook Listener’s custom HTML tag.

Why didn’t I choose a regular Pageview trigger? I have noticed that listener occasionally does not work properly if it’s launched in the very early stage of page load (when Facebook buttons did not complete loading).

I chose Window Loaded event for a reason. It fires our Facebook listener only when all other scripts (including Facebook’s) are loaded. That way I can be sure that all buttons will be tracked correctly.

However, there’s one but. If your page takes 10 seconds to load all scripts and a visitor clicks the LIKE button on the 8th second of his/her visit, that interaction will not be tracked because Facebook Listener is not ready yet.

But I chose to live with this drawback because I don’ expect my visitors to start Liking my content like crazy immediately after they landed on a page.

 

LET’S TEST OUR FACEBOOK LISTENER

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

Preview and Debug mode in Google Tag Manager
Once the preview mode is enabled, navigate to the site where the Facebook button is located 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.

This console window will appear only on your computer as you preview the site, and is not visible to your other website visitors. It should look like this:

preview and debug console

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

Facebook listener fired in GTM

Then click LIKE button on that very same page and look for socialInteraction event in the Preview and Debug console, like in the screenshot below:

Social Interaction Preview and Debug Mode in GTM

That’s it! Our Facebook listener in Google Tag Manager works! Now proceed to the next step.

 

CUSTOM TRIGGER

Now we should create a GTM trigger which recognizes dataLayer event socialInteraction. It’s crucial for our Google Analytics tag to work.

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

Social Interaction Custom Trigger in GTM

 

THREE VARIABLES

As you already know, when a visitor clicks a LIKE button, FB Listener creates a dataLayer event. What you might not know, that it also provides additional data:

socialInteraction dataLayer event in GTM preview and debug mode

See socialNetwork, socialAction and socialTarget? We can pass that data to Google Analytics. But first, we need to create 3 variables in GTM (otherwise Google Tag Manager won’t recognize these data points).

Go to 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 stands for Data Layer Variable. I like to keep my tags, triggers, and variables tidy, which makes the work with GTM much easier.

Also, keep in mind that Data Layer Variable Name is case sensitive, so make sure you’ve entered socialAction instead of socialaction.

 

GOOGLE ANALYTICS TAG

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

  1. Window Loaded event occurs.
  2. Custom HTML Facebook Listener tag fires.
  3. Visitor clicks the LIKE button.
  4. Facebook Listener spots the click and creates a socialInteraction dataLayer event (which is used as a trigger)
  5. Trigger fires and launches 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 add the following settings:

Google Analytics Social Interaction

As you can see, all three variables are used as Network, Action and Action Target values in Google Analytics Social tag. Since I used Social track type, all LIKE button’s interactions will appear not in Events reports, but rather in Acquisition > Social > Plugins.

Feel free to change track type to Event, if you wish. In that case, you’ll 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. Also, consider using Google Analytics Settings Variable.

 

TEST

If you chose Social as Google Analytics Track Type, the data will appear within 24-48 hours in Google Analytics Social Plugins report (Acquisition > Social > Plugins). They won’t be visible in the GA Real-time reports.

If you chose Event as a Google Analytics Track Type, then check Google Analytics Real-time reports to see whether Facebook LIKE button clicks are passed correctly to GA.

 

#2. Twitter Tweets

The tracking of Twitter social interactions with Google Tag Manager is based on the same principle as Facebook:

  1. A Twitter auto-event listener is monitoring the page for Tweet/Retweet button clicks.
  2. After a visitor clicks a social button, the listener dispatches socialInteraction dataLayer event with the corresponding data.
  3. That event is used as a trigger for Universal Analytics social tag to fire.

If you have already implemented Facebook Tracking (described in the #1 chapter of this guide), then catching Twitter social interactions will be easy peasy.

You see, the only thing that needs to be added is a Twitter auto-event listener. Everything else is reusable. Take a look at the scheme below:

Workflow - Twitter Social Interaction Tracking with Google Tag Manager

When a visitor clicks Twitter button, the auto-event listener fires a Data Layer event which is using the very same structure (like Facebook):

  • Event’s title is socialInteraction
  • With every event we get the following data points:
    • socialNetwork
    • socialAction
    • socialTarget

Why is this helpful? There are two reasons:

  1. The trigger that we created in the #1 chapter of this guide is listening to ALL socialInteractions events. So we do not need to create another trigger because we can easily reuse this one.
  2. Universal Analytics social tag (that was created in the #1 chapter of this guide) is using three data layer variables: {{socialNetwork}}, {{socialAction}}, {{socialTarget}}. What a coincidence! 🙂 Twitter auto-event also provides these very same data points so we do not need to create an additional Google Analytics tag for Twitter.

This situation is one of those things that I love in Google Tag Manager. If configured properly, it enables you to reduce the number of unnecessary tags, triggers or variables. In this case, all we need to do is to create a separate data input for each social network – a listener. The rest of this mechanism is unified for both social networks.

 

BEFORE WE CONTINUE

Here are several things to keep in mind:

  • This tracking method supports only those buttons, which are embedded on your website. It’s impossible to track all tweets, retweets, etc. that happen on other websites.
  • This tracking method supports only default Twitter buttons. AddThis, Sumo, or any other social sharing plugins will not be tracked. In case of custom social buttons, you should either try to use the default GTM Click Trigger or check whether a social sharing vendor offers a built-in Google Analytics/GTM integration.
  • When a user clicks Tweet button on your website, a small window appears (where a person can add some text to his/her tweet). Unfortunately, it’s impossible to track whether a person eventually published his tweet. Remember, we can track the button which is embedded on your site. We cannot track the button in the small window (because it’s beyond your website). So, in this case, you can say that we’ll track visitors’ intentions to tweet rather than actual tweets.
    Google Tag Manager Twitter Tracking - what will work
  • The tracking method I’ve described in this blog post sends the data to Google Analytics as Social Interactions, thus 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 these interactions as Google Analytics events, just choose Event as Track Type in Universal Analytics tag and enter the following options:
    • Event Category: Social
    • Event Action: {{dlv – socialNetwork}}: {{dlv – socialAction}}
    • Event Label: {{dlv – socialTarget}}

 

CUSTOM HTML TAG – Twitter LISTENER

In order to track Twitter social interactions with Google Tag Manager, we’ll need to create a custom HTML tag, Twitter listener which will monitor Twitter button interactions that occur on a website. After listener spots a click it will create a socialInteraction dataLayer event.

By the way, I have published a ready-made Twitter Tracking Recipe for GTM. It’s fully compatible with other social network implementations mentioned in this guide.

Feel free to download it and import to your Google Tag Manager container in minutes.

Ok, let’s create a Twitter Listener tag in GTM.

Twitter listener for GTM

  • Tag type – Custom HTML
  • Tag title – cHTML – Twitter Listener. cHTML stands for Custom HTML (I like to keep all tags in my order).
  • In HTML field paste the following code:
  • In Triggering section, click the entire block:
    Add trigger to Twitter Listener for GTM
    … and choose Window Loaded trigger (which we’ve already used in Facebook’s example)
    Window Loaded TriggerAssign it to the newly created Twitter Listener’s custom HTML tag.

 

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). They are not visible in the GA Real-time reports.

If you chose Event as a Google Analytics Track Type, then use Google Analytics Real-time reports to see whether Twitter button clicks are passed correctly to GA.

Are you tired reading this blog post about tracking social interactions with Google Tag Manager? If yes, don’t forget to bookmark this post and come back anytime later.

 

#3. Linkedin Shares

Unlike Twitter and Facebook buttons, Linkedin Share buttons can be tracked with the default GTM Click Trigger. Thus we don’t need a custom auto-event listener here.

 

Investigation

First, let’s check how exactly we can identify Linkedin button clicks. For this “investigation” you’ll need to:

  • Enable all built-in click-related variables: e.g. Click Classes, Click ID, etc.
  • Create a general Click trigger which listens to all clicks of all elements:
    All clicks trigger

Now, enable Preview and Debug mode, and navigate to the site where the Linkedin button is embedded. 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.

Click Linkedin Share button and you’ll notice a gtm.click event in the GTM Preview and Debug console. Click it and open Variables tab. Take a closer look at all click-related variables and their values. Which one is the most unique?

Preview and debug mode click variables

Obviously, it’s Click ID. Others either are too generic (e.g. “Share”), or have no value at all. So what should we do next? Create a click trigger with condition Click ID equals to li_ui_li_gen_1500498784048_0-title-text, right?

Wrong.

Turns out Linkedin Share button consists of several inner elements with different IDs:

  • If you clicked the Linkedin logo of that Share button, Click ID value would be li_ui_li_gen_1500498784048_0-logo (those random numbers will be different in your case)
  • If you clicked the word “Share”, its Click ID would be li_ui_li_gen_1500498784048_0-title-text
  • Share count bubble’s Click ID is li_ui_li_gen_1500498784056_1-content.

Therefore, creating a condition with equals is not an option here. We need to find something common among these Click IDs, and without hesitation, I’m choosing li_ui_li_gen_ . It’s a pretty unique string which can let us distinguish Linkedin button clicks from any other clicks that occur on a website.

To sum up, trigger’s condition should be Click ID contains li_ui_li_gen_ .

Click Trigger - Linkedin Button

 

Social Interaction Tag

Next, you have two options how to track Linkedin social interactions with Google Tag Manager.

The first one is to create one more Universal Analytics Social tag which fires when the previously created click trigger dispatches a Data Layer event. Tag’s settings would be:

  • Track type: Social
  • Social network: Linkedin
  • Social action: Share
  • Social target: {{Page URL}} (or {{Page Path}}

But I don’t personally recommend this option because there’s a better one in my pocket.

Since we have already created a socialInteraction trigger and Social Interaction Universal Analytics tag, why don’t we reuse that? Remember what we did with Facebook and Twitter button clicks?

Workflow - Twitter Social Interaction Tracking with Google Tag Manager

Why don’t we add Linkedin interaction here? All we need to do is fire another dataLayer event when a visitor clicks Linkedin Share button. We’ve already created a click trigger, now it’s time for JavaScript. Create a Custom HTML tag with the following code:

It fires a Data Layer event with additional data:

  • Event name: socialInteraction (just like with Facebook and Twitter buttons)
  • Social Network: Linkedin
  • Social Action: Share
  • Social Target: The URL of the current page a visitor is located in.

Event’s structure is identical to the ones which are fired by Twitter or Facebook auto-event listeners, thus when a visitor clicks a Linkedin button, its Data Layer event will be caught by the Custom Trigger (socialInteraction) and then will transfer its data to the Universal Analytics Social Tag.

If your website contains social sharing buttons of all 3 aforementioned social networks (Facebook, Twitter, and Linkedin), a tracking workflow should look like this:

Workflow - Linkedin Social Interaction Tracking with Google Tag Manager

Here are the complete settings of the Custom HTML tag which fires when a visitor clicks Linkedin Share button:

Linkedin share - data layer push - custom html tag

By the way, I have published a ready-made Linkedin Tracking Recipe for GTM. It’s fully compatible with other social network tracking methods mentioned in this guide.

Feel free to download it and import to your Google Tag Manager container in minutes.

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). They are not visible in the GA Real-time reports.

If you chose Event as a Google Analytics Track Type, then use Google Analytics Real-time reports to see whether Twitter button clicks are passed correctly to GA.

A rule of thumb is to not only test the clicks of Linkedin Share button but also double-check previously created Facebook and Twitter tags. S#it happens and sometimes new implementation might break the current one.

If you’re tired of reading this guide how to track social interactions with Google Tag Manager, don’t forget to bookmark this link and come back anytime later.

 

#4. Pinterest Pins

The last but not least, Pinterest pins. They can also be tracked with the default GTM click trigger.

 

One More Investigation

First, let’s check how exactly we can identify Pinterest button clicks.

  • If you skipped the 3rd chapter of this blog post (Linkedin), enable all built-in click-related variables: e.g. Click Classes, Click ID, etc.
  • Also, if you haven’t already, create a general Click trigger which listens to All Clicks of All Elements:
    All clicks trigger

Now, enable Preview and Debug mode, and navigate to the site where the Pinterest Pin button is embedded. 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.

Click Pin button and you’ll notice a gtm.click event in the GTM Preview and Debug console. Click it and open Variables tab. Take a closer look at all click-related variables and their values. Which one is the most unique?

This time it’s Click Classes:

pinterset pin click classes in Google Tag Manager

In my case, Click Classes value was PIN_1500579699716_button_pin PIN_1500579699716_save PIN_1500579699716_tall . Keep in mind that those random numbers differ on every page, so you shouldn’t rely on them in your condition. Actually, you should avoid them.

Instead of Contains condition, let’s use a regular expression. Here’s how our Pinterest Click Trigger should look.

Click Trigger - Pinterest button

What does this regular expression mean? I’ve set this trigger to fire only with those clicks when Click Classes contain PIN_ *anything* _button_ . In Regular Expressions, .* (dot asterisk) means anything. Literally. It may be one symbol, it may also be a hundred letters, you name it.

Why did I use PIN_ *anything* _button_ instead of PIN_ *anything* _button_pin? Pinterest offers various buttons, such as Follow or Pin and they use different Click Classes. Follow button’s class is PIN_ *anything* _button_follow while Pin button’s class is PIN_ *anything* _button_pin. The condition I’ve used in the trigger covers all Pinterest buttons. But if you wish, you can create separate triggers for each button and fire separate Data Layer events. Download Pinterest Tracking GTM Recipe and you’ll see what I mean.

 

SOCIAL INTERACTION TAG

Next, you have two options how to track Pinterest social interactions with Google Tag Manager (just like with Linkedin Share button).

The first one is to create a Universal Analytics Social tag which fires when the previously created click trigger dispatches. Tag’s settings would be:

  • Track type: Social
  • Social network: Pinterest
  • Social action: Pin
  • Social target: {{Page URL}} (or {{Page Path}}

But you already know my opinion here. I am all about integrity, so we’ll reuse the socialInteraction trigger and Social Interaction Universal Analytics tag. If you carefully followed all steps of this guide, your social interaction tracking workflow looks like this:

Workflow - Linkedin Social Interaction Tracking with Google Tag Manager

Let’s add Pinterest to the party! Now, we’re going to fire another dataLayer event when a visitor clicks Pinterest Pin button. We’ve already created a click trigger, now it’s time for a JavaScript. Create a Custom HTML tag with the following code:

It fires a Data Layer event with the following data:

  • Event name: socialInteraction (just like Facebook, Twitter, and Linkedin buttons)
  • Social Network: Pinterest
  • Social Action: Pin
  • Social Target: The URL of the current page a visitor is located in.

Event’s structure is identical to Twitter, Facebook, and Linkedin examples.

If you have all 4 social buttons embedded on your site, the entire tracking workflow will look like this:

Workflow - Pinterest Social Interaction Tracking with Google Tag Manager

Here are the complete settings of the Custom HTML tag which fires when a visitor clicks Pinterest Pin button:

Pinterest share - data layer push - custom html tag

Just keep in mind that we’re only tracking intentions here. We cannot be sure that user successfully pinned your content.

By the way, I have published a ready-made Pinterest Tracking Recipe for GTM. It’s fully compatible with other social network implementations mentioned in this guide.

Feel free to download it and import to your Google Tag Manager container in minutes.

Let’s 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). They are not visible in the GA Real-time reports.

If you chose Event as a Google Analytics Track Type, then use Google Analytics Real-time reports to see whether Pinterest button clicks are passed correctly to GA.

Now, do the final check and test all 4 social buttons. Chances are some of them might be already broken. You know, sh#t happens 🙂

 

 

Track Social Interactions with Google Tag Manager: Conclusion

In this long guide, I’ve explained how to track 4 different social network buttons: Facebook, Twitter, Linkedin, and Pinterest. The first two required to create custom auto-event listeners which monitor visitor activity and dispatch an event whenever someone clicks Like or Tweet buttons. Then that data is passed to Google Analytics via Universal Analytics social tag.

Linkedin and Pinterest buttons could be tracked with default GTM Click Triggers.

Another awesome thing regarding tracking social interactions with Google Tag Manager is reusability. We’ve created 4 different ways how to track every social button separately but their data was transfered via one Universal Analytics social tag.

Having 4 different UA tags for each social network would also work without any problems. But in our case, we managed to optimize the entire process. And that’s awesome!

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.