I was reading this article the other day. Got interested in Edgar Alan Poe and decided to add this book to my to-read list. So I tried copying the book’s name and something really amazed me. It was not just the book’s name that was copied..
You can see from the screenshot that the link to the page got copied along with the small crumb of words I actually tried to copy. Well, this seemed interesting. I tried reading more on this and realized Cracked.com is not the only site that uses this trick. Answers.com, Financial Times, Fox News, New York Post and a lot more sites use this feature.
Well, what’s the idea behind this. It’s claimed that more than 80% of the content shared across the internet is over ‘Copy and Paste’. This mostly involves copying the content from a web page and sharing across e-mail.
I never thought such a simple thing like ‘Copy and Paste’ can be monetized. Most of these sites use the services provided by Tynt. It’s wonderful how Tynt uses simple JavaScript events to capture and manipulate this information. From how I see this, there are two possibilities.
- Use analytical techniques to capture details on when any content from my website is copied. Huge details like how many users have copied my content, when did they copy and what did they copy can be collected.
- A copyright statement or a link to the original webpage can be appended to the copied text. This will improve the SEO chances of the webpage in question.
Let’s see how they do this..
It all starts with a JavaScript event, oncopy. As the name says, this event is fired when,
- Pressing CTRL + C.
- Selecting the Copy command from the Edit menu.
- Opening the context menu (right mouse button) and selecting the Copy command.
See the below example.
See that, in line no 5, I have registered an event handler for the oncopy event. This will fire on the conditions mentioned above. Within the event, the developer can make an AJAX call to the server. The call can be used for logging or analytics.
However, accessing the clipboard data is a bit tricky and all the browsers are not in the same opinion here. The difference comes when the oncopy event is triggered. For Internet Explorer, the event is fired just after the text is copied. However, in the case of Firefox or Chrome, the event is fired just before the text is copied. So in the case of Firefox or Chrome, the clipboard is empty 🙁
Fetching the clipboard data is simple in the case of Internet Explorer.
The clipboard values are accessed using the clipboardData object in Window object. See more about DOM objects here.
See the code carefully, and it can be seen in line no 11 that I am making a check for IE. The clipboardData object would be null for other browsers. And for other browsers, I am returning false and breaking the program flow. Remember that for browsers like Firefox and Chrome, the oncopy event is fired before the value is copied to clipboard. So, returning false will disable the copy here.
It’s a neat trick that can be widely used in content centric sites. However, it’s not without complaints.. see this article on how Tynt can annoy someone.