Wideo na karcie produktowej. Zmutowane MP4 czy embedowany film z YouTube?

Z formatem wideo w e-commerce jest trochę tak, jak z dietą. Niby wszyscy wiemy, że wypadałoby w to wejść, a jednak kończy się na noworocznych postanowieniach. Nie bez przyczyny, bo jednak wykonanie atrakcyjnej prezentacji produktu w formie filmu jest większą barierą niż cyknięcie kilku fotografii. Tyle tylko, że wideo z prezentacją produktu wcale nie musi być nagrane profesjonalną lustrzanką z gimballa. Nawet słabe wideo w połączeniu z dobrej jakości fotografiami kilkukrotnie poprawiają konwersję. Skoro tak, to pojawia się pytanie – czy wideo hostować na zewnątrz np. na YouTube i embedować je na karcie produktowej, a może trzymać lokalnie na swojej maszynie w formacie .mp4 i wymuszać autoplay w Chromie?

69% konsumentów potwierdza, że wideo prezentacje produktów ułatwiają im podjęcie decyzji zakupowej w sklepach online. Co prawda nie we wszystkich branżach i nie we wszystkich e-commerce’ach wideo jest na tyle dużą wartością dodaną, że warto w ten format wchodzić, bo opakowanie kołków do płyt kartonowo-gipsowych nie wymaga szczególnie złożonego wideo explainera, podobnie zresztą jak nowy bestseller w księgarni, papier do drukarki, albo kabel USB, ale t-shirt, parasolka, lampka nocna już tak.

Biorąc pod uwagę rozpiętość produktową, różny cykl życia produktów, wideo w e-commerce ma być na tyle dobre, aby wzmacniało sprzedaż, a z drugiej – nie było zbyt złożone, doprowadzając do przeinwestowywania. Dobrą praktyką będzie włączenie procesu produkcji wideo do procesu fotografowania pack-shotów. Najgorszym pomysłem jest rozdzielenie tych procesów – tj. innego dnia fotografowanie i innego dnia przygotowywanie wideo – wtedy koszty operacyjne wokół tego wątku niepotrzebnie rosną.

Jak osadzić wideo na karcie produktowej sklepu internetowego?

Zasadniczo w przypadku e-commerce przyjmuje się dwa standardy:

1. Wideo embedowane, osadzane na karcie produktowej z jakiegoś zewnętrznego hostingu wideo – np. YouTube, Vimeo
   
   Inna sprawa, że trudno mówić o YouTube w kontekście hostingu wideo jako takiego, ale o tym opowiem nieco później.
   
2. Wideo trzymane lokalnie u siebie w formacie .mp4 z autoplayem

Jakie różnice dzielą wideo hostowane lokalnie a wideo embedowane z zewnętrznego serwisu?

• Koszty obsługi ruchu

Krótkie, kilkusekundowe wideo w formacie horyzontalnym o szerokości 550 px po kompresji będzie miało wagę około 4-5 MB. Nawet, jeśli takich filmów wyprodukujesz kilkaset, miejsca na dysku ani w obciążeniu transferu jakoś specjalnie od tego nie przybywa. Co innego, gdybyś chciał osadzać wideo w klasycznych formatach panoramicznych np. w FullHD – tutaj to już przynajmniej kilkaset MB, ale przyjmijmy, że to zła praktyka.

Z kolei zewnętrzna platforma rozwiązuje problem zarówno przestrzeni dyskowej, jak i transferu – obciążasz ruchem zewnętrzny serwis, a nie samego siebie.

• Potencjalny ruch

Co jeszcze różni wideo hostowane na własnym serwerze od tego, jakie możesz osadzić w zewnętrznym serwisie? To, że wideo, które będziesz „trzymał” na YouTube, w Vimeo tworzy content sam w sobie; content, który przy odrobinie szczęścia i wysiłku będzie sprowadzało dodatkowy ruch do Twojego sklepu. I tak np. do filmu dostępnego na YT Twoi potencjalni klienci będą mogli dostać się nie tylko z poziomu wyszukiwarki w samym YT, ale i z wyszukiwarki Google.

• Bezpieczeństwo

I tutaj dochodzimy do wątku, w którym to hostowanie krótkich wideo na własnych serwerach jest jednak mniej ryzykownym pomysłem. Znam przynajmniej kilka kanałów na YT prowadzonych przez e-commerce, które to kanały zostały zamknięte ze względu na niewystarczającą jakość contentu, a właściwie – niedostosowanie do tzw. wytycznych społeczności. Filmy miały co typowe – intro, outro oraz prostą, kilkunastosekundową zawartość – stopklatki ze stołu obrotowego do zdjęć 360 stopni i ścieżkę dźwiękową ze stocka. Content banalny w obróbce i masowej produkcji. Wiadomo – nie generował szczególnego zaangażowania, bo obrót produktu w prawo i lewo to niekoniecznie content po jaki przychodzi się na YT, więc zdarzenia behawioralne mogły wskazywać algorytmowi, że ma do czynienia z thin contentem. Bo celem tego contentu, tych filmów uploadowanych na YT było po 1. wykorzystywanie YT w celu hostowania wideo na zewnętrznym serwerze i 2. do spychania ruchu na stronę docelową.

