Pierwsze kroki z rekomendacjami produktów na stronie

Czego się dowiesz?

Dowiedz się, jak dodać spersonalizowany blok rekomendacji produktów bezpośrednio do stron szczegółów produktu (PDP), rozszerzając personalizację na stronie w Klaviyo poza wysuwany panel Klaviyo Customer Hub. Ten przewodnik obejmuje to, co robi osadzony blok, jak go skonfigurować i zaprojektować, jak funkcja jest wdrażana z upływem czasu oraz jakie kompromisy techniczne stoją za tą implementacją.

Osadzone rekomendacje produktów są z założenia niezależne od platformy e-commerce i docelowo mogą być hostowane na dowolnej stronie witryny, z początkowym naciskiem na stronę szczegółów produktu (PDP). Aby przekazać opinię na temat tej funkcji, skontaktuj się z zespołem produktowym Klaviyo Customer Hub.

Kilka słów na początek

• Wymaganie: Ten blok wymaga włączenia Klaviyo Customer Hub w Klaviyo.
• Obsługa platform: Dostępne już dziś na Shopify (jako blok aplikacji motywu), Shopify Plus (jako osadzany wycinek kodu źródłowego) oraz Salesforce Commerce Cloud (tylko obsługa SFRA). Obsługa dodatkowych platform jest planowana.
• Zależność od silnika: Jakość rekomendacji jest napędzana przez silnik rekomendacji Klaviyo. Dostarczamy rekomendacje za pośrednictwem naszej rekomendacji nowej generacji — ulepszenia w porównaniu z poprzednim systemem, który nie potrafił personalizować rekomendacji dla anonimowych odwiedzających.

Uwaga: rekomendacje produktów na stronie były wcześniej dostępne tylko w panelu Hub i tylko dla zalogowanych użytkowników. Ta funkcja przenosi rekomendacje z panelu Hub na stronę produktu (PDP).

Co możesz zrobić z osadzonymi rekomendacjami produktów

Osadzony blok rekomendacji produktów pozwala wyświetlać trafne produkty bezpośrednio na stronach szczegółów produktu, dzięki czemu każdy odwiedzający — znany lub anonimowy — zobaczy coś odpowiedniego dla siebie.

• Dopasuj do stylu swojej witryny: Dostosuj czcionki, kolory, układ i style przycisków, aby blok wyglądał jak natywna część motywu. Dodaj niestandardowe klasy CSS, które obejmują wszystkie elementy Klaviyo Customer Hub, wszystkie osadzone bloki lub konkretnie blok rekomendacji. Edytuj nagłówek bloku (np. „Najlepsze propozycje dla Ciebie” lub „Mogą Ci się też spodobać”) i wybierz układ w stylu karuzeli.
• Personalizuj rekomendacje dla znanych odwiedzających: Rekomendacje są oparte na tym, co Klaviyo wie o profilu, i działają w oparciu o usługę Next Gen Product Recommendations (NGPRS).
• Pokaż coś każdemu odwiedzającemu: Niezalogowani odwiedzający domyślnie widzą ogólne rekomendacje produktów, pochodzące z Shopify.
• Szybkie ładowanie bez pogorszenia wydajności strony: Blok został zaprojektowany tak, aby ładował się szybko od samego początku, bez obciążania strony dodatkowym kodem — dzięki czemu nie spowolni witryny ani nie pogorszy wyników wydajności.
• Mierz zaangażowanie i przychody: Każde kliknięcie jest śledzone jako zdarzenie Clicked Product i przypisywane w taki sam sposób jak kliknięcie produktu w wysuwanym panelu Hub, dzięki czemu można mierzyć wyświetlenia, kliknięcia i przypisywalne przychody.
• Zadbaj o spójne doświadczenie: Znani lub zidentyfikowani odwiedzający mogą widzieć te same rekomendacje w wysuwanym panelu Hub i na PDP.
• Pozwól kupującym zapisywać produkty na później: Kupujący mogą dodać rekomendowany produkt do ulubionych bezpośrednio z karty lub do koszyka, jeśli nie są jeszcze gotowi, aby go kupić.
• Unikaj rekomendowania tego, co już jest w koszyku: Produkty, które znajdują się już w koszyku kupującego, są wykluczane z rekomendacji wyświetlanych tej osobie.

