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="http://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="http://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="http://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="http://twitter.com/ioninteractive"
class="twitter-follow-button">Follow @ioninteractive</a>
<script src="http://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 the article are those of the guest author and not necessarily Search Engine Land.

Related Topics: Advanced | Channel: Analytics | How To | How To: Social Media Marketing | Search & Conversion

Sponsored


About The Author: is the president and CTO of ion interactive, a leading provider of landing page management and conversion optimization software. He also writes a blog on marketing technology, Chief Marketing Technologist. Follow him on twitter via @chiefmartec.

Connect with the author via: Email | Twitter



SearchCap:

Get all the top search stories emailed daily!  

Share

Other ways to share:

Read before commenting! We welcome constructive comments and allow any that meet our common sense criteria. This means being respectful and polite to others. It means providing helpful information that contributes to a story or discussion. It means leaving links only that substantially add further to a discussion. Comments using foul language, being disrespectful to others or otherwise violating what we believe are common sense standards of discussion will be deleted. Comments may also be removed if they are posted from anonymous accounts. You can read more about our comments policy here.
  • http://www.directresponse.net Dave

    A lot of coding I didn’t understand but definitely understand the idea!
    Definitely a positive when you can track those social plugins in real time.
    Hopefully this is something that is made much easier for non-programmers.

  • http://www.meadiciona.com.br/andraus Paulo Andraus

    Did anyone have any trouble with wordpress installing? I can’t install the fb:like way, just the iframe way.

    If someone had this problem, please contact @pandraus on Twitter so we can talk?
    Tks :D

 

Get Our News, Everywhere!

Daily Email:

Follow Search Engine Land on Twitter @sengineland Like Search Engine Land on Facebook Follow Search Engine Land on Google+ Get the Search Engine Land Feed Connect with Search Engine Land on LinkedIn Check out our Tumblr! See us on Pinterest

 
 

Click to watch SMX conference video

Join us at one of our SMX or MarTech events:

United States

Europe

Australia & China

Learn more about: SMX | MarTech


Free Daily Search News Recap!

SearchCap is a once-per-day newsletter update - sign up below and get the news delivered to you!

 


 

Search Engine Land Periodic Table of SEO Success Factors

Get Your Copy
Read The Full SEO Guide