Paste text tracking in GTM and GA4
In a previous post, I showed how to track visitors who copy any text from your website, so in this article, we will take a look at how to track visitors who insert (paste) any text content in your input fields using GTM and GA4.
Again, it might be more useful for retail eCommerce stores to understand if customers are coming after visiting another competitor or watching a product review (thus copying the exact model name into the search).
Trigger data layer event from GTM when text is pasted
As we don’t have a default event in GTM that can trigger when text is inserted (pasted), we will use a bit of JavaScript.
<script>
(function(){
var inputCSSSelector = '';
// Do not edit anything below unless you know what you are doing
var input = document.querySelector(inputCSSSelector);
input.addEventListener('paste', function(e) {
var clipboardData = (e.clipboardData || window.clipboardData).getData('text');
window.dataLayer.push({
'event': 'textInsterted',
'textValue': clipboardData
});
});
})();
</script>- In the GTM “Tags” section create a new Custom HTML tag and a copy provided JavaScript above.
- Add CSS selector of an input where you want to monitor “paste” events.
CSS selector can be provided in the “inputCSSSelector” variable value.
In my example, I will use site search input and my CSS selector will be “input.search-field”.
- Trigger this tag either on All pages or only on the page where your input is available and Save it
Set up GA4 tag event when text is inserted
- Add new Tag in GTM with type – GA4 Event
- Select your GA4 configuration variable.
- Event name can be “pasted_text”
- Add event parameter to track text value that was inserted. I will use “text_value” as parameter name.
NB! If you don’t have a GA4 configuration tag it means GA4 is not installed on the website using GTM. You can check this guide to configure GA4 using Google Tag Manager.
- For text_value parameter value we will fetch data layer variable. Click on the plus sign next to Value field.
- Create new variable and from Type select – Data Layer Variable
- Variable name will be the same as in JS code above – textValue
- Save the variable and it should appear in the Value field.
- Now click on Triggering to add a firing condition and create new trigger.
- Trigger type – Custom Event
- Event name will be same as in dataLayer – textInsterted
- Save the trigger and tag and we are almost ready to test it out!
Last thing we need to add is a custom dimension in GA4 to collect pasted text in our reports.
- Open GA4 Configure > Custom Definitions section and create a new custom dimension.
- Provide descriptive dimension name and description
- Dimension scope will be Event
- Event parameter name should be the same is in GA4 event tag – text_value
- Save custom dimension and go back to GTM.
- Enable Preview mode and paste some text into the input on your website that you have provided in the custom HTML tag. In my case it was search field.
- Open Tag assistant window/tab and in events summary you should see textInserted event.
If you click on it you should see your GA4 event tag.
- Now open GA4 Configure > Debug section to see event values that GA4 has received.
- You should see “pasted_text” event and pasted text value passed in the custom dimension as well (when clicked on the event name).
If you see all of those events then that’s it! You can publish your container and start collecting data.
Aggregated data for any events will available in Reports > Engagement > Events section as usual.
Summary
In this post we have reviewed how we can send event to GA4 when somebody inserts copied text into provided input field. Remember that we can’t store personally identifiable information in GA4, so if you are adding this tracking for fields that could potentially contain that information (although you shouldn’t track those in GA), you will need to apply additional logic to strip any sensitive data before sending it in data layer.
I hope you found it useful and good luck with the tagging!
