Installation time: 15 minutes.
A really great way to see what your users are interesting in when visiting your website is to measure if they are copying your texts. Every time a user copies a text it shouts out “I NEED THIS”. This is valuable information in order to improve your website and if e.g a lot of people are copying a phone number, maybe you should create a hyperlink to make it easier for the users to call you. Or you have a great article explaining “How to buy a house” and you can see that many are copying a phrase or a word – maybe you should write more content on that topic or make a poster to explain it even more.
All this can be measured with Google Tag Manager and in just a few steps you can make this go live on your website.
Variable
- First of all. Sign in to your Google Tag Manager account and create a new variable and name it “Copytext-variable”.
- From Choose Type use a Data Layer Variable.
- The second step in this process you need to configure your variable. In the Data Layer Variable Name choose “clipboardText”. Hit Save Variable.
Trigger
- Create a new Trigger name it “Copytext”.
- From “Choose Event” make it a Custom Event.
- From the second step Fire On write in the Event name “textCopied”.
Tag
- Create a new Tag and name it “Text Copied”. This tag will send the data into Google Analytics every time a user copy a text from your website.
- Choose Product, select Google Analytics.
- Choose a Tag Type, I bet you are using Universal Analytics.
- The next step is to configure the tag. From the Tracking ID you have two options. Either you can copy/paste your UA-id into the field. Instead of doing this every time you are creating a new tag you can simply create a new variable and name it “UA”. The Choose Type use Constant and in the last step Configure Variable and in the field Value insert your UA-id. Voila!
- As Track Type choose Event.
- Category: Text Copied.
- Action: Choose from the +, Copytext-variable.
- Label: Page Path.
- Fire On: From More choose Copytext.
The last step is to tell Google Tag Manager what the variable, trigger and tag should do. And in this post we want an event when any user on any page is copying a text. To do this we need to create a tag to connect everything together – Custom Listener tag. Here it is:
Custom Listener Tag
- Create a tag and name it custom Listener.
- Choose Custom HTML Tag.
- Now we are going to tell GTM how a text is copied. Copy/paste the HTML below into your tag.
- Fire On – All Pages. Click Save Tag.
// Copy the text below <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>
Now everything is set. You can now preview the tag to see if it’s firing into Google Analytics.
Go to your website and copy any text on your site. Open your analytics account and choose Real Time > Event. Publish the tag. GG!
You can see all this data in Behavior > Events > Overview. Now it’s up to you to make the user experience even better!
Did you like this? Brag to your colleagues about your new skill and share it!