Bounceback.js

Lightweight, dependency free, exit intent / bounce detection

Bounceback provides a simple system that detects when a visitor is about to bounce from your site and fires an event. It works in a fashion similar to the commercial products available, except it's open source and doesn't cost $4,000/month.

Features

• Size: Bounceback is only 1.2 KB
• 100% test coverage
• Backwards compatible to IE6
• Complete mobile support
• No dependencies, shims or polyfills

Usage

<script src="bounceback.js"></script>

Bounceback.init([options])

Bounceback.init({
  onBounce: function() {
    // Your modal display or similar code goes here
  }
})

Options

maxDisplay

Default: 1

The maximum number of times the dialog may be shown on a page, or 0 for unlimited. Only applicable on desktop browsers.

distance

Default: 100

The minimum distance in pixels from the top of the page to consider triggering for.

method

Default: auto

The bounce detection method.

Options:

auto: Automatically picks a method based on the device type. mouse is used for desktop browsers and history for mobile.

mouse: This detects bounces based on the mouse's direction, velocity and distance from the top of the page.

history: This method uses the HTML5 History APIs (or hashes when in an older browser) to duplicate the page in the history. Then when the visitor clicks to go back Bounceback detects the navigation and shows the dialog. This method is almost foolproof, but could annoy some users. It works best for mobile browsers.

sensitivity

Default: 10

The minimum distance the mouse has to have moved in the last 10 mouse events for onBounce to be triggered.

cookieLife

Default: 365

The cookie (when localStorage isn't available) expiry age, in days.

scrollDelay

Default: 500

The amount of time in milliseconds that bounce events should be ignored for after scrolling, or 0 to disable.

This is necessary for the case when a user is scrolling and their mouse overshoots the page. As soon as scrolling stops a mouseout event is fired incorrectly triggering a bounce event.

Because of this Bounceback waits a small amount of time after the last scroll event before re-enabling bounce detection.

checkReferrer

Default: true

Whether or not to check the referring page to see if it's on the same domain and this isn't the first pageview.

aggressive

Default: false

This controls whether or not the bounce dialog should be shown on every page view or only on the user's first.

storeName

Default: bounceback-visited

The name/key to store the localStorage item (or cookie) under.

onBounce

Default: function() { return Bounceback; }

The handler to call when a bounce has been detected. This accepts no arguments since none are necessary.

Tests

To run the test suite, first install the dependencies, then run npm test:

$ npm install
$ npm test

While Bounceback has been tested in actual browsers the included tests create a stubbed environment that simulates modern, mobile, and older browsers for simplicity and speed.

License

MIT

If you end up using Bounceback, shoot me a message, I'd love to see it in the wild!