This Clever Trick Brings Visitors Back When They Tab Away

By Jake Rocheleau. in Toolkit. Updated on December 8, 2017.

How many times do you open an article, skim a few sentences, then click away to browse another tab? I’m guilty of this on a daily basis. It’s not so easy to keep a visitor’s attention and that’s why the Don’t Go script can be so valuable.

By adding this script to your page, you can automatically update your site’s favicon and page title whenever the page isn’t currently being viewed.

You can see a live demo here and it’s a pretty simple one. Just open the page in your browser then move to another tab. Within a few seconds the page favicon changes, along with the title.

This all happens dynamically, using JavaScript, so everything changes back once the page is active again. As you can imagine this script is very simple to set up.

It requires three settings:

Title – the new page title
Favicon – the new favicon URL
Timeout – total delay (in seconds) after the user leaves before making the switch

Note the only required value is the title. You can leave the favicon the same and you can choose to skip the timeout altogether, so the title bar changes immediately.

Here’s a code sample of what the setup looks like.

dontGo({
	title: 'Alternative title text right here!',
	faviconSrc: 'path/to/Alternative/favicon.ico',
	timeout: 5000 //5 seconds
});

Setting up the Don’t Go script could not be easier. It’s available through npm, Bower, and Yarn, and it’s also hosted on the GitHub CDN, pulled straight from the main repo.

This fun script can be a great way to coax readers back onto your site and ultimately, decrease bounce rates. To learn more, just visit the main GitHub repo and skim through the documentation.