Written by: Aleš Sýkora

The Author of Toolset.wiki. Big fan of Toolset plugins and WordPress.

I am big fan of WordPress and Toolset plugins. I have done many projects based on WordPress. I also have experience with online marketing, PPC advertising and SEO. I live in Czech Budweis – the town of Budweiser Budvar breverage in the south of the Czech Republic – the heart of Europe.

I love skateboarding, snowboarding, frisbee, fitness, healthy lifestyle, tattoos, mountain biking and other sports. I enjoy having time with friends with good beer and good music.

Tracking events with Google Tag manager & WordPress

Last Update: 11. 11. 2019 , Category:

This tutorial is made especially for those who switched to the Gutenberg editor and found very complicated to add onclick events to the links and other elements. I was thinking about some better Google Analytics data and found this code (download) for standard Google Analytics which tracks some cool events:

Advanced Tracking 1.0

  1. Copy to clipboard
  2. Scroll Depth
  3. Text lenght
  4. Image Count
  5. Social tracking
  6. Time Spent
<script>
var _0x5d8e=["readyState","complete","name","get","getAll","gtm","indexOf",".send","event","send","social","body","getElementsByTagName","undefined","copy","Advanced tracking","Copy to clipboard","substring","trim","textContent","target","addEventListener","onscroll","document","documentElement","scrollHeight","offsetHeight","clientHeight","max","innerHeight","scrollTop","pageYOffset","Scroll","20%","40%","60%","80%","100%","pathname","location","[\\?&#]","=([^&#]*)","exec","edge.create","Facebook","Like","subscribe","Event","edge.remove","Unlike","message.send","Share","nodeName","IFRAME","src","url","Twitter","tweet","bind","events","ready","Time spent","15s","setTimeout","30s","45s","60s","75s","90s","105s","120s","length","","replace","round","img","Text length","Image count"];(function(){try{if(document[_0x5d8e[0]]===_0x5d8e[1]){mainAdvancedTracking()}else {var interval=setInterval(function(){if(document[_0x5d8e[0]]===_0x5d8e[1]){clearInterval(interval);mainAdvancedTracking()}},250)};function mainAdvancedTracking(){

        var copyToClipboard = true;
        var scrollTracking = true;
        var textLength = true;
        var imageCount = true;
        var socialTracking = true;
        var timeSpent = true;

var trackerName=ga[_0x5d8e[4]]()[0][_0x5d8e[3]](_0x5d8e[2]);var isGTMhere=false;if(trackerName[_0x5d8e[6]](_0x5d8e[5])> -1){isGTMhere=true};function sentEventToGA(eCat,eAct,eLab){if(isGTMhere){ga(trackerName+_0x5d8e[7],_0x5d8e[8],{eventCategory:eCat,eventAction:eAct,eventLabel:eLab,nonInteraction:1})}else {ga(_0x5d8e[9],_0x5d8e[8],eCat,eAct,eLab,{"nonInteraction":1})}}function sentSocialToGA(eCat,eAct,eLab){if(isGTMhere){ga(trackerName+_0x5d8e[7],_0x5d8e[10],{eventCategory:eCat,eventAction:eAct,eventLabel:eLab})}else {ga(_0x5d8e[9],{hitType:_0x5d8e[10],socialNetwork:eCat,socialAction:eAct,socialTarget:eLab})}}try{if(copyToClipboard){var hbody=document[_0x5d8e[12]](_0x5d8e[11])[0];if( typeof (hbody)!==_0x5d8e[13]){hbody[_0x5d8e[21]](_0x5d8e[14],function(evt){sentEventToGA(_0x5d8e[15],_0x5d8e[16],evt[_0x5d8e[20]][_0x5d8e[19]][_0x5d8e[18]]()[_0x5d8e[17]](0,100))})}}}catch(err){};try{if(scrollTracking){var flag20=true;var flag40=true;var flag60=true;var flag80=true;var flag100=true;window[_0x5d8e[22]]=function(e){var body=window[_0x5d8e[23]][_0x5d8e[11]],html=window[_0x5d8e[23]][_0x5d8e[24]];var delkaStranky=Math[_0x5d8e[28]](body[_0x5d8e[25]],body[_0x5d8e[26]],html[_0x5d8e[27]],html[_0x5d8e[25]],html[_0x5d8e[26]]);var velikostOkna=window[_0x5d8e[29]]||document[_0x5d8e[24]][_0x5d8e[27]]||document[_0x5d8e[11]][_0x5d8e[27]];var pozice=(window[_0x5d8e[23]][_0x5d8e[30]]||window[_0x5d8e[31]])+velikostOkna;if(pozice>0){var procenta=(pozice/delkaStranky)*100};if((flag20)&&(procenta>20)){sentEventToGA(_0x5d8e[15],_0x5d8e[32],_0x5d8e[33]);flag20=false};if((flag40)&&(procenta>40)){sentEventToGA(_0x5d8e[15],_0x5d8e[32],_0x5d8e[34]);flag40=false};if((flag60)&&(procenta>60)){sentEventToGA(_0x5d8e[15],_0x5d8e[32],_0x5d8e[35]);flag60=false};if((flag80)&&(procenta>80)){sentEventToGA(_0x5d8e[15],_0x5d8e[32],_0x5d8e[36]);flag80=false};if((flag100)&&(procenta>99)){sentEventToGA(_0x5d8e[15],_0x5d8e[32],_0x5d8e[37]);flag100=false}}}}catch(err){};try{if(socialTracking){var mpath=document[_0x5d8e[39]][_0x5d8e[38]];function extractParamFromUri(uri,paramName){if(!uri){return};var regex= new RegExp(_0x5d8e[40]+paramName+_0x5d8e[41]);var params=regex[_0x5d8e[42]](uri);if(params!=null){return unescape(params[1])};return}FB[_0x5d8e[47]][_0x5d8e[46]](_0x5d8e[43],function(targetUrl){sentSocialToGA(_0x5d8e[44],_0x5d8e[45],mpath)});FB[_0x5d8e[47]][_0x5d8e[46]](_0x5d8e[48],function(targetUrl){sentSocialToGA(_0x5d8e[44],_0x5d8e[49],mpath)});FB[_0x5d8e[47]][_0x5d8e[46]](_0x5d8e[50],function(targetUrl){sentSocialToGA(_0x5d8e[44],_0x5d8e[51],mpath)});function trackTwitter(intent_event){if(intent_event){var opt_pagePath;if(intent_event[_0x5d8e[20]]&&intent_event[_0x5d8e[20]][_0x5d8e[52]]==_0x5d8e[53]){opt_target=extractParamFromUri(intent_event[_0x5d8e[20]][_0x5d8e[54]],_0x5d8e[55])};sentEventToGA(_0x5d8e[56],_0x5d8e[51],mpath)}}twttr[_0x5d8e[60]](function(twttr){twttr[_0x5d8e[59]][_0x5d8e[58]](_0x5d8e[57],trackTwitter)})}}catch(err){};try{if(timeSpent){window[_0x5d8e[63]](function(){sentEventToGA(_0x5d8e[15],_0x5d8e[61],_0x5d8e[62])},15000);window[_0x5d8e[63]](function(){sentEventToGA(_0x5d8e[15],_0x5d8e[61],_0x5d8e[64])},30000);window[_0x5d8e[63]](function(){sentEventToGA(_0x5d8e[15],_0x5d8e[61],_0x5d8e[65])},45000);window[_0x5d8e[63]](function(){sentEventToGA(_0x5d8e[15],_0x5d8e[61],_0x5d8e[66])},60000);window[_0x5d8e[63]](function(){sentEventToGA(_0x5d8e[15],_0x5d8e[61],_0x5d8e[67])},75000);window[_0x5d8e[63]](function(){sentEventToGA(_0x5d8e[15],_0x5d8e[61],_0x5d8e[68])},90000);window[_0x5d8e[63]](function(){sentEventToGA(_0x5d8e[15],_0x5d8e[61],_0x5d8e[69])},105000);window[_0x5d8e[63]](function(){sentEventToGA(_0x5d8e[15],_0x5d8e[61],_0x5d8e[70])},120000)}}catch(err){};try{var tLen=document[_0x5d8e[12]](_0x5d8e[11])[0][_0x5d8e[19]][_0x5d8e[18]]()[_0x5d8e[73]](/ /g,_0x5d8e[72])[_0x5d8e[73]](/(?:\r\n|\r|\n)/g,_0x5d8e[72])[_0x5d8e[71]];tLen=Math[_0x5d8e[74]](tLen/100)*100;var imgLen=document[_0x5d8e[12]](_0x5d8e[75])[_0x5d8e[71]];if(textLength){sentEventToGA(_0x5d8e[15],_0x5d8e[76],tLen)};if(imageCount){sentEventToGA(_0x5d8e[15],_0x5d8e[77],imgLen)}}catch(err){}}}catch(err){}})()
</script>

