Time spent on-page is a really important metric to track when it comes to optimization of your ads on Facebook. But tracking time spent on the page using Facebook pixels is a little challenge. But in this post, we are going to tell, how you can track time spent on a page using Google Tag Manager & Facebook pixel.

By tracking time spent, you can create custom conversions with it and can optimize your ads for the highest amount of time spent users.

It's really simple. Just read our post till the end & follow the steps explained by us below:

Step 1: First of all, you need to create a custom HTML tag in your Google tag manager. Just copy the code below and paste it & name the tag as "Facebook - Time Spent on Page"

<script>
  
 (function(){
  // Initialize time 
  var startTime = new Date().getTime();
  var totalTime = {};
  if (typeof prefix() !== 'undefined') {
  var prevTime = 0;
  var visibilityEvent = prefix() + 'visibilitychange';
  var tabPath = 'visibleTab';
    
//Initialize the listeners
document.addEventListener(visibilityEvent,        
function(e){
  var isHidden=visibilityState(prefix())
  if (typeof isHidden !== 'undefined') {
  prevTime = 0 ? new Date().getTime() - startTime : new Date().getTime() - startTime - prevTime;  
  
    //Total Time for previous visibility state 
    if(isHidden) { totalTime.visibleTime=prevTime; tabPath+=">hiddenTab"} 
     else {totalTime.hiddenTime=prevTime; tabPath+=">visibleTab" } 
    }  
         //////Debugging Datalayer Event ///////// 
              dataLayer.push({
              'event' : 'visibilityChange',
              'visibleTime' : totalTime.visibleTime,
              'hiddenTime': totalTime.hiddenTime,
              'hidden' : isHidden,
              'tabPath': tabPath  
            });
         /////////////// 
}, false);
    
window.addEventListener('beforeunload', function(e)  
{
var isHidden=visibilityState(prefix())
 
if (typeof isHidden !== 'undefined') {
prevTime = 0 ? new Date().getTime() - startTime : new Date().getTime() - startTime - prevTime;  
if(!isHidden){totalTime.visibleTime=prevTime} 
else {totalTime.hiddenTime=prevTime} 
}  
 
if(tabPath.split('>').length > 3) {
var len = Math.floor(tabPath.split('>').length / 2);
var adtxt = ''
if(tabPath.split('>').length / 2 % 1 !== 0){adtxt+=' > visibleTab';}
tabPath = '(visibleTab > hiddenTab) x '+len+adtxt
}
  
dataLayer.push({
'event' : 'sendTimings',
'visibleTime' : totalTime.visibleTime,
'hiddenTime': totalTime.hiddenTime,
'hidden' : isHidden,
'tabPath': tabPath
}); 
  
  // reset the variables after sending data to analytics  
  prevTime=0;
  startTime = new Date().getTime();
  totalTime = {};
  tabPath = 'visibleTab';
}, false);
 
}
 })()
  
  function prefix() {
  var prefixes = ['moz', 'ms', 'o', 'webkit'];
  
    if ('hidden' in document) {
    return '';
  }
  
   // Loop through each prefix to see if it is supported. 
  for (var i = 0; i < prefixes.length; i++) {
    var testPrefix = prefixes[i] + 'Hidden';
    if (testPrefix in document) {
      return prefixes[i];
    }
  }
 
  return;
}
 
 function visibilityState(pref){
    switch (pref) {
    case '':
      return document['hidden'];
    case 'moz':
      return document['mozHidden'];
    case 'o':
      return document['oHidden'];
    case 'webkit':
      return document['webkitHidden'];
    default:
      return;
  }
}
    
  
</script>



Step 2: Trigger it on all pages.



Step 3: Now, you need to create 2 data layer variables with the name ‘hiddenTime’ and ‘visibleTime’.

  • visibleTime: