Jak wdrożyć video ofertę z pojawiającym się przyciskiem zamowienia

sobota, 19 czerwiec 10, 00:00

Amerykanie zachwycają się ostatnio ofertami VIDEO, którymi coraz częściej zastępują oferty pisane, lub o które wzbogacają oferty pisane.

Amerykanie zachwycają się ostatnio ofertami VIDEO, którymi coraz częściej zastępują oferty pisane, lub o które wzbogacają oferty pisane. Wygląda to w ten sposób, że na górze oferty znajduje się kilku-kilkunastominutowe video, w którym autor produktu opowiada o nim i zachęca do jego zakupu. Video ma albo format nagranych (np. Camtasia) slajdów, albo jest to video typu "talking head", na którym widzimy autora produktu. Oferty nagrane na video mają kilka zalet:
  1. Są łatwiejsze do przygotowania, bo łatwiej jest coś powiedzieć,
  2. Mówienie pozwala nam na więcej niedoskonałości, które w tekście pisanym mogłyby razić,
  3. Video jest na topie dzięki takim serwisom jak YouTube - coraz więcej ludzi lubi video
Video ma też wady:
  1. Czytanie jest szybsze niż słuchanie
  2. Tekst pisany możemy skanować w poszukiwaniu interesujących nas fragmentów, video musimy przesłuchać całe, lub skakać po fragmentach szukając tego, co nas interesuje (nie zawsze taka opcja jest możliwa)
  3. Jeśli w ofercie jest tylko video i formularz zamówienia, Klient może zbyt szybko podjąć decyzję na podstawie ceny.
Tą 3 wadę rozwiązuje technika pozwalająca na zsynchronizowanie formularza z video. Idea jest taka, aby pokazać link do formularza zamówienia lub cały formularz dopiero, gdy w video zaczniemy mówić o cenie - czyli po całym wstępie. Aby to zrobić, możemy odwołać się do 2 technologii:
  1. PEWNEJ, ale TRUDNEJ: Czyli stworzyć animację w technologii Flash, która będzie zawierała i video i przycisk do zamawiania/formularz.Takie rozwiązanie daje nam 100% pewność, że Klient nie zobaczy ceny za szybko, bo pokazanie się formularza jest na sztywno powiązane z video. Laik sobie z tym problemem nie poradzi.
  2. DOBREJ, ale PROSTEJ: Drugie rozwiązanie polega na odkryciu formularza za pomocą skryptu JavaScript, który po założonym przez nas czasie pokaże formularz.Takie rozwiązanie zadziała dobrze, jeśli użytkownik nie będzie miał opóźnień w ładowaniu się video i jeśli nie będzie zatrzymywał video.
Teraz zaprezentuję Wam to drugie rozwiązanie. Poniższy przykład dotyczy kursu na Ekademia.pl, ale analogicznie można go zastosować na własnej stronie. Na Ekademia.pl oferta znajduje się w DIV "salesletter" a formularz w DIV "salesform". Musimy więc ukryć i pokazać wszystko, co znajduje się pomiędzy <div class="salesform"> a </div>. Aby to zrobić, należy przejść do Edycji oferty naszego kursu. Następnie należy włączyć edycję "Testowanie i Śledzenie"

Ekademia edycja testowanie&śledzenie

Gdzie w sekcji "Javascript w sekcji HEAD oferty"

JavaScript w sekcji HEAD oferty

wkleimy następujący kod:

<style>
DIV.salesform {
visibility:hidden;
}
</style>
<script type="text/javascript">
function showIt() {
$("DIV.salesform").css("visibility","visible");
}
setTimeout("showIt()", 4*1000); // 1000 = 1 sec
</script> 

Wystarczy pogrubioną powyżej liczbę 4 zamienić na liczbę sekund opóźnienia, po którym ma się pojawić formularz zamówienia. Jeśli chcemy wyświetlić formularz POD video i mieć dzięki temu więcej miejsca na video, należy wkleić taki kod:

<style>
.salesletter {
 float: none;
 width: 710px;
 margin: 0 auto 0 auto;
}
*.salesletter {
 float: none;
 width: 710px;
 margin: 0 auto 0 auto;
}
.salesform {
 clear: both;
 float: none;
 width: 425px;
 margin: 0 auto 0 auto;
 visibility:hidden;
}
</style>
<script type="text/javascript">
function showIt() {
$("DIV.salesform").css("visibility","visible");
}
setTimeout("showIt()", 4*1000); // 1000 = 1 sec
</script> 
Tym razem, oprócz 4 sekundowego opóźnienia, możemy zmienić szerokość obszaru, w którym znajdzie się video z 710px na dowolną szerokość mniejszą lub równą 1000px. W końcu, aby wkleić video do treści oferty, wystarczy podczas edycji oferty umieścić w treści: {FLV:adres_pliku_flv_lub_mp4:SZEROKOSC:WYSOKOSC} lub {YOUTUBE:adres_filmu_na_youtube:SZEROKOSC:WYSOKOSC} Największą trudnością w tym bardzo prostym rozwiązaniu jest obliczenie opóźnienia. Osobiście polecam nawet nieco opóźnić pojawienie się linku do formularza, niż wyświetlić go za wcześnie. A jak to zrobić na własnej stronie? Wystarczy umieścić kod formularza lub przycisku do formularza wewnątrz DIVa o klasie salesform:

<div class="salesform">
KOD FORMULARZA
</div> 
Życzę powodzenia z tą nową formą oferty.

Następne

222 strony
Komentarze
Newsletter

Newsletter CzasNaE-Biznes

Cotygodniowa dawka darmowych artykułów od Piotra Majewskiego - ojca chrzestnego polskiego małego e-biznesu...

Dołącz do 98 190 czytelników