How To Track Social Conversions On Landing Pages

Earlier this month, Google released Google +1 buttons for websites. This seems like a good occasion to celebrate social conversion on landing pages — and provide you with the links and sample code to implement it in your own post-click marketing. By social conversion, we mean a social-oriented action that a user takes on one […]

Chat with SearchBot

Earlier this month, Google released Google +1 buttons for websites. This seems like a good occasion to celebrate social conversion on landing pages — and provide you with the links and sample code to implement it in your own post-click marketing.

By social conversion, we mean a social-oriented action that a user takes on one of your pages: clicking a Facebook Like button, clicking a Twitter Follow button, or clicking a new Google +1 button.

For example, any of these buttons:

Sample Social Conversion Buttons

In some cases, this may be the primary call-to-action for a certain landing page: you deliver meaningful content to a targeted audience, and in exchange, you ask them to socially promote you. In many scenarios, however, these social features will be secondary calls-to-action — an optional (but valuable) way to build engagement.

However, while many people include social sharing buttons on their pages, few of them track their usage. But to optimize something, you need to measure it. We’ll show you how here.

The rest of this article will be a little technical — sample Javascript and links to APIs. If that’s not your cup of tea, you may want to collaborate with a marketing technologist and share this article with them.

Javascript Callbacks & Google Analytics

Most social sharing buttons today are rendered using Javascript. You insert a little snippet of code from the social site of your choice — Facebook, Google, Twitter — and it takes care of displaying the button, perhaps showing an up-to-date counter, and handling clicks from users.

While this is very easy to plug into your page, it does prevent you from directly “listening in” on the user’s interaction with that button. For instance, you typically can’t add your own onclick attribute to the button.

To address this need, most social services now provide a “callback” option in their scripts. You can write your own Javascript function and pass it to their script, which then calls back to your function when a particular event occurs. For instance, Google +1 allows you to specify a callback function that will be triggered when a visitor either adds or removes a +1 vote on your page.

It’s in your callback function that you can insert custom tracking code to record these social conversions in your analytics or conversion optimization platform.

For example, if you’re using Google Analytics, you can take advantage of their event tracking API to record a visitor doing a Google +1 action on the page with something like this in your callback:

_gaq.push(['_trackEvent', 'Sharing', 'Google +1 On']);

Other analytics and optimization software will have slightly different ways of recording these events. For instance, if you’re using my company’s post-click marketing platform, LiveBall, you would insert a liveballTag("Google +1") line in your callback instead.

Example: Social Conversion With Google +1

Let’s look at an example of tracking conversion for a Google +1 button. Start with the Google +1 your website page that lets you configure your own +1 button. By default, the standard button without any “advanced options” gives you the following code to copy and paste into your site:

<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

<!-- Place this tag where you want the +1 button to render -->
<g:plusone></g:plusone>

The first chunk, with the <script> block should probably go at the very bottom of your page, right above your closing </body> tag. The second chunk — the <g:plusone> line — should go wherever you want the +1 button to appear on your page.

So far, this is a piece of cake. Now let’s add a callback to track these +1 events. We’ll name our callback function plusoneCallback, which we can add to our +1 button tag under “advanced options” in Google’s configurator:

Google +1 Callback configuration

 

This now changes the second chunk of code — the <g:plusone> tag — to add a callback attribute:

<!-- Place this tag where you want the +1 button to render -->
<g:plusone callback="plusoneCallback"></g:plusone>

Now, let’s implement our callback function, adding it in front of the <script> block at the bottom of the page. For illustrative purposes, we’ll use Google Analytics events to track these conversions:

<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript">
function plusoneCallback(plusoneObj)
{
   if (plusoneObj && plusoneObj.state && plusoneObj.state == "off") {
      _gaq.push(['_trackEvent', 'Sharing', 'Google +1 Off']);
   }
   else {
      _gaq.push(['_trackEvent', 'Sharing', 'Google +1 On']);
   }
}
</script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

Google +1 actually passes a small JSON object to our callback — I called it plusoneObj in the above function — that lets you see what state the button ended up in when the user clicked on it. If a user added a +1, state == "on" — or if they removed their previous +1 endorsement, state == "off" instead. In our example, we track those two events separately.

You can read more about the advanced options available here on the +1 button API page in Google Code.

Example: Social Conversion With Facebook Like

Facebook provides a similar callback mechanism — they call it subscribing to events — that you can hook into to track “Like” social conversions on your page.

Note that for this example, you may need to register as a Facebook developer to work with their code. Once you do so, you can access the like button plugin page to get the code, something like this:

<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like send="true" width="450" show_faces="true" font=""></fb:like>

Place this where you want the “Like” button to appear, such as in this example:

Facebook Like Example

You can then track these “Like” actions by subscribing to Facebook events with your own little snippet of Javascript. Continuing to use Google Analytics events, you could add the following to the bottom of your page, right before your closing </body> tag:

<script type="text/javascript">
FB.Event.subscribe('edge.create', function(response) {
  _gaq.push(['_trackEvent', 'Sharing', 'Facebook Like']);
});
</script>

Example: Social Conversion With Twitter Follow

Of course, no social conversion toolbox would be complete without tracking Twitter-related actions.

Luckily, Twitter offers a very robust API for tracking “web intents” — their nomenclature for when a visitor clicks on a tweet or follow button. Here’s an example for capturing “follow” events and recording them in Google Analytics:

<a href="https://twitter.com/ioninteractive"
class="twitter-follow-button">Follow @ioninteractive</a>
<script src="https://platform.twitter.com/widgets.js" type="text/javascript"></script>
<script type="text/javascript">
  function followCallback(intent_event) {
    if (intent_event) {
      _gaq.push(['_trackEvent', 'Sharing', 'Twitter Follow']);
    }
  }
  twttr.events.bind('follow', followCallback);
</script>

You can put this entire block of code where you want the “Follow” button to appear on your page. (Simply change “ioninteractive” to your own Twitter account.)

Hopefully this will get you started with tracking social conversions on your landing pages. You may also want to take a look at LinkedIn’s API for Share buttons, as well as the ShareThis API for multiple sharing buttons built into one widget — both of these support callbacks as well.


Opinions expressed in this article are those of the guest author and not necessarily Search Engine Land. Staff authors are listed here.


About the author

Scott Brinker
Contributor
Scott serves as the VP platform ecosystem at HubSpot. Previously, he was the co-founder and CTO of ion interactive.

Get the must-read newsletter for search marketers.