Donleeve
Allows you to perform an action when your website visitor is about to leave (exit intent). Even on mobile. Uses localStorage
to prevent the action from occurring too often.
Can be seen here.
Installation
npm install donleeve
or
git clone https://github.com/hdodov/donleeve
Dependencies
The first several seconds of a user's visit are crucial and it would be bad if you pissed him off with an exit intent modal that was triggered by a false positive. That's why the event listeners who watch the user's behavior are bound after a set delay.
However, your user might have opened your site in a new tab for later reading. In that case, the bind delay would be useless and would pass while the user was inactive.
That's why this library is used. It allows you to invoke a function after a set amount of active time. That is, time that passed while the user was viewing the page.
Blocking
For better user experience, there are two types of blocking that can prevent the exit intent action from happening even if the conditions are met.
Flag blocking
This is a short-term block. When the user sees the exit intent for the first time, the Donleeve.acted
flag is raised. If ignoreFlagBlocking
in the options is not enabled, the visitor won't be seeing any exit intents until he refreshes the page.
Storage blocking
This is a long-term block that utilizes localStorage
. It's an array of objects with two values inside:
- Regex string. Controls which pages a block affects. If the regex matched the current URL it will block the current page. If not, this block will be ignored. The default value is
*
and blocks all pages. - UNIX timestamp. Defines a point in the future until which this block is going to be active.
Example
If an exit intent is triggered on a page with storageBlockingRegex
set to \\?para\\=[0-9]
and storageBlockingMinutes
set to 10
, something like this would be created:
["\\?para\\=[0-9]", 1501680075442]
When Donleeve tries to emit the onAction
event, it would check all listed blocks that have their specified regex match the current URL. If a block matches it and its time is greater than Date.now()
, the action would be blocked. After 10 minutes have passed since the block's creation, the block will be obsolete.
API
Properties
Donleeve.options
Donleeve.enabled
Donleeve.acted
Methods
Donleeve.setOptions(options)
Donleeve.init(config, callback)
Donleeve.purgeBlocks(purge)
Events
Donleeve.onBound
Donleeve.onTrigger
Donleeve.onStorageBlock
Donleeve.onAction
Options
bindDelay
bindEventBlur
bindEventMouseLeave
bindEventMouseMove
storageBlockingRegex
storageBlockingMinutes
ignoreStorageBlocking
ignoreFlagBlocking
Usage
Start by including active-timeout.js and Donleeve in your page:
<script src="node_modules/active-timeout.js/dist/active-timeout.min.js"></script>
<script src="node_modules/donleeve/dist/donleeve.min.js"></script>
After that, initialize Donleeve:
Donleeve.init({
bindDelay: 2000
}, function (e) {
alert("STAY ON MY PAGE, PLEASE.");
});
Note: If you couldn't do your exit intent action for some reason, you can return false
in the callback function to make Donleeve act as if nothing happened and add no blocks.
Changelog
1.0.0 - Initial release.