Trap and Track Google Plus Button Click Events

So you want to know when somebody gives you a +1 or takes away a Plus One away on your page? It's actually quite simple. No crazy libraries or tons of coding. Some of you may be asking why you would care to do it in the first place. First, since G+ let's you give a plus and take one away, you may want to hide the button after you get a +1 to prevent people from double-clicking and taking it back. Or, you might want to bubble those events for tracking with your Google Analytics or Woopra Tracking Account. It does not really matter why you want to trap the event, the point is you want to, so here is the code, and a live demo..

Google+ Buton HTML Code

Let's start with the HTML for putting the button on the page. I'm not going to go into the details on button configuration, as Google has already done a great job with that.

<script src="https://apis.google.com/js/plusone.js"></script>
<div id="plusBox">
    <g:plusone size="Tall" count="true" callback="plusClick" </g:plusone>
</div>

The only thing not needed is the div wrapper I added around the button itself, which I use for convenience to hide the button later if desired. See more on that with the JavaScript below. You will notice the callback parameter that we added in the button code above. This will invoke a JavaScript function named plusClick when the button is clicked (feel free to change the code and name the function whatever you want).

JavaScript Callback Function

Now to the JavaScript function that we told the button to call:

function plusClick(data){
    // code....
}

The function called should except one parameter, which is a JSON object. This object will have two items. href and state. In our example:

data.href is the URL of the +1
data.state is either on for a +1 or off for the removal of a +1.

Google Plus or Google Minus

You can easily make a logical decision of what to do based on the click being a +1 or -1 by evaluating the data.state item:

function plusClick(data){
    if(data.state=="on"){
        // +1
    }else if(data.state=="off"){
        // -1 (user took their +1 Away)
    }
}

And that my friend is all you need in terms of responding to those events. So let's take a look at some real world uses:

Trigger Google Analytics Event

Easily log this as a custom event for tracking in your Analytics account

function plusClick(data){
    if(data.state=="on"){
        _gaq.push(['_trackEvent', 'Google-Plus-One', data.state, data.href]);
    }else if(data.state=="off"){
        _gaq.push(['_trackEvent', 'Google-Plus-One', data.state, data.href]);    
    }
}

Notice in both cases were tracking data.state as a parameter that way we can segment + and -

Trigger Woopra Tracker Event

If you happen to be using Woopra you can bubble this event to the log as well as a live notification:

function plusClick(data){
    if(data.state=="on"){
        woopraTracker.pushEvent({name: 'Google +1', url: data.href});
    }else if(data.state=="off"){
        woopraTracker.pushEvent({name: 'Google -1', url: data.href});
    }
}

That should be enough to get you started :) - you can also check out the:

live demo