The other day I had a client ask me if I could add a conversion event in GA4 that fires when a user’s session lasts longer than 2 minutes. “No problem!” I said, “I should have it done before the end of this call.” I had recently set up a ‘engaged_session_3_pageviews’ event, following Jude Onyejekwe’s detailed post on pages per session conversions on Analyticsmania.com. I used the simple, audience-trigger based approach, which as promised took little more than 30 seconds.
Oops. Turns out that there is no way to set up an audience trigger for session duration length.
After a bit of research and a few dead ends, I returned to Jude’s post and read it through in more detail. The JavaScript he provides makes a great framework for what I needed to do. I modified his Tag Manager Custom HTML tag to push a dataLayer event and created a custom event trigger to fire on the event. From there it was a simple matter of creating a GA4 event tag and flagging the event as a conversion in GA4.
Below is a video walkthrough of the process, and below that are detailed steps.
Step 1: create the custom HTML tag in Google Tag Manager
Below is the code that goes in the tag. The only thing you may need to change is the value of the sessionDurationThreshold variable. The current value of 120 means that the conversion event will fire if a user is on the site for 120 seconds. A few more things to know about the code:
- It keeps track of session length by setting a 1st-party cookie
- The cookie has a duration of 30 minutes – so if the event hasn’t fired after 30 minutes from the start of a session, it will reset the start time.
- Once the event has fired, the script sets a cookie to indicate that the threshold has been met. This prevents the script from sending multiple events for a given user.
<script>
/*
set the threshold for the session_duration_conv event here (in seconds)
if a session passes this threshold, a session_duration_conv event will
be pushed to the datalayer
*/
var sessionDurationThreshold = 120;
function gtm_getCookie(name) {
var cookies = decodeURIComponent(document.cookie);
var cookiesArray = cookies.split(';');
var cookie = cookiesArray.find(function (item) {
return name == item.trim().substring(0, name.length);
});
return cookie;
}
(function() {
var startCookie = gtm_getCookie("gtm_session_start");
var thresholdCookie = gtm_getCookie("gtm_session_threshold");
var d1 = new Date();
// The getTime() method returns the number of milliseconds from
//midnight of January 1, 1970 to the specified date
var now = d1.getTime();
// convert the threshold to milliseconds
var durationThreshold = sessionDurationThreshold*1000-1;
var cookieExpiry = new Date();
// Set expiry time of 30 mins (in milliseconds)
cookieExpiry.setTime(cookieExpiry.getTime() + 30 * 60 * 1000);
var expires = "expires=" + cookieExpiry.toUTCString();
// if no session start cookie exists, create it and be done
if (!startCookie) {
document.cookie = "gtm_session_start" + "=" + now + ";" + expires + ";path=/";
} else if (!thresholdCookie){
// get the start time - the slice removes the name of the cookie
var startTime = startCookie.trim().slice(18);
var elapsedTime = now - startTime;
if (elapsedTime > durationThreshold) {
window.dataLayer = window.dataLayer || [];
dataLayer.push({ 'event': 'session_duration_conv' });
// once the event has been sent, set a threshold cookie so we
// don't send it again
document.cookie = "gtm_session_threshold=true;" + expires + ";path=/";
}
}
})();
</script>
Below is the configuration of the tag in Tag Manager. In addition to the All Pages trigger, I added History Change and Scroll Depth triggers. The website I was setting it up for uses history changes rather than full page reloads quite a bit, hence the History Change trigger. I also thought adding a scroll depth trigger was a good idea, since a user might spend a while reading a single page, then leave. My scroll depth trigger fires on 25%, 50%, 75% and 100% vertical scrolls.
Step 2: add the Custom Event trigger to fire on the session_duration_conv dataLayer event
It should look like this.
Step 3: create the GA4 Event tag in Tag Manager
I kept things simple and just used the same event name all the way through. Fire the tag on the trigger you just created.
That’s it for Tag Manager and you’re nearly done! I always recommend testing changes in Tag Assistant before publishing. When you do, you should see the Custom HTML tag firing on page views and whatever other triggers you added. Then, after your duration threshold is met, you should see the GA4 event tag fire.
Step 4: flag the event as a conversion in GA4
If you’d like help with this or any other analytics projects or tasks, reach out! We also do training.
