Jak sprawnie zwiększyć konwersję w e-commerce dzięki IntersectionObserver

Od pewnego czasu przy projektowaniu oraz wdrażaniu sklepów internetowych coraz większą uwagę przykładam do aspektu związanego ze zwiększeniem konwersji aniżeli do tego, aby strona była po prostu ładna. Jednym z podstawowych pytań, które sobie zadanie jest: „Jak zachować uwagę usera gdy zescrolluje on poza tzw.: above the fold?”.

Główny problem: Użytkownik traci z oczu cenę produktu oraz przycisk zakupu.

W przypadku sklepów internetowych każdy szczegół odgrywa istotną rolę. Przy dużym natężeniu ruchu i przy sporym budżecie 1% konwersji więcej może stanowić dosyć spory przychód dla klienta, więc nie możemy pozwolić na to, aby przycisk dodania do koszyka zniknął mu z oczu.

Jaki jest najlepszy sposób, aby to naprawić? Możemy dodać kolejny pasek (na górze bądź na dole strony), który będzie przyklejony i zawsze widoczny, powinien od zawierać przynajmniej przycisk CTA. Bardzo dobrze robi to Huel na swojej stronie pokazując na samej górze pasek, który po kliknięciu skupia uwagę na wyborze smaków (czyli tak naprawdę w kontekście e-commerce mówimy o wariancie produktu).

Można byłoby pomyśleć, że jedynym ograniczeniem jest kwestia sprawdzania, czy np.: cena produktu albo przycisk jest aktualnie widoczny na stronie. Czy sprawdzenie tego jest trudne? Tutaj z pomocą przychodzi nam IntersectionObserver.

IntersectionObserver co to takiego ?

Jest to API wbudowane w przeglądarce. Umożliwia ono sprawdzenie, czy dany element znajduje się na stronie oraz, czy jest on aktualnie widoczny na niej.

Weźmy na tapet stronę fajnestarocie.pl. Mamy widok produktu gdzie po prawej zauważymy cenę, tytuł oraz przycisk zakupu. Chcemy, aby te elementy były zawsze widoczne na stronie a zastosowanie position sticky nie wszędzie jest możliwe i też nie chce do tego używać gsapa, scrollTriggera i opcji pin.

Dlatego też stworzymy dodatkowy pasek z tymi danymi, który pokaże się w momencie gdy IntersectonObserver straci z oczu widok tych danych.

Czas na przygotowanie markupu dla paska

<!-- sticky bar -->
<div class="single-product-sticky-bar">
    <div class="single-product-sticky-bar__product-title">
        <h1><?php the_title(); ?></h1>
    </div>
    <div class="single-product-sticky-bar__content">
        <div class="single-product-sticky-bar__product-price">
            <p><?php echo get_post_meta(get_the_ID(), '_price', true); ?></p>
        </div>
        <div class="single-product-sticky-bar__product-add-to-cart">
            <button type="submit"
                class="single-product-sticky-bar__product-add-to-cart-button"><?php if(function_exists('pll_e')): pll_e('Dodaj do koszyka'); else: echo 'Dodaj do koszyka'; endif; ?>
            </button>
        </div>
    </div>
</div>

Tak to jest WordPress + WooCommerce i jak widać po markupie mamy przygotowaną na przyszłość wersję wielojęzyczną. Wrzuciłem to wszystko do templatki odpowiedzialnej za wyświetlanie pojedynczego produktu. Teraz dodajmy sobie troszkę styli.

 .single-product-sticky-bar {
    @apply flex items-center justify-between container py-2 lg:py-6;

    &__product-title {
      @apply text-2xl font-medium;
    }

    &__product-add-to-cart-button {
      @include btn.btn-main;
    }
    &__content {
      @apply flex items-center gap-4;
    }
  }

Tak dobrze widzisz to jest tailwind! Projekt korzysta z vite.js do bundlowania assetów.

Dobrze coś tam już widać jednakże na chwile obecną jest to blok w pełni statyczny (position: static)

Dajmy mu pozycję absolutną, aby był zawsze widoczny niezależnie od scrolla i dodajmy troszkę stylowania dla mobile + desktop.

Pozostaje nam wdrożyć IntersectionObservera wiec zaczynamy.

window.addEventListener('DOMContentLoaded', () => {
  const observerOptions = {
    root: null,
    rootMargin: '0px',
    threshold: 0.1,
  };

  const callback = (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        console.log('visible');
      } else {
        console.log('not visible');
      }
    });
  };

  const observer = new IntersectionObserver(callback, observerOptions);

  const btn= document.querySelector('.summary .single_add_to_cart_button');
  observer.observe(btn);
})

Tutaj tworzymy instancje observera i pokazujemy console.log-a w zależności od tego czy element jest widoczny. Do observera podpiąłem jeden obiekt (btn) więc możemy sprawdzić zachowanie.

Ok teraz pozostało nam pokazywać / ukrywać naszego sticky bara. W tym celu zmodyfikowałem troszkę jego style. Nadalem mu klase h-0 a w momencie gdy jest już aktywny zmienimy mu na h-24, czyli 96px. Dzięki temu możemy również dodać klasy typu transition, ponieważ nie animujemy do wartości auto także będziemy mieli fajny efekt pojawiania się. (Aby nie było to: tak znam trick z animowaniem do wartości auto z wykorzystaniem grid-template-rows od Kevina Powella 🙂

Efekt finalny

Podsumowanie

Sklepy internetowe mają inne zastosowanie niż strony firmowe czy też wizytówki. Naszym głównym celem jest zwiększanie przychodów, dlatego też powinniśmy zwracać uwagę na każdy detal. Jest naprawdę sporo aspektów min. szybkość wczytywania, zapobieganie awariom albo przestojom spowodowanym przez awarię, minotorowanie logów i błędów, sprawdzanie realnych zachowań userów oraz o wiele więcej. Tutaj jedna mała zmiana jest w stanie w sposób znaczny wpłynąć na konwersję w sklepie. Dlatego też oprócz aspektów technicznych warto dbać o user experience

Polecam oczywiście testy A/B dla takich scenariuszy, napisze o nich niebawem. 🙂