We all want to measure our pages in the best possible way, and I’m always trying to figure out how to lower the bounce rates where applicable. One of the things that visitors to your page can do is to copy some text, in order to send it in an email, to use it when sharing something on social media and so forth. And if a visitor is actively copying text from a page, that’s interaction to me.

So how can we possibly know if a visitor to your page as copying some text or not?

Well, it’s actually pretty easy. And using Google Tag Manager we can easily pass this information onto Google Analytics and start measuring what pages on your site people are copying stuff from.

Javascript function to get text from the clipboard

As you know by know, Google Tag Manager relies heavily on Javascript and let’s take that as an advantage. We are going to use a Custom HTML Tag in order for this to work, so start by creating one of those.

The next thing we need is to make use of is a function that checks what’s in the clipboard right now. I’m not going to invent the wheel once more, so I googled it and found this snippet of code that does exactly what we are looking for.

[javascript]function getSelectionText() {
var text = “”;
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != “Control”) {
text = document.selection.createRange().text;
}
return text;
}[/javascript]

Source: http://stackoverflow.com/questions/5379120/get-the-highlighted-selected-text

This function will return the text currently in your clipboard. No more, no less. But that’s just what we need in the next step.

Add an event listener on ‘copy’

There is already an event handler available to us that the browser will execute as soon as a visitor copies something into the clipboard, namely the copy event.

So we start by defining the actual event listener as stated below.

[javascript]document.addEventListener(‘copy’, function(e){

});[/javascript]

This by itself won’t do much more than add the actual listener to the copy event, but let’s build upon this, shall we?

When working with Google Tag Manager I tend to use the dataLayer a lot, and the same goes here. We are going to push data into the dataLayer with the information we know, as follows:

[javascript]document.addEventListener(‘copy’, function(e){
dataLayer.push({
‘event’: ‘textCopied’,
‘clipboardText’: getSelectionText(),
‘clipboardLength’: getSelectionText().length
});
});[/javascript]

First if all, we are going to send an event named ‘textCopied’ into the dataLayer as soon as a visitor copies something. Second, we are pushing another variable with the name ‘clipboardText’ containing the value of the actual text being selected on the document, retrieved via the getSelectionText();  function we created earlier.

I am also pushing the length of the copied text just to show how it’s done, if someone want to use that information somehow too.

Defining what we need in GTM

Create dataLayer variable in GTM

Start by creating a new variable and give it a proper name, such as DL – Clipboard Text and in the input field for Data Layer Variable Name you’ll use the name you are pushing into the dataLayer, clipboardText in our case. This will give us the possibility to use this value within GTM.

Google_Tag_Manager

Next step is to create a Tag where we select Google Analytics and change the Track Type from Pageview to Event.

We then send in the following data with the event:

  • Category: Clipboard Copy
  • Action: {{Page Path}} (the page the visitor is currently on)
  • Label: {{DL – Clipboard Text}} (The value we retrieved from the dataLayer)

Google_Tag_Manager

Lastly we need to configure the Trigger, which will fire on the Custom Event named textCopied, which is the value we push into the dataLayer in the addEventListener defined above.

The Custom HTML Tag in its entirety

[javascript]<script>
// Declare function to get selected text from document
function getSelectionText() {
var text = “”;
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != “Control”) {
text = document.selection.createRange().text;
}
return text;
}

// Declare function on copy event
document.addEventListener(‘copy’, function(e){
dataLayer.push({
‘event’: ‘textCopied’,
‘clipboardText’: getSelectionText(),
‘clipboardLength’: getSelectionText().length
});
});
</script>[/javascript]

Boom, we’re done!

Events_-_Google_Analytics

That’s all there is to it. From now on, you will be able to measure what people are copying from your site, and also from what pages.

Best of luck, and if you have any questions on comments, the comments are free for discussion.

Tell your friends...Share on Facebook10Tweet about this on TwitterShare on Google+35Share on LinkedIn12