Google Analytics Social Tracking: Facebook, Twitter, Linkedin, and Pinterest Buttons

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 them. Luckily, it’s pretty easy to track them. In this blog post, I’ll show you how to do Google Analytics Social Tracking and capture clicks on Facebook Likes, Twitter Tweets, LinkedIn Shares, and Pinterest Pins.

UPDATE: Due to privacy issues Facebook decided to deprecate a particular solution which allowed us to track clicks of native Facebook Like Button. Therefore it is no longer possible to track it.

 

Before we continue

There’s something you should know. In order to make Google Analytics social tracking work, we’ll be using one more tool, called Google Tag Manager (GTM). If you’re already using it and have installed it on your (or your client’s) website, feel free to skip to the next chapter.

If you’re new to GTM, here’s a very quick introduction.

Google Tag Manager is a free software from Google that allows you to install various types of code (tags) to your website. Good examples of tags are Google Analytics tracking code, Google Analytics event codes, Adwords conversion script and remarketing tags. There are many more types of code that can be added to your website using GTM, including custom codes.

Why is GTM useful? You’ll be less dependent on IT/developers and will be able to deploy tracking codes much faster. Additionally, all tracking codes are controlled in one place, GTM, which makes tracking process much more efficient.

If you’re still curious, read the full list of reasons why you should start using Google Tag Manager right away.

 

 

Install Google Tag Manager and learn some stuff

If you haven’t done it yet, go to Google Tag Manager official website, create an account and follow this guide how to properly install Google Tag Manager. If you already have Google Analytics tracking code added to the website (a.k.a. hardcoded), Lunametrics have published a very detailed and useful guide how to migrate from hardcoded Google Analytics to Google Tag Manager + GA.

After you’ve installed Google Tag Manager, my recommendation would be to get some knowledge how it works. I’ve compiled a list of different ways how to learn Google Tag Manager.

Yes, I know that this requires a lot of time to invest but it will pay off. GTM is getting more and more popular, so the sooner you join the crowd, the faster you’ll become a pro and add one more skill to your resume (which is in high demand). Don’t believe me? Just take a look at the chart from Google Trends.

P.S. Those decreases which occur every year happen due to Christmas.

Now, let’s get back to the main topic of this guide, Google Analytics social tracking. The first in line is Facebook Like button.

 

#1. FACEBOOK LIKES

UPDATE: Due to privacy issues Facebook decided to deprecate a particular solution which allowed us to track clicks of native Facebook Like Button. Therefore, it is no longer possible to track it (unless the website is still using old version of Facebook Like Button script).

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, period. Don’t bother wasting your time trying to capture Like clicks which happen on Facebook itself. It won’t work.
• This tracking method supports only the default Facebook button. 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 someone has published a custom event listener. For example, there is an existing solution for AddThis tracking.
• 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 Like button, we’ll need to create a custom HTML tag in GTM, also known as a  Facebook listener. As you can guess from its title, it will listen to Facebook LIKE button clicks that occur on a website. After listener spots a click, it will dispatch a Data Layer event.

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

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.

Also, if you want to track Facebook comments, here’s another guide you might find useful.

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

• Tag type – Custom HTML
• Tag title – cHTML – Facebook Listener. cHTML stands for Custom HTML (I like to keep all my tags tidy), but if you want, you can set another title.
• 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):

  <script>
   FB.Event.subscribe('edge.create', function(targetUrl) {
   dataLayer.push({
   'event': 'socialInteraction', 
   'socialNetwork': 'Facebook', 
   'socialAction': 'Like', 
   'socialTarget': targetUrl
   });
  });
  </script>

• In Triggering section, click the entire block:
  
  … and choose Window Loaded trigger. If you don’t have one – create it. A trigger’s configuration should look like this:
  Assign 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 a page load process (when Facebook buttons are still not loaded).

I chose Window Loaded event for a reason. It fires our Facebook listener only when all other scripts are loaded (including Facebook Like button’s). 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 social interaction will not be tracked because Facebook Listener was not ready yet at that moment.

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.

 

Test the Facebook Listener

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

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:

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

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:

That’s it! Our Facebook listener in Google Tag Manager works! 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:

Three variables

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

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:

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

