‘Pay with a Plus’ – offering freebies in exchange for a Google +1 click
So to kick off the (latest attempt at a) blog with a first proper post, let’s have a go at documenting something Russell McAthy (also known as, amongst other things, @therustybear, a digital marketing consultant over at Stream:20) asked me to look at some when towards the end of last year. I’m pretty sure our initial chat came over beers after seeing Craig Bradford’s talk at SearchLondon on the virtues of using Google Plus, the future, and how important the +1 button is and will be. Therefore, this one’s for you, Russ.
The importance of the +1 Button
For those not interested in reading the copious amount of material that’s cropped up in the last year or so on the topic of Google Plus and the +1 buttons, the long and short is that you should probably add one.
So the thinking goes, the +1 button is going to be increasingly important as a ranking factor when you’re thinking about your website’s SEO. The more pluses = the more your website is liked = higher up the SERPs. Furthermore, with personalised rankings, I don’t think it’s far fetched to also assume that the more your friends or circles or peers +1 something, the higher up your own personalised rankings a site is likely to end up – if not now, then potentially in the future. Again, Craig demonstrated this brilliantly with a change to his own results after a +1 on a poker site.
Taking advantage of it
So to leverage this increasing importance, we’ve simply got to get people to click on the button and +1 our site. But anyone who’s ever shilled(/sold/whatever) anything on the Internet knows encouraging anyone to do anything takes a big spoonful of effort. So Russ asked if there was a way we could use the +1 button like you can already can to pay with a Tweet – a system used with some success by my favourite Sussex based real-ale fan Kelvin Newman for his great ebook on link building, Becoming a Clockwork Pirate. Essentially we’re looking to get someone to +1 our site in exchange for getting something in return – whatever that may be (a download or some extra content, I guess). Basically we want to bribe someone to love us.
Ok, IA(definitely)NAL but let’s figure if we can actually do this. Firstly, remember to take a look through the +1 button rules yourself and check your site isn’t breaking any button rules regardless. Secondly, if we have a quick peek at the policy page, there’s a few bits that stand out that might mean we shouldn’t be doing this, but I’ll take the following sentence as a sign from the Gods:
For the avoidance of doubt, Publishers may direct users to a Google+ button to enable content and functionality.
Good enough for me. Let’s move on.
How are we going to do it?
Initially (and much like the Pay with a Tweet setups), I looked at hooking something into the Google Plus API but it kinda seemed like a lot of effort (and may not even be possible). I mean – aside from actually having to set it up, manage it, deal with quotas, blah blah blah – to be honest, I only looked at it for about 30 seconds. Why? Because the +1 button seems to do exactly what we want.
Looking at the docs we can see the button has a callback parameter we can use to run a function – essentially, when someone clicks the button we can make it do something else. Using this, we can do what we want. In this case, when the user +1′s the site, we could pop up a box that offers them a download. Simple right?
How secure is my download?
In the solutions below, not very. Or not very if you’re aiming your download at a crowd that understands a little bit about tech or the web. If you aimed it at my mum or dad (or probably even girlfriend), you’d be fine. As Kelvin said in the econsultancy article I linked to earlier, people could find the download without the tweet by taking a look at the page source. You could probably obfuscate it a little more if you wanted to (or maybe even check the referer before you push the file for download?), but that kind of thing usually just makes me try harder to get it. Moreso, I see no reason why I couldn’t just +1 it, download it and remove my +1, much like deleting the Tweet. What’s done can be undone (sometimes).
Next you’re going to need to create your +1 button. You can do that on the +1 Button page. Create it as you normally would, in whatever style you want, but make sure you open the ‘Advanced options’ drop down and populate the ‘JS callback function’ with the word ‘paywithaplus’. See the picture below for a screen shot I took earlier. Copy the code and paste it where you want your button. Remember to add some copy explaining what’s going to happen when someone hits the button!
In order to make it actually do something, you’re going to need to include a jQuery plugin. It should be downloaded from here and included in the head of your document, ideally just before the closing </head> tag. Depending on how you’re setting it up, you may also need to include the CSS file. You also need to add the code to make it actually work, again, in the head of the document. This is the function that’s called when the button is clicked. It’s also where we’re going to define what you want it to do. Including all the bits, and in this example using the settings to popup a download link, this is what it should say:
Note the capital letters saying PATHTO – this is your own path to the plugin and css.
Defining the options
I’ve written the plugin to give you four options on how you want to present your download link.
- Redirect to new content
- Load an external page into a popup
- Popup a download link
- Fade or slide in existing content
Each one of the options has advantages and disadvantages, but all of them should be relatively simple to set up if you follow the instructions and have a small amount of web experience.
Before we dive into each one, I’ll quickly explain something available to all 4 setups. By including:
pushToAnalytics: true, customPushEvent: 'PayWithAPlus',
…in your settings you can push a custom event to Google Analytics and record your +1 clicks. Both the on and off clicks will be recorded, along with the URL that’s being used, and if you add the ‘customPushEvent’ setting, you can define the name being used in the custom event (as something other than the default). This is turned off by default, so you’ll need to include it if you want it tracked as a custom event in GA.
Redirect to new content
This is the simplest option. Once the user has +1′d your page, they’re directed to a new page (which would have your download link or whatever). Of course there’s nothing to stop them sharing this link (you could always rotate it, I suppose), and you should probably add something to prevent it being indexed.
There are two main settings – one is the URL (obviously) and the other is a timing. The timing is set by default to 2 seconds. In my personal testing (all 30 seconds worth), I found with an immediate redirect the +1 wasn’t registered. 2 seconds seemed to be long enough to register the click, but my guess is you’d need to experiment so you don’t lose them. You only need to include the JS file and the options for this to work, no need to include the CSS.
Perhaps the best thing about redirecting the user means they have to revisit the initial page in order to cancel their +1. Sly, right?
Load an external page into a popup
In order for this to work (properly) you need to include the CSS file. The CSS is also needed for the download link popup, so I’ll talk through it briefly here. For the sake of brevity I won’t include the file, but feel free to open it and take a gander. Basically it’s going to look like a square white box in anything less than IE9 (because IE8 and it’s predecessors are *just* dreadful), but should look like a nicely rounded, nicely shadowed box in all the proper browsers. By default it’s going to use the font you specify for your page, but obviously you can override anything to make it look as you please (or make it look like a modal window, or put unicorns and rainbows in the background, or whatever). A close button is set by default at the bottom of the popup.
One thing I will note with the popup is you’re popping over the top of the +1 share box. Now clearly this may or may not be an issue for you – by default, in the stylesheet, I’ve set the z-index of the base layer (#pwap-popOver) to 3000000000. The +1 popup seems to be around 2000000005. If you want your popup to appear below the Google window (to give people a chance to share with people other than the default), you’ll need to set this to something like 10000 (or whatever is high enough to pop over your site content, but not the Google box).
For the external page popup, there’s only two settings – the page you want to display and the speed of the popup. By default the page is displayed in an iframe with 30 pixels of white padding. All of this, of course, can be edited in the CSS if the page you’re popping up doesn’t have a white background (and you probably should – or edit the CSS – if you want it to look nice and tidy). The default popup time is half a second.
Popup a download link
Popping up a download link is probably the closest to CloudFlood and the other similar pay with a tweet setups. You’re going to need to include the CSS again (explained earlier), but obviously you can amend this to do as you please.
There are four main settings to get this going. You only *need* to include the popupLink – essentially the link to the file you want downloaded. By default it’ll popup a window with a thank you message at the top and a link to download the file. For the tinkerers amongst you, you can define settings to change the copy of the title and the download link, and also set the speed of the popup.
Using some CSS, the link and title should appear in the dead centre of the popup, but again, this can be amended however you like (including link colour, size, and whatever else, in the file).
Fade or slide in existing content
Last but by no means least, I’ve added the option to fade or slide in some existing content that’s hidden on the page. In the example page, I’ve included a hidden div below the +1 box that appears when you click. Obviously you’ll need to set the content you want to fade or slide in to ‘display: none;’ in your CSS, but there’s no need to include the stylesheet for this one.
Three settings to play with here – you’re going to need to include the displayDiv, the div you want revealed, but the other two are optional. The two optional setting are how you want it to appear, a slide or a fade, and the speed with which it appears.
I hope it all makes sense. Don’t forget to download and include the files from here. If you’ve never used GitHub before, just click the ZIP button to download everything as a Zip file, or you can click each individual file to download it, copy it, or whatever it. There’s a compressed version of the plugin and an uncompressed one (if you want to see what it’s doing).
Make sure you do your testing (obviously). I’ve had a pretty good play and ironed out what I can, but don’t hold me responsible if something breaks. I’ve not tested it on mobile either. If you have any problems, I’ll help if I can / have the time, but no promises ;-)
Everything I’ve written could probably be simplified, but I’m kind of hoping I’ve made it easy enough for people who might not know how to a) simplify it, or b) do it in the first place. For those that want to play, as I’ve already said, the code is up on GitHub and I’d love to see any improvements or tidy-ups. Go for it motherforkers…
Moreso, I’d love to know if you use this in a real life scenario – and if you get some great use out of it, I’d love to see where (and feel free to buy me a pint)! Enjoy!