Yes, it is possible to use this script (in header.php or as a custom HTML tag in Tag Manager), but I want to use standard funcionality of Google Tag Manager. Simply because I never trust to these “big” scripts.

So I started to think about how to do that. I have read a lot of content about Tag Manager from Simo Ahava blog and lot from others. Then I decided to go with simple, but for me the best solution. I do not have big Analytics skills and I do not need really big and complicated metrics.

So I have prepared this tracking events in Tag Manager:

Advanced Tracking 2.0

  1. Tracking of File Downloads
  2. Tracking clicks on E-mail link
  3. Tracking clicks on Phone link
  4. Tracking clicks on Picture detail (designed fro Gutenberg Image Block)
  5. Tracking clicks on Gallery detail (designed fro Gutenberg Gallery Block)
  6. Tracking clicks on External link
  7. Tracking clicks on Internal link
  8. Tracking Scroll Depth
  9. Tracking Time Spent on website
  10. Tracking Copied text

I know that it can propably be made better. Following setup is very good for better understanding what people look for and what they do on my websites. I will be happy if it be useful for you too. If you have any suggestions share it it the comments below please :-).

Be careful, this events will change the bounce rate on your website. Do not panic!

Tracking File Download with Tag Manager

You need to decide which file extensions you want to track as a file download.