Utwórz nowy osadzony blok rekomendacji produktów

To nowy osadzany blok — skonfiguruj go tak samo jak inne osadzone bloki, takie jak Ulubione i FAQ, zamiast korzystać z szerszych ram Embedded Personalization Content Blocks.

1. Uzyskaj dostęp do biblioteki bloków:
   1. Przejdź do Service > Klaviyo Customer Hub w lewym panelu nawigacyjnym Klaviyo. Kliknij Design > Bloki onsite. Znajdź Rekomendacje produktów w bibliotece bloków i dodaj je do strony produktu.
2. Skonfiguruj źródło rekomendacji:
   1. Wybierz sposób uzupełniania i filtrowania rekomendacji na podstawie stanu odwiedzającego:
      1. Zalogowani i zidentyfikowani odwiedzający: Klaviyo (domyślnie) lub Shopify.
      2. Anonimowi odwiedzający: Shopify (domyślnie i obecnie jedyna opcja). To źródło zasila też rekomendacje w szufladzie Hub dla anonimowych odwiedzających.
      3. Filtruj produkty, których nie ma w magazynie: Przełącz na Wł. / Wył.
      4. Filtruj produkty, które są już w koszyku kupującego: Przełącz Wł. / Wył.
3. Zaprojektuj i dostosuj:
   1. Dostosuj ustawienia wizualne, aby blok wyglądał jak natywny element Twojej witryny:
      1. Elementy: Pokaż lub ukryj cenę (domyślnie widoczna), przyciski ulubionych (domyślnie widoczne), przyciski dodawania do koszyka (domyślnie ukryte) oraz wariant produktu (domyślnie ukryty).
      2. Przyciski: Wybierz styl (zaokrąglone, kwadratowe, zakrzywione), kolor, kolor tekstu i wielkość liter tekstu.
      3. Układ: Ustaw maksymalną szerokość, maksymalną liczbę produktów (1–10, domyślnie 4), dopełnienie (góra, lewa, prawa, dół) oraz marginesy (między tytułem a wierszem produktów oraz między produktami). Skonfiguruj rozmiar obrazu (szerokość, wysokość) oraz dopasowanie (wypełnienie, dopasowanie, rozciągnięcie).
      4. Czcionki: Wybierz kroje i rozmiary dla czcionki nagłówka, czcionki nazwy produktu, czcionki ceny oraz czcionki wariantu.
      5. Niestandardowy CSS: Dodaj klasy, aby kierować je na wszystkie elementy Klaviyo Customer Hub, wszystkie osadzone bloki lub konkretnie blok rekomendacji.

4. Dokończ konfigurację platformy:
   1. Zainstaluj blok w interfejsie użytkownika Twojej platformy e-commerce:
      1. Shopify: Dodaj jako blok aplikacji w edytorze motywów.
      2. Shopify Plus: Dodaj jako wycinek kodu źródłowego (div) dla sprzedawców, którzy potrzebują kontroli na poziomie motywu.
5. Opublikuj:
   1. Zapisz i opublikuj zmiany. Blok pojawi się na aktywnej stronie PDP zgodnie ze źródłem, filtrami i ustawieniami projektu, które skonfigurowano.

Atrybucja i analityka

• Każde kliknięcie rekomendowanego produktu jest śledzone jako zdarzenie Kliknięty produkt, ze źródłem „Osadzony blok rekomendacji produktów”.
• Kliknięcia są przypisywane w taki sam sposób jak kliknięcie produktu w wysuwanym panelu Hub.
• Klaviyo rejestruje wyświetlenia i kliknięcia, aby można było śledzić adopcję (konta z co najmniej jednym aktywnym blokiem rekomendacji), zaangażowanie (wskaźnik klikalności, wskaźnik dodania do koszyka po kliknięciu, ulubione) oraz przychody (przychody przypisane na 1000 impresji bloku oraz udział zamówień ze ścieżką kliknięcia wspomaganą rekomendacjami).

Dopasowanie stylu

Aby dopasować do istniejącego motywu, idealnym rozwiązaniem jest to, aby Shopify renderowało blok produktu w imieniu Klaviyo. Shopify nie będzie jednak renderować bloków wewnątrz rozszerzenia aplikacji Klaviyo w kontekście produktu, więc zamiast tego tworzymy nowy blok sekcji, który renderuje blok produktu.