I get it. You want those mailing list sign-ups.

When building a business, acquiring (and keeping) an audience is important. And part of acquiring an audience is asking them to do things, such as signing up for a mailing list; this is known as the call-to-action. The problem that's unfortunately still prevalent today, is executing the call-to-action way too early. Before the guest has had a chance to experience what you have to offer. Some sites was wised up, but only mildly so, by withholding the call-to-action for a moment. An improvement on this model is the on-exit modal, which displays the call-to-action pop-up when the guests' mouse cursor moves away from the page. Ouibounce is an example of a product which does this quite well.

Note: Ouibounce is in-effective on mobile devices.

However, if your guest quickly realizes your site is not what he's looking for, the on-exit pop-up intrudes. Without having received any value, why should the guest sign up to your mailing list? Maybe it's just a reflection of my reserved nature, but I dislike having people and/or their outspoken pop-ups in my face. And I return the favor by speaking only when it's valuable to do so.

Since my website EmmanuelRosa.com features articles (like this one), I'm experimenting with the idea of displaying my call-to-action only when the visitor has demonstrated interest in my work; by actually reading it. Now, don't get me wrong. My site doesn't have eyes (except for Google), nor is it even close to being omniscient. Instead, I judge an article as being read when a guest scrolls down far enough to display the end of the article.

Try it for yourself

Lets try something. If you're reading this in my newsletter, then click here to view this article in your web browser. I recommend using the incognito (private) mode of your web browser because it ensures the Ouibounce cookie won't exist. To clarify, while reading this in a web browser on a computer (PC or Mac), move your mouse cursor to the address bar of your web browser. Within a second... nothing should happen.

I know, I know, testing for a negative is bad science. But you'll know whether it really worked or not shortly.

The article read detector

Detecting when an article has been read begins with an HTML tag placed right after the article's content.

theme/layouts/post.html
1
2
3
4
5
6
7
8
9
10
11
12
13
---
layout: default
navbar: Blog
single: true
sharing: true
---

<article>
  ...
  ${include 'article.html', [content: content]}
  <div id="article-read-detector"></div>
  ...
</article>

You can simply add a <div> with the id article-read-detector right beneath the article content. By making this change to the post.html layout of my Grain-powered website, the article read detector renders on all of my articles. With the tag in place, you'd be ready to put the article read detector to work.

Its name may be deceiving since the <div> doesn't actually detect anything. The detecting is done by the jQuery Appear plugin. When applied to an HTML tag (technically, an HTML element) jQuery Appear generates appear and disappear events when the tag appears/disappears from the browser's view-port. With jQuery Appear and Ouibounce loaded, you can set up the article read detector; which goes something like this:

theme/includes/custom/ouibounce.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
...
var articleReadDetector = $('#article-read-detector');

articleReadDetector.appear();
articleReadDetector.on('appear', function(event, elements) {
    ouibounce(false,
        {
            delay: 500,
            sitewide: true,
            callback: function() { 
                $('#ouibounce-modal').modal('show');
            }
        });

    articleReadDetector.off('appear'); 
});
...

Note: I'm using the Ouibounce callback as a work-around for an issue which prevents Ouibounce from displaying Twitter Bootstrap modals.

First, jQuery Appear is applied to the article read detector <div>. Next, the appear event handler is set up. The handler first configures Ouibounce to display my call-to-action. Finally, the appear event handler is removed since it only needs to run once.

The moment of truth

If you can see the newsletter sign up form following this article, you've triggered my article read detector. Lets finish the exercise. Move the mouse cursor to the browser's navigation bar. Within a second... you'll see the call-to-action pop-up.

Call-to-action

My call-to-action may have changed in appearance by now.

With a call-to-action implemented this way, it displays only when it's most likely to be useful. Visitors who don't scroll to the end of the article are left alone; they may never be back anyway. Yet visitors who demonstrate an interest are given a gentle nudge. I think it's the respecful way to go.