Jak zwrócić uwagę użytkownika za pomocą popupu

Poradniki

Z wykorzystaniem JavaScript

czw., 26.02.2015

Walka twórców witryn internetowych o uwagę użytkownika jest niczym walka adoratorów o względy jedynej urodziwej panny na wiejskiej dyskotece – potrafi być brutalna i nie uwzględniać opinii najbardziej zainteresowanej strony. W dzisiejszym artykule postaram się pokazać wam, jak za pomocą dość ordynarnego środka, jakim jest popup, zwrócić uwagę użytkownika i nie zniechęcić go do dalszego przeglądania strony.

Trochę starsi użytkownicy internetu mogą kojarzyć popupy z okienkami przeglądarki wyskakującymi po otwarciu strony, które zawierały reklamy. Producenci przeglądarek wydali skuteczną wojnę wszelkim okienkom, które pojawiały się bez udziału użytkownika, dlatego żadna nowoczesna strona już nawet nie próbuję otworzyć nowego okna. Teraz popupami nazywamy boksy pojawiające się nad zawartością strony, jako nakładka (overlay).

Tworzymy popup

Na potrzeby tego artykułu, stworzę prosty popup zawierający jedynie obrazek, ale możemy w nim umieścić praktycznie każdą zawartość, od zwykłego tekstu po formularze. Prócz obrazka, umieściłem przycisk zamykający popup oraz nakładkę, która zasłoni stronę. Kod HTML umieszczam zaraz przed zamykającym tagiem </body>:

<div id="window_overlay"></div>
<div id="window_entrance" class="window_content">
    <a href="#" class="window_close">&times;</a>
    <img src="image/entrance.jpg" alt="">
</div>

Teraz odrobina stylu. Domyślnie zarówno nakładka jak i popup są niewidoczne, dopiero dodanie klasy opened pokazuje te elementy. Oprócz tego dodałem efekty przejścia, aby pojawianie się było płynne.

#window_overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    z-index: 10000;
}

#window_overlay.opened {
    opacity: 1;
    -webkit-transition: opacity 100ms;
    transition: opacity 100ms;
    visibility: visible;
}

.window_content {
    position: fixed;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%) scale(0, 0);
    -webkit-transform: translate(-50%, -50%) scale(0, 0);
    transform: translate(-50%, -50%) scale(0, 0);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.75);
    visibility: hidden;
    z-index: 10001;
}

.window_content.opened {
    -webkit-transition: transform 300ms;
    transition: transform 300ms;
    -ms-transform: translate(-50%, -50%) scale(1, 1);
    -webkit-transform: translate(-50%, -50%) scale(1, 1);
    transform: translate(-50%, -50%) scale(1, 1);
    visibility: visible;
}

.window_content .window_close {
    width: 30px;
    height: 30px;
    margin: -10px -10px 0 0;
    border-radius: 50%;
    background-color: #ec3f22;
    font-family: Arial, sans-serif;
    color: #ffffff;
    position: absolute;
    right: 0;
    top: 0;
    text-align: center;
    line-height: 30px;
    font-size: 20px;
}

.window_content .window_close:hover {
    text-decoration: none;
    background-color: #ec6922;
}

.window_content img {
    display: block;
    width: 640px;
    height: 500px;
}

Pokazujemy popup na wejściu

Tak jak wcześniej pisałem, aby pokazać popup, wystarczy zarówno do nakładki jak i do samego elementu div z popupem dodać klasę opened.

$(function() {
    // uaktywanimy przycisk zamykający popup
    $('.window_content a.window_close').on('click', function(e) {
        e.preventDefault();
 
        $(this).parent().removeClass('opened');
        $('#window_overlay').removeClass('opened');
    });

    $('.window_content').addClass('opened');
    $('#window_overlay').addClass('opened');
});

Jak widać na listingu powyżej, kod jest bardzo prosty. Po tym, gdy upewnimy się, że cały dokument został załadowany, uaktywniamy przycisk ukrywający popup, który po prostu usuwa klasę opened. Następnie, dodajemy tę klasę do nakładki i popupa.

Demo

Jednak otwieranie okienka zaraz po wejściu na stronę będzie dla użytkownika niezwykle uciążliwe i może wywołać skutek odwrotny do zamierzonego. Należy więc tego unikać. Kiedy należy zatem pokazać popup odwiedzającemu?

