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:
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.
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.
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:
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:
This now changes the second chunk of code — the
<g:plusone> tag — to add a
<!-- 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:
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.
<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:
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:
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.