Time on Site or Visit Duration Custom Trigger in GTM

Imagine you need to segment your users by their visit duration and break them down into groups like 3, 5, 10 minute visits. Such segmentation can help you enhance your marketing tactics, target your most engaged and interested users with custom messages and ads, remarket to them on social media and other places.

But how do you set this up? How do you create a trigger that fires an event or conversion tag based on the time users spend on your site? The standard Timer trigger in GTM may seem like a good option, but it will not work in this scenario. It tracks “time on page” and you need to track “time on site” with users who may and (most of the time) will be going through multiple pages when they visit.

The solution is a custom time tracker that loads on every page of your site and sets a time counter that keeps ticking across all pages that a visitor goes to during their visit.

At each defined time interval (Ex: 3, 5, 10 minutes) the tracker fires a custom event that you use as a trigger for your conversion tags.

Here is how such a time tracker may look like:

				
					<script src="https://cdn.jsdelivr.net/npm/js-cookie@2.2.0/src/js.cookie.js"></script>
<script>
  (function() {
    var totalTimeSpentKey = 'totalTimeSpent';
    var eventTriggeredKeyPrefix = 'eventTriggered_'; // Prefix for event triggered flags
    var timeThresholds = [3, 5, 10]; // minutes
    var cookieExpirationHours = 1 / 24; // 1 hour expiration

    // Initialize or update the total time spent based on the cookie
    var totalTimeSpent = parseInt(Cookies.get(totalTimeSpentKey) || '0', 10); // in seconds
    var updateTotalTimeSpent = function() {
      totalTimeSpent += 1; // Increment every second
      Cookies.set(totalTimeSpentKey, totalTimeSpent, { expires: cookieExpirationHours }); // Update total time spent in cookie
    };

    // Function to check thresholds and trigger events
    var checkAndTriggerEvents = function() {
      timeThresholds.forEach(function(threshold) {
        var thresholdInSeconds = threshold * 60;
        var eventTriggeredKey = eventTriggeredKeyPrefix + threshold;
        var eventTriggered = Cookies.get(eventTriggeredKey); // Check if event already triggered

        if (totalTimeSpent >= thresholdInSeconds && !eventTriggered) {
          window.dataLayer = window.dataLayer || [];
          window.dataLayer.push({
            'event': 'timeSpent_' + threshold + '_minutes'
          });
          Cookies.set(eventTriggeredKey, 'true', { expires: cookieExpirationHours }); // Set flag that event has been triggered
        }
      });
    };

    setInterval(updateTotalTimeSpent, 1000); // Update time spent every second
    setInterval(checkAndTriggerEvents, 1000); // Check thresholds every second
  })();
</script>

				
			

Steps to Set up “Time on Site” Tracking in GTM

The setup is pretty easy and it takes only 2 steps:

Step 1: Add the Time Tracker as a Custom HTML Tag in GTM 

  • Create a custom tag and copy/paste the above code into it
  • Set the trigger to fire on page view on “All Pages”
 

Step 2: Create your Event / Conversion Tags

  • Create a conversion/event tag for the target platform (GA4, Google Ads, Meta, TikTok, etc)
  • Use a custom event trigger

Step 1: Add the Time Tracker as a Custom HTML Tag in GTM

Create a custom tag and copy/paste the above code snippet 
 


Set the trigger to fire on page view on “All Pages”

Step 2: Create Your Event / Conversion Tag 

Example: Facebook Custom Event for 10 minute visit 
This event will fire for visitors whose visit duration is at least 10 minutes. We can then put them in an audience in FB to target/retarget. 

 

Create a Custom Event trigger for this tag 

Use a corresponding custom event fired by the Time Tracker tag (in this case timeSpent_10_minutes)

Click Save and it’s done! 

Testing in the Preview Mode In GTM

Once you set up these 2 tags you can start testing. Go to the Preview mode and visit your website. 

The Time Tracker tag should load on all pages on Container Loaded