Pokazujemy popup po określonym czasie

Jedną z metod jest wyświetlenie popupa po wcześniej ustalonym czasie. Pozwala to na uniknięcie sytuacji, w którym użytkownikowi okienko pojawia się za każdym razem, nawet, jeśli na stronę wszedł tylko na chwilę, by coś sprawdzić. Jak dobrać ten czas? Możemy za pomocą Google Analytics sprawdzić, jak długo średnio jeden użytkownik przegląda jedną podstronę na naszej witrynie. Jeśli na przykład, średni czas trwania sesji to 2 min. 19 sek. i średnio w ciągu sesji użytkownik odwiedza 2,3 strony, to można z tego wysnuć wniosek, że na jednej stronie spędza średnio 60 sekund. Oczywiście te wyliczenia są właściwe tylko, jeśli nie macie pojęcia, kiedy taki popup wyświetlić. Jeśli wasze doświadczenie na to pozwala, sami będziecie w stanie określić właściwy czas wyświetlenia okienka.

Aby opóźnić wyświetlenie, powyższy kod wymaga jedynie drobnej modyfikacji:

$(function() {
    // uaktywanimy przycisk zamykający popup
    $('.window_content a.window_close').on('click', function(e) {
        e.preventDefault();

        $(this).parent().removeClass('opened');
        $('#window_overlay').removeClass('opened');
    });

    window.setTimeout(function() {
        $('.window_content').addClass('opened');
        $('#window_overlay').addClass('opened');
    }, 3000);
});

Jedyne, co zrobiłem, to ustawiłem timeout tak, żeby dodanie klasy opened odbyło się po określonym czasie. Na potrzeby tego artykułu, abyście nie musieli czekać zbyt długo, ten czas określiłem na 3 sekundy. W funkcji czas podawany jest w milisekundach, a więc 3 sekundy to 3000 milisekund.

Demo

Pokazujemy popup po przewinięciu do określonego punktu na stronie

Inną metodą, jest pokazywanie popupu wtedy, kiedy użytkownik dotarł już do określonego miejsca na stronie, lub przewinął daną liczbę procent całej strony. Poniżej przykład, który wyświetli popup, gdy użytkownik przewinął równo połowę strony:

$(window).load(function() {
    // uaktywanimy przycisk zamykający popup
    $('.window_content a.window_close').on('click', function(e) {
        e.preventDefault();

        $(this).parent().removeClass('opened');
        $('#window_overlay').removeClass('opened');
    });

    var popupShown = false;

    $(window).on('scroll', function() {
        var scrollPercent = Math.round(($(window).scrollTop() + $(window).height()) * 100 / $(document).height());

        if (scrollPercent > 50 && !popupShown) {
            $('.window_content').addClass('opened');
            $('#window_overlay').addClass('opened');

            popupShown = true;
        }
    });
});

Ten kod wykonujemy dopiero, gdy cała strona, łącznie z obrazkami zostanie załadowana (stąd użycie $(window).load()), gdyż jest to niezbędne do obliczenia jej prawidłowej wysokości. Następnie przypisujemy do zdarzenia, gdy użytkownik przesuwa stronę w dół, funkcję, która liczy procent przewinięcia i jeśli jest on większy niż nasz zakładany procent oraz popup nie był wyświetlany wcześniej, wyświetlamy go.

Demo

Teraz kolej na podobne zachowanie, z tym, że zamiast przewijać do określonego procentu, przewiniemy do określonego miejsca. Niech będzie to drugi post:

$(window).load(function() {
    // uaktywanimy przycisk zamykający popup
    $('.window_content a.window_close').on('click', function(e) {
        e.preventDefault();

        $(this).parent().removeClass('opened');
        $('#window_overlay').removeClass('opened');
    });

    var popupShown = false;

    $(window).on('scroll', function() {
        var scrollElementPosition = $('.blog-post:eq(1)').offset().top;

        if ($(window).scrollTop() + $(window).height() > scrollElementPosition && !popupShown) {
            $('.window_content').addClass('opened');
            $('#window_overlay').addClass('opened');

            popupShown = true;
        }
    });
});