I am fine with these: .pdf .xlsx .docx .csv .zip .rar .7zip .xls .doc

Lets start with preparing Event in Google Tag Manager. For Tracking Downloads you will need to setup one Tag and one Trigger and one custom Variable.

Tracking Title of downloaded file with custom variable

I want to see which file has been downloaded. When I create the content I add the Title attribute to the links so I need to take those titles to the game.

  1. Open Google Tag Manager > Variables > Under User-Defined Variables Click on New
  2. Choose variable type Auto-Event Variable
  3. Variable Type = Element Attribute
  4. Attribute Name = title
  5. Save, Name of your Variable = Attribute Title
Atrribute Title - Auto-event variable Google Tag Manager
Atrribute Title – Auto-event variable Google Tag Manager

File Is Downloaded Trigger

  1. Open Google Tag Manager > Triggers > Click on New
  2. Trigger Type = Click – Just Links
  3. Trigger fires on = Some Link Clicks
  4. Fire this trigger when an Event occurs and all of these conditions are true: Click URL Matches RegEx \.(pdf|xlsx|docx|csv|zip|rar|7zip|xls|doc)$
  5. Save, Name of your Trigger = Link – File
Trigger for file download in Tag Manager
Trigger for file download in Tag Manager

File Downloads Tracking Event

  1. Open Google Tag Manager > Tags > Click on New
  2. Set Tag Type to Universal Analytics
  3. Set Track Type to Event
  4. Fill the Event Tracking Parameters
    1. Category = Advanced Tracking 2.0
    2. Action = Download file
    3. Label = {{Attribute Title}}
    4. (optional) Value = {{Page Path}}
  5. Triggering – Select the pre-created trigger Link – File
  6. Save, Name your Tag = EVENT – Download Link
