How to track when people are copying text from your site (GTM)

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.

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;
}

Source: https://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.

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

});

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 use the dataLayer a lot, and the same goes here. We are going to push data into the dataLayer with the information we know, by extending the code above as follows:

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

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 Google Tag Manager

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.

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)

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

<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>

How it looks in Google Analytics

With the above in place, you’ll get data into the Top Events report found under Behavior in Google Analytics.

Under Event Action you’ll find all the pages where people have copied text from. If you drill down by click on one of the links, you’ll end up with a report that shows you the actual text snippets being copied from each individual page on your site.

If you’ve got any questions, don’t hesitate dropping a comment below and I’ll get back to you.

Have fun and good luck!