Tutaj, zamiast liczyć procent przewinięcia, sprawdzamy pozycję drugiego postu, a następnie sprawdzamy, czy użytkownik już do tej pozycji przewinął.

Demo

Pokazujemy popup, gdy użytkownik próbuje opuścić stronę

JavaScript nie oferuje możliwości przypisania zdarzenia, które pozwalałoby wykonać kod, gdy użytkownik, na przykład, zamyka kartę ze stroną. Możemy to jednak obejść i wyświetlić popup wtedy, kiedy użytkownik zbliży kursor myszy do górnej krawędzi strony. Oczywiście nie jest to metoda w 100% skuteczna, ale może ktoś zechce ją wykorzystać. Oto kod:

$(function() {
    // uaktywanimy przycisk zamykający popup
    $('.window_content a.window_close').on('click', function(e) {
        e.preventDefault();

    $(this).parent().removeClass('opened');
        $('#window_overlay').removeClass('opened');
    });

    var popupShown = false,
        previousY = 0;

    $(document).on('mousemove', function(e) {
        if ((e.pageY - $(document).scrollTop()) <= 20 && previousY > e.pageY && !popupShown) {
            $('.window_content').addClass('opened');
            $('#window_overlay').addClass('opened');

            popupShown = true;
        }

        previousY = e.pageY;
    });
});

W tym przypadku, przypisujemy zdarzenie do ruchu myszki. Sprawdzamy, czy jej pozycja jest w obrębie 20 pikseli od górnej krawędzi ekranu, dodatkowo też, sprawdzamy, czy myszka porusza się w górę, a nie w dół (żeby nie aktywować popupa na przykład, gdy użytkownik będzie poruszał się w dół z paska adresu).

Demo

Modyfikujemy wyświetlanie popupów za pomocą cookie

Wszystkim powyższym sposobom brakuje jednej dość ważnej funkcjonalności: mianowicie możliwości ograniczenia wyświetlenia danego okienka do na przykład jednego razu dziennie, albo tylko jednego razu. Możemy pokazać też popup dopiero za kolejnym wejściem na stronę. Zmodyfikujmy więc przykład z wyświetlaniem popupu po określonym czasie i ograniczmy wyświetlanie do zaledwie jednego dziennie. Będziemy potrzebowali do tego biblioteki do obsługi cookie z poziomu JavaScript. Ja użyję tej o nazwie Cookies autorstwa Scotta Hampera. Kod poniżej:

