You are here

santianoTimeOnPage

description

TimeOnPage by santiano.io automatically executes events based on the effective time spent by users on your webpages.

It will execute a santianoEvent on the following :

  • When the the page loads
  • after 15 seconds
  • after 30 seconds
  • after 45 seconds
  • after 1 minute
  • after 2 minutes
  • after 3 minutes
  • after 4 minutes
  • and a final event for more than 5 minutes spent on the page.

setup

Please refer to the container setup instructions

gtm tags

santianoEvent - Time Counter

santianoEvent - Time Counter
Tag Type : Custom HTML
This tag sends a santianoEvent to the desired vendor with the time spent on the page

  <script>
dataLayer.push({'event': 'santianoEvent',
                 'eventCommand': 'timeOnPages',
                 'eventCategory': 'Time spent on Pages', 
                 'eventAction': {{timerDynamicElapsedTime}},
                 'eventLabel': {{pageUrl}},
                });
</script>
close

gtm triggers

GTM Timer 15 sec

GTM Timer 15 sec
Trigger Type : Timer
Executing 3 times every 15 seconds (handles the 15, 30 and 45 seconds mark)
Event Name : gtm.Timer Interval : 15000 (that's in milliseconds) Limit : 3 PageUrl Matches RegEx : (.*)

close
GTM Timer 60 sec

GTM Timer 60 sec
Trigger Type : Timer
this triggers handles the minute mark, (for 1, 2, 3, 4 and 5 minutes elapsed)
Event Name : gtm.timer Interval : 60000 (that's in milliseconds) Limit : 5 pageUrl matches RegEx (.*)

close

gtm variables

pageUrl

pageUrl
Variable Type : URL
Provides the URL of the page being loaded

  Component Type : Full URL
close
timerDynamicElapsedTime

timerDynamicElapsedTime
Variable Type : Custom Javascript
A custom JS function that returns the elapsed time on the page. gtm and its default elapsed time is not as precise as we we would have hoped, not swiss made it seems, so I had to give a 2 second window for the event to properly execute.

  function() {
    var timerElapsedTime = {{timerElapsedTime}};
    if (timerElapsedTime == undefined) {
    	return 'a) Page Loading';
    } else {
        // we have a working clock here
        var timerElapsedTimeInSeconds = Math.floor(timerElapsedTime/1000)
        // three cases by time segments as tests show that Google is not as precise to send the timer trigger :-/
		switch(timerElapsedTimeInSeconds) { 
        	case 14:
            case 15:
            case 16:
        		return 'b) 15 seconds'
        		break;
            case 29:
			case 30:
			case 31:
                return 'c) 30 seconds'
                break;
			case 44:
			case 45:
			case 46:
                return 'd) 45 seconds'
                break;
            case 59:
            case 60:
			case 61:
                return 'e) 1 minute'
                break;
            case 119:
            case 120:
            case 121:
                return 'f) 2 minutes'
                break;
            case 179:
            case 180:
			case 181:
                return 'g) 3 minutes'
                break;
            case 239:
            case 240:
            case 241:
                return 'h) 4 minutes'
                break;
            case 299:
            case 300:
            case 301: // haha like in SEO
                return 'i) more than 5 minutes'
                break;
            default:
                return undefined
        }
    }
}
close
timerElapsedTime

timerElapsedTime
Variable Type : Data Layer Variable
The default elapsed time by GTM

  Variable Type : dataLayer Variable
Variable Name : gtm.timerElapsedTime
Data Layer Version : Version 2

close

Download