The final step of this chapter, create a 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 a 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:

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. By the way, if you’re wondering what is that GA Settings Variable, read this guide. Long story short, it saves you some time and nerves when it comes to the management of Google Analytics tags.

 

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 2nd button that we’ll be tracking in this Google Analytics Social Tracking guide is Twitter Tweet/Retweet. The tracking of this button with Google Analytics and GTM 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 piece of cake.

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:

When a visitor clicks a 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 is one of the reasons why I adore 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 applies to both social networks at the same time.

 

Before we continue

Here are several things to keep in mind:

• This Google Analytics social 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 someone has published a custom event listener. For example, there is an existing solution for AddThis tracking.
• 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 actually 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 the boundaries of your website). So, in this case, you can say that we’ll track visitors’ intentions to tweet rather than actual tweets.
  
• 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 Analytics and GTM, 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.

• Tag type – Custom HTML
• Tag title – cHTML – Twitter Listener.
• In HTML field paste the following code:

  <script>
  if (typeof twttr !== 'undefined') {
   twttr.ready(function (twttr) {
   twttr.events.bind('tweet', tweetIntentToAnalytics);
   twttr.events.bind('retweet', retweetIntentToAnalytics);
   twttr.events.bind('favorite', favIntentToAnalytics);
   twttr.events.bind('follow', followIntentToAnalytics);
   });
  }
  function clickEventToAnalytics() {
   dataLayer.push({
   'event': 'socialInteraction',
   'socialNetwork': 'Twitter',
   'socialAction': 'click',
   'socialTarget': window.location.href
   });
  }
  function tweetIntentToAnalytics() {
   dataLayer.push({
   'event': 'socialInteraction',
   'socialNetwork': 'Twitter',
   'socialAction': 'tweet',
   'socialTarget': window.location.href
   });
  }
  function retweetIntentToAnalytics() {
   dataLayer.push({
   'event': 'socialInteraction',
   'socialNetwork': 'Twitter',
   'socialAction': 'retweet',
   'socialTarget': window.location.href
   });
  }
  function favIntentToAnalytics() {
   dataLayer.push({
   'event': 'socialInteraction',
   'socialNetwork': 'Twitter',
   'socialAction': 'favorite',
   'socialTarget': window.location.href
   });
  }
  function followIntentToAnalytics() {
   dataLayer.push({
   'event': 'socialInteraction',
   'socialNetwork': 'Twitter',
   'socialAction': 'follow',
   'socialTarget': window.location.href
   });
  }
  </script>

• In Triggering section, click the entire block:
  
  … and choose Window Loaded trigger (which we’ve already used in Facebook’s example)
  Assign 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 of reading this blog post about Google Analytics social tracking? 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 and separate them from other clicks which occur on a page. 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:
  

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?

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?

Nope.

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.

Obviously, 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_ .

 

Social Interaction tag

Next, you have two options how to track Linkedin social interactions with Google Analytics + GTM.

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?

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:

<script>
window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
 'event': 'socialInteraction', 
 'socialNetwork': 'Linkedin', 
 'socialAction': 'Share', 
 'socialTarget': window.location.href
 }); 
</script>

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:

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

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. You know, s#it happens and sometimes new implementation might break the old ones.

If you’re tired of reading this Google Analytics social tracking guide, 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:
  

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:

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.

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 Analytics + GTM (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 Google Analytics social tracking workflow looks like this:

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:

<script>
window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
 'event': 'socialInteraction', 
 'socialNetwork': 'Pinterest', 
 'socialAction': 'Pin', 
 'socialTarget': window.location.href
 }); 
</script>

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:

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

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

 

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 🙂

 

Goole Analytics social tracking: final words

In this pretty long guide, I’ve shown you behind-the-scenes of Google Analytics social tracking and how to track 4 different social network buttons, Facebook, Twitter, Linkedin, and Pinterest.

The first two required to implement custom auto-event listeners which monitor visitor activity and dispatch a Data Layer event whenever someone clicks Like or Tweet buttons. Then that data is passed to Google Analytics via Universal Analytics social (or event) tag.

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

If you still have doubts whether to get your hands dirty working with Google Tag Manager, my advice would be go for it, learn GTM. Every day, more and more digital marketers, web analysts, and others are diving deeper and learning how to take over the control of the web tracking. Join the Google Tag Manager Community on Facebook and get help.