Add a GA event and custom dimension for the Idle Detection API

[chrisblakley]

As described here: https://web.dev/idle-detection/

This currently requires ~~notification~~ a dedicated idle detection permission. ~~I think how Nebula should handle this is if we already have notification permission we can use this, but don't request notification permission specifically to use this.~~

The custom dimension should be a hit scope and be associated with any hits that happen during user idling.

Then send an event when the user becomes idle and when they become active again. Both should be non-interaction events.

Looks like this will be available as of Chrome 87.

[chrisblakley]

Use this to check if the API is supported:

if ('IdleDetector' in window){

}

[chrisblakley]

This API request a specific permission to use it (no longer tied to the notification permission), so unless we are going to use it for something else (like a kiosk, or mobile PWA) Nebula will not have a default functionality for it.

However, I would like to see if Nebula can listen for it without triggering it specifically (so if a child theme uses it, Nebula can tie into that to send data to GA).

[chrisblakley]

From Google's article with some of my own comments. I don't see a way for Nebula to detect the state change without knowing the variable name that the child theme would write...

// Make sure 'idle-detection' permission is granted.
const state = await IdleDetector.requestPermission();
if ( state !== 'granted' ){
	// Need to request permission first.
	return console.log('Idle detection permission not granted.');
}

try {
	const controller = new AbortController();
	const signal = controller.signal;
	const idleDetector = new IdleDetector();
	
	idleDetector.addEventListener('change', () => { //<-- This is the object that Nebula would need to listen to. Unfortunately we will not know the variable name...
		const userState = idleDetector.userState;
		const screenState = idleDetector.screenState;
		console.log(`Idle change: ${userState}, ${screenState}.`);
	});
	
	await idleDetector.start({
		threshold: 60000,
		signal,
	});
	
	console.log('IdleDetector is active.');
} catch (err){
	// Deal with initialization errors like permission denied, running outside of top-level frame, etc.
	console.error(err.name, err.message);
}

[chrisblakley]

Could we do this without triggering the permission and then if the permission is granted later would this automatically start working?

if ( 'IdleDetector' in window ){
	const idleDetector = new IdleDetector();
	idleDetector.addEventListener('change', function(){
		ga('send', 'event', 'Idle State Change', idleDetector.userState, idleDetector.screenState);
	});

	//This is the part that would likely error unless we have permission. We would not know when to re-kick this if permission is granted later...
	await idleDetector.start({
		threshold: 60_000,
		controller.signal,
	});
}

[chrisblakley]

Not yet supported in Safari or Firefox: https://caniuse.com/mdn-api_idledetector

Note: Still contingent on the permission issue. Most likely this issue/feature will be closed without implementation.

[chrisblakley]

GA4 includes the engagement time metric which only increments when the page is focused. I don't think using the IdleDetection API is worth pursuing only for analytics purposes– especially since it requires a user consent prompt, so I'm closing this issue as won't fix.