October 14, 2017

How To Add a Copyright Notice to the Copied Text (with GTM)

Last week, I had a live Google Tag Manager training session and was showcasing the library of 30+ GTM Recipes to my students. When I mentioned the Copy text recipe by Daniel Carlbom, a student asked: is it the recipe which adds a copyright notice when someone copies and pastes the text?

I said “no”.

“Is it possible?”, he asked.

“Yes, I guess“. And that’s where the idea of this quick blog post was born. I was pretty sure it was possible but I needed to do some research to be sure. In fact, everything happened really fast. In less than 3 minutes, I was already playing around with the solution on my blog.

In this article, I’ll show you how to add a copyright notice to the copied text.

A Copyright Notice? Where?

This is not a very popular solution, but I noticed that some websites (especially news sites) add an additional text when a visitor copies any text of their website. And when he pastes it, that copyright notice gets also pasted.

If you still feel confused, just copy any text from this blog post and paste it anywhere (e.g. Notepad, Word, etc.).

Get it now? After you pasted that text, I have secretly added:

Read more at: https://www.analyticsmania.com/post/copyright-notice-in-copied-text-gtm
Analytics Mania – Digital Analytics Blog

If you want to add some similar text to your blog post, continue reading. Personally, I don’t use it (except on this page (for demonstration purposes)) but maybe some of my readers will find it useful.

The Script

After a quick googling, I’ve found this Stack Overflow thread which discusses the copyright notice script.

<script>
function addLink() {
 //Get the selected text and append the extra info
 var selection = window.getSelection(),
 pagelink = '<br /><br /> Read more at: ' + document.location.href + '<br />Analytics Mania - Digital Analytics Blog', // Change this text
 copytext = selection + pagelink,
 newdiv = document.createElement('div');

 //hide the newly created container
 newdiv.style.position = 'absolute';
 newdiv.style.left = '-99999px';

 //insert the container, fill it with the extended text, and define the new selection
 document.body.appendChild(newdiv);
 newdiv.innerHTML = copytext;
 selection.selectAllChildren(newdiv);

 window.setTimeout(function () {
 document.body.removeChild(newdiv);
 }, 100);
 }

 document.addEventListener('copy', addLink);
</script>

function addLink() {

//Get the selected text and append the extra info

var selection = window.getSelection(),

pagelink = '<br /><br /> Read more at: ' + document.location.href + '<br />Analytics Mania - Digital Analytics Blog', // Change this text

copytext = selection + pagelink,

newdiv = document.createElement('div');

//hide the newly created container

newdiv.style.position = 'absolute';

newdiv.style.left = '-99999px';

//insert the container, fill it with the extended text, and define the new selection

document.body.appendChild(newdiv);

newdiv.innerHTML = copytext;

selection.selectAllChildren(newdiv);

window.setTimeout(function () {

document.body.removeChild(newdiv);

}, 100);

}

document.addEventListener('copy', addLink);

</script>

It also automatically fetches the URL of the current page and adds to the copied text. If you want, you can edit notification’s text (just look for pagelink in the script).

pagelink = '<br /><br /> Read more at: ' + document.location.href + '<br />Analytics Mania - Digital Analytics Blog',

1	pagelink = '<br /><br /> Read more at: ' + document.location.href + '<br />Analytics Mania - Digital Analytics Blog',

That’s it! Copy the entire script, add it as a Custom HTML tag in Google Tag Manager, choose DOM Ready trigger, and you’re good to go!

Don’t forget to test it with a GTM Preview and Debug mode.

Final Words

In this super quick tutorial, I’ve shared a script I’ve found online which adds a copyright notice to the copied text. If a visitor copies at least a tiny fraction of your text and then pastes it somewhere else, the script will also add:

A short copyright text.
A link to the page where the text was copied from.

For demonstration purpose, I’ve implemented the script on this page. Go ahead and try it.

Personally, I wouldn’t use on analyticsmania.com it because it would ruin the user experience. But since I have received the question from my student regarding this possibility, I guess, there is a slight demand.

Nonetheless, feel free to use it and let me know if you have any other questions.

Julius Fedorovicius

In Google Tag Manager Tips

7 COMMENTS

Tomas

Oct 16 2017
Reply

Hey, thanks for the article. I wonder, it is possible to add watermark to images when somebody wants them download them?
Thanks

Julius Fed

Oct 16 2017
Reply

Not sure. My first thought is that the watermark stuff should be done server-side. But I'll dig deeper when I have more time.

Jun 3 2018
Reply

Hi Interesting topic. I copied content from this page and pasted on word and notepad but i don't see the secret message. how do I see it?

what am I missing?

Thanks

Julius Fed

Jun 4 2018
Reply

My bad. I accidentally removed the tag from GTM while doing spring cleaning :) The tag is now back and you can test it by copy-pasting text.

Rumus Excel

Oct 17 2018
Reply

This is a pretty good tag, I will use it to replace the old script that I have used for the past year.


!function(e,t){var n="getSelection",o="removeAllRanges",i="addRange",l="parentNode",a="firstChild",d="appendChild",r="removeChild",s="test",c="innerHTML";if(e[n]){var p,g,f,h,u,y;t.addEventListener("copy",function(C){for(g=C.target;3===g.nodeType;)g=g[l];if(h=t.createElement("div"),(p=e[n]())&&p.rangeCount&&(p=p.getRangeAt(0))&&(f=p.cloneRange(),p=p.cloneContents())){for(;u=p[a];)h[d](u);if(!/^(pre|code)$/i[s](g.nodeName||"")&&!/(^|\s)no-attribution(\s|$)/i[s](g.className||"")){var v=e.location.href;h[c]+="© "+t.title+'Source: '+v+""}y=t.createRange(),t.body[d](h),y.selectNodeContents(h),p=e[n](),p[o](),p[i](y),setTimeout(function(){h[l][r](h),p[o](),p[i](f)})}},!1)}}(window,document);

Pooja Aggarwal