Monitor Text Selections on Your Site Using GA4 Events

This was an interesting finding for me. I randomly ChatGPT if I could track what text people are selecting on my blog post via Google Tag Manager & GA4 & to my surprise; yes it can indeed be tracked. 🤯

What I mean here is that for someone who is reading my blog post what phrase are they selecting that is what I can track. Let me add a screenshot here to explain what I mean.

text selection

The fact that someone selected a text like this, is what I can track in GA4.

Now let me explain how you can do this step by step.

Step 1 – Go to Google Tag Manager > Your Container > Tag & Create this Listener Tag 

 

				
					<script>document.addEventListener('mouseup', function () {
    var selectedText = window.getSelection().toString().trim();
    if (selectedText.length > 0) {
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            event: 'text_selected',
            selectedText: selectedText
        });
    }
});</script>
				
			

The tag type would be Custom HTML, which is where you are supposed to paste this code. It’s an event listener that will monitor & report the moment someone selects any text.

This page should fire on all pages that’s what the trigger would be. But you can choose to make it fire on selected pages if you want.

Step 2 – Create a New Variable in GTM

Here the variable type would be the Data Layer Variable. Here is how the setup would look like.

Step 3 – Create a Text Selection Trigger

This is how the setup would look like

text selection trigger

Step 4 – Create a Text Selection GA4 Custom Event Tag

The tag type would be GA4 Event.

Add your Measurement ID

The event name would be = text_selection

Create Event Parameter

Parameter Name = selected_text

Parameter Value = {{Selected Text Variable}}

Lastly triggering to be set on the Text Selection Trigger that we had created.

Here is how it would look like.

GA4 Text Selection Tag

You are done with Google Tag Manager, now the next steps requires you to be on GA4

Step 5 – Create a Custom Dimension

Go to GA4 > Settings > Custom Definition > Create Custom Dimension

This is how the setup would look like. 

Dimension Name can be whatever you would like to name it, Scope should be Event & Event Parameter must be selected_text precisely what we set in GTM.

text selection custom dimension

Step 6 – Create an Exploration Report to Monitor what Text are people selecting

Voila! And just like that now I can see what text are people selecting on my web pages.

Probable Use Cases:

  1. Let’s say you published blog posts that contains helpful scripts or codes; now with this you will know if people are even copying that or not.

  2. In your thought leadership articles, you will know if people are copying the quotes or remarks that they may share online.

  3. It may overall help you evaluate the helpfulness/usefulness of content under different circumstances.

Leave a Comment