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

Watch for the custom events to fire at defined time intervals

When loaded the script will fire custom events for users as they spend 3, 5, 10 minutes on the site (within an hour)

Let’s see if the event has surfaced in Meta:

You can now use this event in your custom audiences or custom conversions to enhance your targeting in Meta.

If you have set up this trigger in your GTM please share if it worked for you, or if you have any suggestions as to how this can be modified / improved, please comment below.

2 Responses

Gene says:

April 2, 2024 at 8:05 pm

Will the event fire only once or every 3,5, 10 minutes?

Reply
1. Anton Entin says:
  
  April 11, 2024 at 4:42 pm
  
  The event will fire only once at each threshold – 3 minutes, 5 minutes and 10 minutes. Ex: Once 3 min has fired it won’t fire again. There are settings in the script that check for fired events to prevent duplicate fires.
  
  So if you visit the site and spend 15 browsing through pages you will have 3 events total firing during the visit, marking the 3, 5 and 10 minute thresholds. You can use those events to trigger your tags.
  
  Reply