• Czas ładowania karty produktowej

Co oczywiste – jeśli wyświetlasz użytkownikowi wideo hostowane u siebie, to jest to proces znacznie bardziej responsywny. Przeglądarka ani bot nie muszą oczekiwać na odpowiedź ze strony YT lub jakiejkolwiek innej platformy. A takie np. wideo embedowane z Vimeo często miewa problemy z wyświetlaniem na różnych przeglądarkach, jeśli te mają ciut przycięte ustawienia cookies. Zdarza się, że na blokowanie filmów osadzonych z Vimeo wpływa mają też zbyt agresywne heurystyki popularnych aplikacji antywirusowych a nawet ustawienia samego Windowsa.

• Przepływem ruchu

Twoje wideo, to Twój content. Wideo embedowane to jednak prosty sposób na ucieczkę użytkownika do zewnętrznej platformy, bo o ile film z YT możesz za darmo embedować na swojej stronie, to po kliknięciu w „play” użytkownikowi wyświetlany jest interfejs odtwarzacza z odnośnikami do samego YT. A jeśli tak, to możesz spodziewać się, że część sesji, obejrzeń filmu z prezentacją produktu będzie kończyło się porzuceniem Twojego sklepu i przerwaniem procesu zakupowego. W efekcie niby tworzysz wartość dodaną dla konsumenta, w praktyce – rzeczywiście tak jest, ale częściowo oddajesz też część ruchu na zewnątrz.

Co prawda film z YT da się osadzić bez dodatkowych funkcji odtwarzacza, w tym np. funkcji głośności, napisów, ustawień rozdzielczości itd. – wystarczy, że na etapie genertowania iframe’a odznaczysz „Pokaż elementy sterujące odtwarzacza”, ale wtedy – w zamian otrzymujecie watermark z logo YT – dwukrotnie większe niż ten normalne. Coś za coś.

Żeby było jasne – trudno mieć w ogóle o to żal do YT; nie ma nic za darmo.

I tak – jeśli już zastanawiasz się, jak to obejść, przykrywając tego iframe’a jakimiś layerami na stronie, żeby ukryć np. tytuł filmu lub jakikolwiek inny inny element interfejsu YT, to tak jak się pewnie domyślasz – to niezgodne z regulaminem.

W jakim formacie osadzić wideo na kartce produktowej?

Z filmami embedowanymi z YT, Vimeo nie ma większej filozofii – pobierasz iframe’a, wklejasz go w kod źródłowy karty produktowej – zachęcam do wydzielenia osobnego miejsca na wideo, bo nie jest nim na pewno opis produktu, który wyświetla się 3 ekrany poniżej above the fold – i tyle.

Jeśli jednak chcesz hostować wideo produktowe lokalnie, na własnym serwerze – czy to na tej samej maszynie, czy na zarządzanym przez Ciebie serwerze zewnętrznym – co myślę, że docelowo będzie lepszym pomysłem, to standardem jest format .mp4.

HTML5 pozwala na skorzystanie z video tagu o takiej zawartości:

<video controls autoplay loop muted>
<source src=”movie.mp4″ type=”video/mp4″>
</video>

Pamiętaj, aby zachować pełną składnię, razem z „muted” – w przeciwnym razie Chrome zablokuje autoodtwarzanie, chroniąc użytkownika przed dźwiękiem niechcianego wideo. Z kolei „loop” to pętla – po zakończeniu odtwarzania wideo wraca na początek i tak w koło.

Do video tagu możesz dodać także atrybut „poster”. Poster pozwala na wskazanie przeglądarce miniatury filmu, a w zasadzie bitmapy, która powinna się wyświetlić w miejscu wideo, gdyby np. wideo nie zostało jeszcze w międzyczasie załadowane.

Pamiętaj też o atrybucie „playsinline” – to zabezpiecza konsumenta przed zmaksymalizowaniem okna z wideo, co mogłoby zniszczyć jego doświadczenia i odciągnąć go od procesu zakupowego.

Same video tagi w HTML5 są co zasady obsługiwane od następujących kompilacji przeglądarek:

• Chrome od 4.0 w górę,
• Internet Explorer 9.0 w górę,
• FireFox 3.5 w górę,
• Opera 10.05 w górę,
• Safari 4.0 w górę.

Przykładowe wdrożenia

A tak wygląda poprawnie zaimplementowany format wideo na Enduro7, a tak na Alphalete.

Tymczasem dzięki bardzo za uwagę, mówił do Was Adrian Pakulski z agencji SEO Paq Studio. Niebawem widzimy się w kolejnym materiale, do następnego, cześć.