Jak pokazać aukcję online na własnej stronie internetowej

Co pokazuje dobre osadzenie aukcji

Cztery rzeczy i nic więcej:

• Pozycje, które są teraz w licytacji, ze zdjęciem, tytułem, aktualną ceną i liczbą ofert oraz odliczaniem do każdego zakończenia, które naprawdę odlicza. Pozycja, która jeszcze się nie otworzyła, pokazuje zamiast tego cenę wywoławczą i odliczanie do startu.
• Kliknięcie, które otwiera pozycję na stronie aukcyjnej, w nowej karcie, żeby odwiedzający mógł licytować, nie tracąc Twojej strony.
• Nic, gdy nic nie ma. Blok powinien sam znikać, gdy żadna pozycja nie jest otwarta ani zapowiedziana. Osadzenie, które pokazuje zeszłomiesięczną aukcję albo „obecnie brak aukcji”, mówi każdemu odwiedzającemu, że nic się u Ciebie nie dzieje.
• Twój wygląd. Twój kolor akcentu i styl rogów, żeby czytało się to jako część Twojej strony, a nie jako reklamę.

Czego unikać: iframe z całą stroną aukcyjną (dwa paski przewijania, dwa nagłówki, zepsuty układ na telefonie), zrzutu ekranu, który dezaktualizuje się w dniu wykonania, i wszystkiego, co każe odwiedzającym logować się na Twojej stronie, żeby zobaczyć ceny.

Dwa sposoby, żeby to zrobić

Skrypt. Jedna linijka <script>, która rysuje blok i utrzymuje go w aktualności. To normalna droga i działa wszędzie tam, gdzie kreator stron pozwala dodać „własny kod”, „osadzić HTML” albo „blok kodu”. Nie powinien zapisywać plików cookie ani wczytywać czcionek czy skryptów śledzących w imieniu Twoich odwiedzających; wymagaj tego od każdego widżetu, który rozważasz, bo to Twoja polityka prywatności musi go objąć.

Obraz na żywo z linkiem. Niektóre miejsca odrzucają skrypty: stopki e-mail, kreatory newsletterów, darmowe plany kilku kreatorów stron, intranety. Tam obraz rysowany na nowo na serwerze co kilka minut, opakowany w link do aukcji, wykonuje większość zadania: pokazuje, ile pozycji jest w licytacji i kiedy kończy się licytacja, i pozostaje aktualny na stronie albo w e-mailu wysłanym kilka tygodni temu.

Linijka kodu

Dla strony aukcyjnej zbudowanej na Auctify darmowy widżet AuctionAmigo to jedna linijka:

<script async src="https://auctionamigo.com/w.js"
  data-site="your-sale.myauctify.com" data-shape="horizontal"
  data-colour="#ffd23f" data-corners="8" data-background="light"></script>

Zastąp your-sale.myauctify.com adresem swojej strony aukcyjnej, z https:// lub bez; własna domena działa tak samo. Projektant na stronie głównej tego serwisu pisze tę linijkę za Ciebie, z wpisanym Twoim kolorem i kształtem, i pokazuje wynik, zanim ją skopiujesz. Atrybuty:

Odświeża się co dwie minuty, nie zapisuje plików cookie i niczego nie przechowuje, nie wczytuje czcionek ani skryptów śledzących, rysuje się we własnym shadow root, więc Twoje style i jego style nie wchodzą sobie w drogę, i nie renderuje zupełnie nic, gdy strona nie ma nic otwartego ani zapowiedzianego. Licytacja odbywa się na stronie aukcyjnej, nigdy w widżecie.

Który kształt i gdzie na stronie

Zacznij od jednego umiejscowienia, nie trzech. Strona główna, pod pierwszym ekranem, to miejsce, które widzi najwięcej odwiedzających; pływający widżet na każdej podstronie jest drugie. Liczbę pozycji ustaw na tyle, ile mieści przestrzeń: trzy pozycje w wąskim pasku bocznym wyglądają lepiej niż dwanaście.

Gdzie to wkleić, kreator po kreatorze

Każdy kreator ma pole na cudzy kod; nazwy się różnią. Nazwy menu poniżej są takie, jak kreatory oznaczają je w chwili pisania, i przesuwają się przy przeprojektowaniach, więc jeśli któraś się przeniosła, poszukaj w pomocy kreatora „embed code” lub „custom code”. Tam, gdzie funkcja zależy od planu, jest to zaznaczone; sprawdź swój plan, zanim założysz, że masz do niej dostęp.

1. WordPress

   Blok Własny HTML w edytorze blokowym, na wybranej podstronie, z wklejoną linijką; albo obszar widżetów dla paska bocznego. Jest osobny poradnik o prowadzeniu aukcji przy stronie na WordPressie, który omawia to i kwestię wtyczek.