Advanced Analytics Tracking 2.0 Tag Manager Event File Download
Advanced Analytics Tracking 2.0 Tag Manager Event File Download

Tracking click on E-mail link With Tag Manager

This Event tracks every click on link which use the mailto: value. For example:

<a href="mailto:[email protected]" title="Send e-mail to Aleš Sýkora">[email protected]</a>

Lets create the Trigger and Tag. As a variable, I will use the Attribute Title again.

user click on mail link Trigger

  1. Open Google Tag Manager > Triggers > Click on New
  2. Trigger Type = Click – Just Links
  3. Trigger fires on = Some Link Clicks
  4. Fire this trigger when an Event occurs and all of these conditions are true: Click URL Contains mailto:
  5. Save, Name of your Trigger = Link – Mail
Trigger for mail link click in Tag Manager
Trigger for mail link click in Tag Manager

E-Mail link click Tracking Event

  1. Open Google Tag Manager > Tags > Click on New
  2. Set Tag Type to Universal Analytics
  3. Set Track Type to Event
  4. Fill the Event Tracking Parameters
    1. Category = Advanced Tracking 2.0
    2. Action = E-mail link click
    3. Label = {{Attribute Title}}
    4. (optional) Value = {{Page Path}}
  5. Triggering – Select the pre-created trigger Link – Mail
  6. Save, Name your Tag = EVENT – E-Mail Link
Advanced Analytics Tracking 2.0 Tag Manager Event E-mail link click
Advanced Analytics Tracking 2.0 Tag Manager Event E-mail link click

Tracking Click On Phone Link With Tag Manager

This Event tracks every click on link which use the tel: value. For example:

<a href="tel:00420 604 973 176" title="Aleš Sýkora Phone Contact">00420 604 973 176</a>

Lets create the Trigger and Tag. As a variable, I will use the Attribute Title again.

user click on Phone link Trigger

  1. Open Google Tag Manager > Triggers > Click on New
  2. Trigger Type = Click – Just Links
  3. Trigger fires on = Some Link Clicks
  4. Fire this trigger when an Event occurs and all of these conditions are true: Click URL Contains tel:
  5. Save, Name of your Trigger = Link – Phone
Phone URL trigger setting in Google Tag Manager
Phone URL trigger setting in Google Tag Manager

Phone link click Tracking Event

  1. Open Google Tag Manager > Tags > Click on New
  2. Set Tag Type to Universal Analytics
  3. Set Track Type to Event
  4. Fill the Event Tracking Parameters
    1. Category = Advanced Tracking 2.0
    2. Action = Phone link click
    3. Label = {{Attribute Title}}
    4. (optional) Value = {{Page Path}}
  5. Triggering – Select the pre-created trigger Link – Phone
  6. Save, Name your Tag = EVENT – Phone Link
Phone link click tracking event tag in Google Tag Manager
Phone link click tracking event tag in Google Tag Manager

Tracking Click On Image in Gutenberg Image Block With Tag Manager

Next thing I want to track are screenshots. What if big amount of people open image detail? They really want to know more about! I recently switched my content to the Gutenberg and make images clickable so they appear in lightbox (Image > Link to > Media File + Simple Lightbox plugin). How to track them? Lets see. And again l will use the Attribute Title variable. We will also create new variable for Attribute Alt.

Tracking Alt Attribute of clicked image

  1. Open Google Tag Manager > Variables > Under User-Defined Variables Click on New
  2. Choose variable type Auto-Event Variable
  3. Variable Type = Element Attribute
  4. Attribute Name = alt
  5. Save, Name of your Variable = Attribute Alt
Attribute Alt Data Layer Variable in Google Tag Manager
Attribute Alt Data Layer Variable in Google Tag Manager

open Image in lightbox Trigger

  1. Open Google Tag Manager > Triggers > Click on New
  2. Trigger Type = Click – All Elements
  3. Trigger fires on = Some Clicks
  4. Fire this trigger when an Event occurs and all of these conditions are true: Click element matches CSS selector figure.wp-block-image a img
  5. Save, Name of your Trigger = Click – Image
