1 2 3 4 5
Local Business Search Databses
50% Off Database Specials
ATM Locations Database
Canada Executives Database
Restaurant Locations Database

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

Restaurants Public Schools Drink Recipes Colleges Hospitals Lawyers and Law Firms

Andrea says:

Mar 21st

Is it possible to track also the click on the Google Plus page "Follow" button?

Nicol Scarpa says:

Jul 6th

Thank you for the precious informations.

Luu Dao says:

Jun 18th

How i can get userid with callback button?

Facebook Friend Adder says:

Aug 31st

It would be nice if this was called when the page loaded as well, so we could hide the button if it's already been clicked every time.

Linesh Jose says:

Jul 25th

This is such a good article. Thanks for sharing :)

Don says:

Jul 17th

The following list was extracted from comments on Vic Gundotra's Google+ profile, Senior VP of Social at Google. The speed at which this release has been announced is impressive.



- Ability to share Google Docs and Calendar with circles

- Lifting of the 5000 circle cap and the ability to overlap circles

- Easy private messaging option including to person who starts a thread

- Link to hide all comments again after you've clicked to show all

- Ability to modify circles a post is shared with after posting it

- Ability to share with all circles, but with an exception option

- Reading sparks and +1 comments in the Android app

- Option of a circle that doesn't show up in your stream

- Menu follows you down the stream as you scroll

- Revamp Google Reader to make sharing easier

- Sharing and refresh updates in the Android app

- Better integration of Google Chat with Google+

- Fix issues with instant upload for photos

- Addition of hash tags to aid searching

- Blocking working 100% of the time

- Google+ app for other platforms

- Easy way to merge circles

- File-sharing integration

- Nested comments

Leave a Comment

 
us executives email database