Handling events for +1

A feature that I haven’t really talked about yet, events on +1 buttons, is interesting because it enables so many exciting scenarios for developers interested in doing something when their users click the +1 button and so on.

A high level view of the events

Let’s look at the 3 available events:

  • onstartedinteraction
  • onendinteraction
  • callback

The onstartedinteraction event gets fired when the user hovers over or clicks the button.  The event passes a type value indicating the type of interaction and an id indicating the target url.

The onendinteraction event gets fired when the user completes an interaction, such as when the mouse leaves the area around the +1 button.  The callback returns a type value that has the same characteristics as onstartedinteraction.

The callback event gets fired after the button gets clicked.  The callback returns a structure containing the button state and the target url.

The simple demo

I have put together a demo page showing the  various  interactions being activated, Google+ +1 and share events demo.  It’s not the flashiest demo, as you can see from the following image showing it running:

However, it’s really simple and illustrates the various events that can get triggered and the values in the handlers.

Running the demo, you can see the three events getting triggered and the values that correspond to each event in a div.  The events are specified in the button using the following markup:

  <div
      class="g-plusone"
      data-expandto="bottom"
      data-onendinteraction="onEnded"
      data-onstartinteraction="onStarted"
      data-recommendations="false"
      data-annotation="inline"
      data-height="25"
      data-autoclose="true"
      data-callback="onCallback" 
      data-width="300"
  >

Each of the handlers uses the pattern:

  function onStarted(args){
    document.getElementById("div").innerHTML = args.type;
    console.log(args);
  }

Really simple code, but you can do some interesting things with these events.  For example, you can display a “thank you note” when a user +1′s a button or suggest new content like we do with our +1 button. You could also implement your own analytics for injection into 3rd party analytics systems. Before I show you how, don’t forget that the Google+ buttons policy forbids various things like trying to identify users or incentivize clicks with money or monetary prizes. Although you can’t give prizes for button clicks, you can show readily visible content, as described in the policy: “For the avoidance of doubt, Publishers may direct users to a Google+ button to enable content and functionality.”

A more interesting example…

And so, let’s get into it!  I have another +buttons interactions page that shows how to use the callback functions to display content.  The example does one simple thing… shows you content when you +1 a link that is related to the link you click and swaps out the content or shows other content if the +1 button state changes.

The following code shows how this works for the cat +1 button:

First, the +1 button, an anchor tag for the target link, and a container for the result image is created for the cat +1:

  <a id="cats" name="cat">Cats!</a>
  <div id ="catsplus"
      class="g-plusone"
      data-expandto="bottom"
      data-recommendations="false"
      data-annotation="inline"
      data-height="25"
      data-autoclose="true"
      data-callback="onCatCallback"
      data-width="300"
      data-url="/plusinteractions.html#cat"
  >
  <div id="cats"></div>

Next, the handler for the callback needs to be implemented.  The following implementation is again relatively simple:

  function onCatCallback(args){
    var url = '';
    if (args.state == 'on'){
      url = 'http://i3.kym-cdn.com/photos/images/original/000/266/777/652.jpg';
    }
    if (args.state == 'off'){
      url = 'http://i1.kym-cdn.com/photos/images/original/000/406/325/b31.jpg';
    }
    showImage("#cats", url);
    console.log(args);
    console.log(this);
  }

When a user clicks on the +1 button and the button is in the on state, indicating the user has +1’d it, the first image shows.  When the user sets the +1 state to off, the image is replaced (or set to) another image.

Thoughts and conclusions

First off, that is one ugly dog that appears when you turn off the dog +1 button, sorry if I surprised you!

Next, this concept could easily be applied to analytics by using an XHR call or client library call for the analytics solution you’re using. I’m very tempted now to update my +1 buttons to track their activities to a custom logging solution just to see whether people are removing +1’s and associating other related data with the clicks

As always, feel free to ask questions or make comments here or on Google+, I love to hear about interesting use cases and nits in my code.