Image Click trigger in Google Tag Manager
Image Click trigger in Google Tag Manager

Gutenberg Image click tracking Event

  1. Open Google Tag Manager > Tags > Click on New
  2. Set Tag Type to Universal Analytics
  3. Set Track Type to Event
  4. Fill the Event Tracking Parameters
    1. Category = Advanced Tracking 2.0
    2. Action = Picture Detail
    3. Label = Title = {{Attribute Title}}
    4. Value = Alt = {{Attribute Alt}}
  5. Triggering – Select the pre-created trigger Click – Image
  6. Save, Name your Tag = EVENT – Picture Detail
Image Detail Event settings Tag in Google Tag Manager
Image Detail Event settings Tag in Google Tag Manager

Image and gallery means different things for me. So I prepared the tutorial to respect this. Because Picture is one big picture, but gallery are especially two or more pictures. I want to track click on gallery independently.

open Gallery Image Trigger

  1. Open Google Tag Manager > Triggers > Click on New
  2. Trigger Type = Click – All Elements
  3. Trigger fires on = Some Clicks
  4. Fire this trigger when an Event occurs and all of these conditions are true: Click element matches CSS selector li.blocks-gallery-item figure a img
  5. Save, Name of your Trigger = Click – Gallery Image
Gutenberg Gallery click Trigger Tag Manager
Gutenberg Gallery click Trigger Tag Manager

Gutenberg Gallery Image click Tracking Event

  1. Open Google Tag Manager > Tags > Click on New
  2. Set Tag Type to Universal Analytics
  3. Set Track Type to Event
  4. Fill the Event Tracking Parameters
    1. Category = Advanced Tracking 2.0
    2. Action = Gallery Detail
    3. Label = Title = {{Attribute Title}}
    4. Value = Alt = {{Attribute Alt}}
  5. Triggering – Select the pre-created trigger Click – Image
  6. Save, Name your Tag = EVENT – Gallery Detail
Gallery Detail Event Tag in Google Tag Manager
Gallery Detail Event Tag in Google Tag Manager

It would be nice to know which external links are popular among website visiters.

External Link Click Trigger

  1. Open Google Tag Manager > Triggers > Click on New
  2. Trigger Type = Click – Just Links
  3. Trigger fires on = Some Links Clicks
  4. Fire this trigger when an Event occurs and all of these conditions are true:
    1. Click URL does not match RegEx .*toolset\.wiki.+ (change toolset with your domain name, wiki with domain extension .com etc.)
    2. Click URL does not contain mailto: (we already use other tag for tracking mailto: links)
    3. Click URL does not contain tel: (we already use other tag for tracking tel: links)
  5. Save, Name of your Trigger = Link – External

External Link Click Tracking Event

  1. Open Google Tag Manager > Tags > Click on New
  2. Set Tag Type to Universal Analytics
  3. Set Track Type to Event
  4. Fill the Event Tracking Parameters
    1. Category = Advanced Tracking 2.0
    2. Action = External Link
    3. Label = {{Attribute Title}}
    4. Value = {{Click URL}} (built in variable)
  5. Non-interaction hit = True (This event will not change your bounce rate, because it will not be counted as an interaction on your site. This makes sense for outbound links, but for many other events you may want to count the event as an interaction.)
  6. Triggering – Select the pre-created trigger Link – External
  7. Save, Name your Tag = EVENT – External Link
External Link Click tracking Tag in GTM
External Link Click tracking Tag in GTM

Internal Link Click Trigger

  1. Open Google Tag Manager > Triggers > Click on New
  2. Trigger Type = Click – Just Links
  3. Trigger fires on = Some Links Clicks
  4. Fire this trigger when an Event occurs and all of these conditions are true:
    1. Click URL matches RegEx .*toolset\.wiki.+ (change toolset with your domain name, wiki with domain extension .com etc.)
    2. Click URL does not match CSS selector figure.wp-block-image a (we already use other tag for tracking clicks on images)
    3. Click URL does not match CSS selector li.blocks-gallery-item-figure a (we already use other tag for tracking on gallery images)
    4. Click URL does not contain mailto: (we already use other tag for tracking mailto: links)
    5. Click URL does not contain tel: (we already use other tag for tracking tel: links)
    6. UPDATE! add also this: Click URL does not match RegEx .(pdf|xlsx|docx|csv|zip|rar|7zip|xls|doc)$
  5. Save, Name of your Trigger = Link – Internal