(function(g,f){"use strict";var h=function(e){if("object"!==typeof e.document)throw Error("Cookies.js requires a `window` with a `document` object");var b=function(a,d,c){return 1===arguments.length?b.get(a):b.set(a,d,c)};b._document=e.document;b._cacheKeyPrefix="cookey.";b._maxExpireDate=new Date("Fri, 31 Dec 9999 23:59:59 UTC");b.defaults={path:"/",secure:!1};b.get=function(a){b._cachedDocumentCookie!==b._document.cookie&&b._renewCache();return b._cache[b._cacheKeyPrefix+a]};b.set=function(a,d,c){c=b._getExtendedOptions(c); c.expires=b._getExpiresDate(d===f?-1:c.expires);b._document.cookie=b._generateCookieString(a,d,c);return b};b.expire=function(a,d){return b.set(a,f,d)};b._getExtendedOptions=function(a){return{path:a&&a.path||b.defaults.path,domain:a&&a.domain||b.defaults.domain,expires:a&&a.expires||b.defaults.expires,secure:a&&a.secure!==f?a.secure:b.defaults.secure}};b._isValidDate=function(a){return"[object Date]"===Object.prototype.toString.call(a)&&!isNaN(a.getTime())};b._getExpiresDate=function(a,d){d=d||new Date; "number"===typeof a?a=Infinity===a?b._maxExpireDate:new Date(d.getTime()+1E3*a):"string"===typeof a&&(a=new Date(a));if(a&&!b._isValidDate(a))throw Error("`expires` parameter cannot be converted to a valid Date instance");return a};b._generateCookieString=function(a,b,c){a=a.replace(/[^#$&+\^`|]/g,encodeURIComponent);a=a.replace(/\(/g,"%28").replace(/\)/g,"%29");b=(b+"").replace(/[^!#$&-+\--:<-\[\]-~]/g,encodeURIComponent);c=c||{};a=a+"="+b+(c.path?";path="+c.path:"");a+=c.domain?";domain="+c.domain: "";a+=c.expires?";expires="+c.expires.toUTCString():"";return a+=c.secure?";secure":""};b._getCacheFromString=function(a){var d={};a=a?a.split("; "):[];for(var c=0;c<a.length;c++){var e=b._getKeyValuePairFromCookieString(a[c]);d[b._cacheKeyPrefix+e.key]===f&&(d[b._cacheKeyPrefix+e.key]=e.value)}return d};b._getKeyValuePairFromCookieString=function(a){var b=a.indexOf("="),b=0>b?a.length:b;return{key:decodeURIComponent(a.substr(0,b)),value:decodeURIComponent(a.substr(b+1))}};b._renewCache=function(){b._cache= b._getCacheFromString(b._document.cookie);b._cachedDocumentCookie=b._document.cookie};b._areEnabled=function(){var a="1"===b.set("cookies.js",1).get("cookies.js");b.expire("cookies.js");return a};b.enabled=b._areEnabled();return b},e="object"===typeof g.document?h(g):h;"function"===typeof define&&define.amd?define(function(){return e}):"object"===typeof exports?("object"===typeof module&&"object"===typeof module.exports&&(exports=module.exports=e),exports.Cookies=e):g.Cookies=e})("undefined"===typeof window? this:window);

$(function() {
    // uaktywanimy przycisk zamykający popup
    $('.window_content a.window_close').on('click', function(e) {
        e.preventDefault();

        $(this).parent().removeClass('opened');
        $('#window_overlay').removeClass('opened');
    });

    if (typeof Cookies.get('window_was_shown') == 'undefined') {
        window.setTimeout(function() {
            $('.window_content').addClass('opened');
            $('#window_overlay').addClass('opened');

            Cookies.set('window_was_shown', 'true', {
                // expires: 86400
                expires: 10
            });
        }, 3000);
    }
});

Sprawdzamy czy ciastko o nazwie window_was_shown nie zostało wcześniej zarejestrowane. Jeśli nie zostało, pokazujemy popup i je rejestrujemy. W przykładzie ustawiłem czas wygasania na 10 sekund, abyście mogli zobaczyć zasadę działania. Zakomentowany kod zawiera liczbę sekund opowiadającą dobie.

Demo

Ostatnim przykładem w tym artykule będzie pokazanie popupu co trzecie wejście na stronę, również z wykorzystaniem ciastek. Kod, który to sprawia, wygląda następująco:

(function(g,f){"use strict";var h=function(e){if("object"!==typeof e.document)throw Error("Cookies.js requires a `window` with a `document` object");var b=function(a,d,c){return 1===arguments.length?b.get(a):b.set(a,d,c)};b._document=e.document;b._cacheKeyPrefix="cookey.";b._maxExpireDate=new Date("Fri, 31 Dec 9999 23:59:59 UTC");b.defaults={path:"/",secure:!1};b.get=function(a){b._cachedDocumentCookie!==b._document.cookie&&b._renewCache();return b._cache[b._cacheKeyPrefix+a]};b.set=function(a,d,c){c=b._getExtendedOptions(c); c.expires=b._getExpiresDate(d===f?-1:c.expires);b._document.cookie=b._generateCookieString(a,d,c);return b};b.expire=function(a,d){return b.set(a,f,d)};b._getExtendedOptions=function(a){return{path:a&&a.path||b.defaults.path,domain:a&&a.domain||b.defaults.domain,expires:a&&a.expires||b.defaults.expires,secure:a&&a.secure!==f?a.secure:b.defaults.secure}};b._isValidDate=function(a){return"[object Date]"===Object.prototype.toString.call(a)&&!isNaN(a.getTime())};b._getExpiresDate=function(a,d){d=d||new Date; "number"===typeof a?a=Infinity===a?b._maxExpireDate:new Date(d.getTime()+1E3*a):"string"===typeof a&&(a=new Date(a));if(a&&!b._isValidDate(a))throw Error("`expires` parameter cannot be converted to a valid Date instance");return a};b._generateCookieString=function(a,b,c){a=a.replace(/[^#$&+\^`|]/g,encodeURIComponent);a=a.replace(/\(/g,"%28").replace(/\)/g,"%29");b=(b+"").replace(/[^!#$&-+\--:<-\[\]-~]/g,encodeURIComponent);c=c||{};a=a+"="+b+(c.path?";path="+c.path:"");a+=c.domain?";domain="+c.domain: "";a+=c.expires?";expires="+c.expires.toUTCString():"";return a+=c.secure?";secure":""};b._getCacheFromString=function(a){var d={};a=a?a.split("; "):[];for(var c=0;c<a.length;c++){var e=b._getKeyValuePairFromCookieString(a[c]);d[b._cacheKeyPrefix+e.key]===f&&(d[b._cacheKeyPrefix+e.key]=e.value)}return d};b._getKeyValuePairFromCookieString=function(a){var b=a.indexOf("="),b=0>b?a.length:b;return{key:decodeURIComponent(a.substr(0,b)),value:decodeURIComponent(a.substr(b+1))}};b._renewCache=function(){b._cache= b._getCacheFromString(b._document.cookie);b._cachedDocumentCookie=b._document.cookie};b._areEnabled=function(){var a="1"===b.set("cookies.js",1).get("cookies.js");b.expire("cookies.js");return a};b.enabled=b._areEnabled();return b},e="object"===typeof g.document?h(g):h;"function"===typeof define&&define.amd?define(function(){return e}):"object"===typeof exports?("object"===typeof module&&"object"===typeof module.exports&&(exports=module.exports=e),exports.Cookies=e):g.Cookies=e})("undefined"===typeof window? this:window);

$(function() {
    // uaktywanimy przycisk zamykający popup
    $('.window_content a.window_close').on('click', function(e) {
        e.preventDefault();

        $(this).parent().removeClass('opened');
        $('#window_overlay').removeClass('opened');
    });

    var counter = Cookies.get('window_count');

    if (typeof counter == 'undefined') {
        counter = 1;
    }

    counter = parseInt(counter, 10);

    if (counter == 3) {
        window.setTimeout(function() {
            $('.window_content').addClass('opened');
            $('#window_overlay').addClass('opened');
        }, 3000);

        Cookies.expire('window_count');
    } else {
        Cookies.set('window_count', counter + 1);
    }
});

Napisaliśmy nic innego, jak licznik odwiedzin, który sprawdza, która to wizyta użytkownika i zwiększa liczbę o jeden. a przy trzeciej pokazuje popup i usuwa ciastko.

Demo

Podsumowanie

Mam nadzieję, że w tym artykule udało mi się umówić choć te najczęściej spotykane techniki pokazywania popupów. Pamiętajcie, aby używać ich rozsądnie, mając na uwadze użytkownika, który odwiedza waszą witrynę. Strona, która co chwilę pokazuje jakieś popupy jest bardzo trudna w odbiorze. Starajcie się przestrzegać trzech poniższych zasad:

Nie pokazuj użytkownikowi popupa zbyt wcześnie – pozwól użytkownikowi najpierw zapoznać się z treścią strony, w przeciwnym wypadku oderwiesz go od przeglądania i tylko zdenerwujesz.
Zawsze oferuj prosty sposób na zamknięcie popupa – nie ma chyba nic gorszego, niż użytkownik wychodzący ze strony, bo coś przysłoniło mu treść i nie może jej czytać, nie ma też jej jak odsłonić. Zawsze dobrym rozwiązaniem jest umieszczenie przycisku w prawym górnym rogu. Link drobnym drukiem wewnątrz okienka to nie jest dobry pomysł.
Miej dobry powód – popup skutecznie przyciąga uwagę, ale też odrywa od reszty treści na twojej witrynie. Używaj go tylko wtedy, kiedy jest to naprawdę niezbędne.

Powodzenia w tworzeniu własnych okienek i modyfikowaniu ich korzystając z powyższego artykułu!

Pobierz pliki źródłowe

cookie, entry popup, exit popup, javascript, overlay, popup, kodowanie

Hubert Tulibacki autor artykułu

Programista aplikacji internetowych z wieloletnim doświadczeniem. Tworzenie oprogramowania za pomocą języków PHP i JavaScript jest jednocześnie jego pracą i hobby. Gdy nie jest podłączony do sieci, co nie zdarza się zbyt często, podróżuje i fotografuje.

To może Cię zainteresować