2. Wix

   W edytorze: Dodaj elementy → Umieść kod → Umieść HTML, wklej linijkę do elementu i ustaw jego rozmiar. Wix uruchamia osadzony kod we własnej ramce, więc wybierz kształt w treści (poziomy, pionowy lub wieżowiec) i zrób element tak duży, jak wymaga kształt; pływający widżet nie może opuścić tej ramki. Kod dla całej witryny trafia do Ustawienia → Własny kod, co Wix oferuje w płatnych planach z podłączoną domeną.

3. Squarespace

   Dodaj blok Code tam, gdzie mają być pozycje, i wklej linijkę. Squarespace uruchamia skrypty w blokach kodu od planu Business wzwyż; w planie Personal blok kodu pokazuje tylko HTML, a skrypt nic nie robi. Dla wszystkich podstron naraz: Settings → Advanced → Code Injection → Footer, z tym samym wymogiem planu.

4. Jimdo

   Jimdo Creator: element Widget / HTML, wklej linijkę. Nowszy edytor Jimdo ma element HTML w płatnych planach. Wybierz kształt w treści i daj elementowi miejsce.

5. Webflow

   Przeciągnij element Embed na stronę i wklej do niego linijkę. Kod dla całej witryny trafia do Site settings → Custom code → Footer code, co wymaga płatnego planu witryny, żeby opublikować.

6. Shopify

   Sklep online → Motywy → Dostosuj, dodaj blok Custom Liquid (lub Custom HTML, zależnie od motywu) do sekcji, w której mają pojawić się pozycje, i wklej linijkę. Widżet prowadzi na stronę aukcyjną; nie dodaje niczego do koszyka sklepu.

7. Weebly i Google Sites

   Weebly: element Embed Code. Google Sites: Wstaw → Umieść → Umieść kod. Oba uruchamiają kod we własnej ramce, więc użyj kształtu w treści i dopasuj do niego rozmiar elementu.

8. Czysty HTML albo programista

   Wklej linijkę tam, gdzie ma się pojawić blok, albo tuż przed </body> z kształtem pływającym. Dzięki data-target możesz trzymać znacznik w jednym miejscu, a widżet będzie rysował się w dowolnym elemencie wskazanym selektorem.

Gdzie skrypty są niedozwolone

Stopki e-mail, narzędzia do newsletterów, darmowe plany niektórych kreatorów i większość intranetów usuwają skrypty. Użyj tam obrazu na żywo: banera rysowanego na serwerze co kilka minut, pokazującego, ile pozycji jest w licytacji i kiedy kończy się licytacja, opakowanego w link do aukcji. W HTML to <a> wokół <img>; w narzędziu do newsletterów to „dodaj obraz, ustaw link”. Ponieważ obraz jest rysowany na nowo, e-mail wysłany dwa tygodnie temu wciąż pokazuje aktualną liczbę, a po zakończeniu aukcji staje się zwykłym zaproszeniem do odwiedzenia strony aukcyjnej, a nie nieaktualnym stwierdzeniem.

Czego obraz na żywo nie potrafi: pokazać pojedynczych pozycji z cenami ani odliczać. To rozwiązanie zapasowe, nie pierwszy wybór, i o wiele bardziej pasuje do e-maila niż do strony internetowej, która mogłaby uruchomić skrypt.

Sprawdzenie, czy działa

Otwórz stronę w prywatnym oknie przeglądarki na telefonie i na komputerze. Pozycje powinny pojawić się w ciągu sekundy lub dwóch. Jeśli nie widzisz zupełnie nic, to jedna z trzech rzeczy, a widżet celowo milczy o każdej z nich, żeby odwiedzający nigdy nie zobaczył błędu:

• Strona aukcyjna nie ma nic otwartego ani zapowiedzianego. Wystaw pozycję albo sprawdź, czy licytacja naprawdę jest otwarta.
• Strona aukcyjna jest w trybie prywatnym, więc nic z niej nie jest publiczne. Prywatnej strony nie da się nigdzie pokazać.
• Adres jest błędny albo element, który kreator dał kodowi, jest za mały, żeby się w nim narysować. Sprawdź pisownię data-site, potem powiększ element.

Następnie odczekaj dwie minuty po ofercie na stronie aukcyjnej i potwierdź, że cena na Twojej stronie się zmieniła. Od tej chwili nie ma nic do utrzymywania: gdy aukcja się kończy, blok sam się usuwa, a następna aukcja pojawia się, gdy jej pozycje zostaną wystawione.

Pytania