Internal Link Trigger in Google Tag Manager
Internal Link Trigger in Google Tag Manager

Internal Link Click Tracking Event

  1. Open Google Tag Manager > Tags > Click on New
  2. Set Tag Type to Universal Analytics
  3. Set Track Type to Event
  4. Fill the Event Tracking Parameters
    1. Category = Advanced Tracking 2.0
    2. Action = Internal Link
    3. Label = {{Attribute Title}}
    4. Value = {{Click URL}} (built in variable)
  5. Triggering – Select the pre-created trigger Link – Internal
  6. Save, Name your Tag = EVENT – Internal Link
Internal Link Click tracking Tag in GTM
Internal Link Click tracking Tag in GTM

Tracking Scroll on page With Tag Manager

Do you know how much your visitors read the content? You want to show banner in footer but is it a good idea? Check the scroll level with Tag Manager.

Activate Scroll Variables Built in Tag Manager

  1. Open Google Tag Manager > Variables > Under Built-In Variables Click on Configure
  2. Under Scrolling section Check:
    1. Scroll Depth Threshold
    2. Scroll Depth Units
    3. Scroll Direction
Scrolling variables Google Tag Manager
Scrolling variables Google Tag Manager

Scroll Depth Trigger

  1. Open Google Tag Manager > Triggers > Click on New
  2. Trigger Type = Scroll Depth
  3. Check Vertical Scroll Depths
  4. Percentages = 20, 40, 60, 80, 100 (you can use your own)
  5. Enable this trigger on: Window Load (gtm.load)
  6. This trigger fires on All Pages
  7. Save, Name of your Trigger = Scroll – 20, 40, 60, 80, 100
Scroll Depth Trigger settings in Google Tag Manager
Scroll Depth Trigger settings in Google Tag Manager

Scroll Depth Tracking Event

  1. Open Google Tag Manager > Tags > Click on New
  2. Set Tag Type to Universal Analytics
  3. Set Track Type to Event
  4. Fill the Event Tracking Parameters
    1. Category = Advanced Tracking 2.0
    2. Action = Scroll Depth
    3. Label = {{Scroll Depth Threshold}}
  5. Triggering – Select the pre-created trigger Scroll – 20, 40, 60, 80, 100
  6. Save, Name your Tag = EVENT – Scroll
Scroll Depth Tracking Event Tag in Tag Manager
Scroll Depth Tracking Event Tag in Tag Manager

Tracking Time Spent on website

This event tracks the whole time user spent on your website. It is up to you if you want track the whole time or only several times the interval 15s (or your own interval).

Time spent Custom Variables In Tag Manager

timer Event Label

This variable is made for formatting the Event label in Analytics.

  1. Open Google Tag Manager > Variables > Under User-Defined Variables Click on New
  2. Choose variable type Custom JavaScript and add JavaScript code from below
  3. Save, Name of your Variable = timerEventLabel
function() {
  var elapsed = {{timerEventNumber}} * {{timerInterval}} / 1000;
  var min = Math.floor(elapsed/60);
  var sec = elapsed % 60;
  return min + 'm ' + sec + 's';
}
Timer Event Label Variable in Google Tag Manager
Timer Event Label Variable in Google Tag Manager
Timer Event Number

This variable is made for calculating the final time.

  1. Open Google Tag Manager > Variables > Under User-Defined Variables Click on New
  2. Choose variable type Data Layer Variable
  3. Data Layer Variable Name = gtm.timerEventNumber
  4. Data Layer Version = Version 2
  5. Save, Name of your Variable = timerEventNumber
Timer Event Number Variable in Google Tag Manager
Timer Event Number Variable in Google Tag Manager
Timer Interval

This variable save the interval for calculations of final time.

  1. Open Google Tag Manager > Variables > Under User-Defined Variables Click on New
  2. Choose variable type Data Layer Variable
  3. Data Layer Variable Name = gtm.timerInterval
  4. Data Layer Version = Version 2
  5. Save, Name of your Variable = timerInterval
Timer Interval Variable in Google Tag Manager
Timer Interval Variable in Google Tag Manager

Timer Trigger

  1. Open Google Tag Manager > Triggers > Click on New
  2. Trigger Type = Timer
  3. Event name = gtm.timer
  4. Interval = 15000 (15s)
  5. Limit = blank (you can limit the timer events here. For example 1 = display only 15s; 5 = display maximum 1 minute 15s)
  6. Enable this trigger when all of these conditions are true Page URL matches RegEx .*
  7. This trigger fires on All Timers
  8. Save, Name of your Trigger = Timer – 15s
Timer Trigger Configuration in Tag Manager
Timer Trigger Configuration in Tag Manager

Time on Website Tracking Event

  1. Open Google Tag Manager > Tags > Click on New
  2. Set Tag Type to Universal Analytics
  3. Set Track Type to Event
  4. Fill the Event Tracking Parameters
    1. Category = Advanced Tracking 2.0
    2. Action = Time Spent
    3. Label = {{timerEventLabel}}
  5. Triggering – Select the pre-created trigger Timer – 15s
  6. Save, Name your Tag = EVENT – Time Spent
Time spent Tracking Event Tag in Tag Manager
Time spent Tracking Event Tag in Tag Manager

Tracking Clipboard text (ctrl+C) event in Tag Manager

This event is very cool for me. I can easy decide what visitors are looking for and I can also check if someone try to steal my texts.

Copy text custom Variable In Tag Manager

  1. Open Google Tag Manager > Variables > Under User-Defined Variables Click on New
  2. Choose variable type Data Layer Variable
  3. Data Layer Variable Name = clipboardText
  4. Data Layer Version = Version 2
  5. Save, Name of your Variable = Copytext-variable
Clipboard text variable - Google Tag Manager
Clipboard text variable – Google Tag Manager

Clipboard text Trigger Tag Manager

  1. Open Google Tag Manager > Triggers > Click on New
  2. Trigger Type = Custom Event
  3. Event name = textCopied
  4. This trigger fires on All Custom Events
  5. Save, Name of your Trigger = Copytext
Clipboard event trigger Tag Manager
Clipboard event trigger Tag Manager

Custom Copytext Listener

  1. Open Google Tag Manager > Tags > Click on New
  2. Set Tag Type to Custom HTML and fill in the code from below
  3. TriggeringAll Pages (you can use your own trigger if you want)
  4. Save, Name your Tag = Custom Copytext Listener
<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>
Custom Listener for clipboard in Tag Manager by Google
Custom Listener for clipboard in Tag Manager by Google

Text copied Event for Google Analytics in Tag Manager

  1. Open Google Tag Manager > Tags > Click on New
  2. Set Tag Type to Universal Analytics
  3. Set Track Type to Event
  4. Fill the Event Tracking Parameters
    1. Category = Advanced Tracking 2.0
    2. Action = Text Copied
    3. Label = {{Copytext-variable}}
  5. Triggering – Select the pre-created Custom Event – Copytext
  6. Save, Name your Tag = EVENT – Text Copied
Copy Text Analytics Event with Tag Manager
Copy Text Analytics Event with Tag Manager

Thats all for now. Do not forget to publish your GTM container and wait for events in Google Analytics. I will continue with adding some event tracking snippets if I would need one :). Hope it helps! It should look like this.

Analytics Advanced Tracking 2.0
Analytics Advanced Tracking 2.0

Support Us via our Affiliate link!

Toolset logo WordPress

What to do next?

Need a Toolset License?

Buy via affiliate link!

Looking for a tutorial?


Help other users – Add your snippet!


Join the discussion!