Tworzenie niestandardowych bloków HTML i CSS dla Klaviyo Customer Hub

Czego się dowiesz?

Jak zbudować niestandardowy blok dla Twojego Klaviyo Customer Hub, używając własnych HTML i CSS. Użyj go do tworzenia treści zgodnych z Twoją marką, takich jak karty postępu programu lojalnościowego, moduły promocyjne i tabele porównawcze, gdy standardowe pola bloku treści nie są wystarczająco elastyczne.

Kilka słów na początek

Ten przewodnik opiera się na blokach treści. Jeśli wcześniej nie tworzyłeś(-aś) bloku treści, zacznij od Jak tworzyć bloki treści w Klaviyo Customer Hub. Aby zmienić wygląd całego Klaviyo Customer Hub, a nie pojedynczego bloku, zobacz Jak stylizować Klaviyo Customer Hub.

Co możesz zrobić za pomocą niestandardowych bloków HTML

Niestandardowy blok HTML to zaawansowany blok treści z dwoma polami kodu: jednym dla HTML i jednym dla CSS. HTML definiuje strukturę i treść bloku, a CSS kontroluje jego styl, układ i zachowanie responsywne. Używaj niestandardowych bloków HTML do:

• Wyświetl kartę postępu w programie lojalnościowym lub podsumowanie nagród, korzystając z danych o punktach lub poziomie z profilu Klaviyo.
• Zbuduj tabelę porównawczą, np. aby wyjaśnić poziomy członkostwa lub plany.
• Utwórz baner promocyjny lub moduł dopasowany do Twojej marki.
• Rozmieść treści w sposób, na jaki nie pozwalają standardowe pola nagłówka, akapitu i obrazu.
• Dodaj funkcje, takie jak narzędzie listy życzeń lub opinii od zewnętrznego dostawcy, odwołując się do niestandardowego elementu zdefiniowanego w Twojej witrynie.

Niestandardowe bloki HTML pojawiają się na karcie Dla Ciebie obok Twoich innych bloków treści. Możesz też używać ich w blokach treści na stronie. Ustawienia statusu logowania, widoczności opartej na grupach, harmonogramowania i kontekstu wyświetlania działają tak samo jak w przypadku innych bloków treści.

Co jest obsługiwane, a co nie

Klaviyo oczyszcza Twój HTML i CSS oraz ogranicza zakres CSS do tego bloku, aby nie mógł zmieniać reszty Twojego Klaviyo Customer Hub ani Twojej witryny. Pamiętaj o tych ograniczeniach:

• Obsługiwane: HTML do struktury i treści, CSS do stylów i układu, znaczniki personalizacji Klaviyo do danych profilu oraz elementy niestandardowe zdefiniowane w Twojej witrynie dla wszelkich dodatkowych funkcji.
• JavaScript działa w Twojej witrynie, a nie w bloku: Nie możesz pisać JavaScriptu bezpośrednio w polu HTML. Wszystko, co tam wpiszesz, zostanie usunięte i nie zostanie zapisane. Aby dodać funkcjonalność, w tym integracje innych firm, zdefiniuj element niestandardowy w swojej witrynie i odwołaj się do niego w bloku. Zobacz poniżej: Integracja narzędzi innych firm za pomocą elementów niestandardowych.
• Brak obsługi: CSS, który wpływa na elementy poza Twoim blokiem, np. stylizację całej strony, lub edycje znaczników natywnych bloków Klaviyo.
• Dane: Wszelkie wyświetlane dane muszą pochodzić z właściwości profilu Klaviyo za pośrednictwem znaczników personalizacji. Dane zdarzeń nie są obsługiwane.

Utwórz niestandardowy blok HTML

1. Przejdź do Klaviyo Customer Hub na karcie Witryna.
2. Wybierz Projekt w nawigacji Klaviyo Customer Hub.
3. Kliknij Edytuj swój Hub, aby otworzyć edytor Klaviyo Customer Hub.
4. Wybierz „+” na lewym pasku nawigacji, aby dodać blok treści
5. Kliknij Zbuduj własny, a następnie u góry panelu treści wybierz HTML, aby korzystać z oddzielnych pól HTML i CSS.
6. Wpisz nazwę wewnętrzną. Klaviyo używa tej nazwy do raportowania kliknięć w blok. Nie możesz jej zmienić po utworzeniu bloku.
7. Wpisz kod w polach HTML i CSS. Zobacz poniżej Napisz swój kod HTML i CSS.
8. Skonfiguruj, kto widzi blok, korzystając ze statusu logowania, widoczności opartej na grupach, harmonogramu i kontekstu wyświetlania.
9. Przejrzyj podgląd na żywo i rozwiąż wszelkie ostrzeżenia dotyczące walidacji. Gdy wybrany jest HTML, kliknij Opublikuj, aby zapisać blok. Aby wyświetlać go w Twojej witrynie, Twój Klaviyo Customer Hub też musi być opublikowany.

Napisz swój kod HTML i CSS

Dodaj swój kod HTML

Użyj pola HTML, aby zbudować strukturę swojego bloku ze standardowych elementów, takich jak nagłówki, akapity, listy, linki, obrazy i tabele. Linkuj do stron w swojej witrynie za pomocą zwykłych znaczników kotwicy. Ponieważ w bloku nie można używać JavaScript, przyciski i linki powinny prowadzić do adresu URL. Do bardziej interaktywnych rozwiązań użyj elementu niestandardowego.

Stylizuj za pomocą CSS

Użyj pola CSS, aby kontrolować odstępy, kolor, typografię i responsywny układ. Twoje CSS dotyczy tylko tego bloku. Domyślnie niestandardowy blok HTML jest stylizowany tak, aby pasował do Twoich pozostałych bloków treści, więc musisz napisać CSS tylko dla elementów, które chcesz zmienić.

• Nadaj elementom własne nazwy klas, takie jak rewards-card, i kieruj te klasy w CSS.
• Dodaj @media reguł, aby blok wyglądał dobrze na małych ekranach.
• Użyj font-family: inherit, aby tekst pasował do czcionek wybranych na karcie Styl.

Dodaj personalizację

Użyj znaczników personalizacji Klaviyo w swoim HTML-u, aby wyświetlać dane profilu, np. saldo punktów lojalnościowych. Zawsze dodawaj wartość domyślną, aby blok nie wyświetlał pustych miejsc, gdy kupujący nie podał danych. Dane profilu są widoczne tylko dla kupujących zalogowanych lub zidentyfikowanych. Wszyscy pozostali widzą wartość domyślną.

Przykład: karta z punktami lojalnościowymi

Ten przykład pokazuje poziom klienta i saldo punktów wraz z przyciskiem, który prowadzi do Twojej strony z nagrodami. Zastąp nazwy właściwości (loyalty_points i Membership Tier) właściwościami profilu, które synchronizuje Twoja integracja lojalnościowa, i zaktualizuj adres URL linku.

<div class="rewards-card">
  <p class="rewards-eyebrow">{{ person|lookup:'Membership Tier'|default:'Member' }} status</p>
  <h3 class="rewards-points">{{ person|lookup:'loyalty_points'|default:'0'|floatformat:0 }} points</h3>
  <p class="rewards-copy">Redeem your points for discounts on your next order.</p>
  <a class="rewards-button" href="/pages/rewards">Redeem rewards</a>
</div>

.rewards-card {
  padding: 20px;
  border-radius: 12px;
  background: #f6f1ea;
  color: #232323;
  font-family: inherit;
}

.rewards-eyebrow {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rewards-points {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.2;
}

.rewards-copy {
  margin: 0 0 16px;
  font-size: 14px;
}

.rewards-button {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  background: #232323;
  color: #ffffff;
  font-size: 14px;
  text-decoration: none;
}

@media (max-width: 480px) {
  .rewards-card {
    padding: 16px;
  }

  .rewards-points {
    font-size: 24px;
  }
}

Przykład: tabela porównawcza członkostwa

Ten przykład porównuje dwa poziomy członkostwa. Kontener umożliwia poziome przewijanie tabeli na wąskich ekranach, zamiast psuć układ strony.

<div class="compare-wrap">
  <table class="compare">
    <thead>
      <tr>
        <th></th>
        <th>Standard</th>
        <th>VIP</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Free shipping</th>
        <td>Orders over $75</td>
        <td>Always</td>
      </tr>
      <tr>
        <th scope="row">Early access</th>
        <td>No</td>
        <td>Yes</td>
      </tr>
      <tr>
        <th scope="row">Birthday reward</th>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
    </tbody>
  </table>
</div>

.compare-wrap {
  overflow-x: auto;
}

.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.compare th,
.compare td {
  padding: 10px 12px;
  border-bottom: 1px solid #e4e4e4;
  text-align: left;
}

.compare thead th {
  background: #f6f1ea;
}

Zintegruj narzędzia innych firm z elementami niestandardowymi

Nie możesz pisać kodu JavaScript bezpośrednio w niestandardowym bloku HTML, ale nadal możesz dodać funkcje oparte na JavaScript, odwołując się do niestandardowego elementu, który definiuje Twoja strona. Niestandardowy element to wielokrotnego użytku znacznik HTML z łączoną nazwą, taki jak <wishlist-widget>, który deweloper rejestruje w JavaScript w Twoim sklepie. Twój blok zawiera tylko znacznik, a resztę pracy wykonuje kod Twojej strony. Użyj tego podejścia, aby wyświetlać treści z narzędzi firm trzecich, takich jak lista życzeń, opinie lub aplikacje lojalnościowe.

Jak to działa

1. Twój programista lub aplikacja innej firmy definiuje element niestandardowy w Twoim sklepie internetowym. Zwykle robi się to za pomocą Twojego motywu lub własnego skryptu aplikacji.
2. W polu HTML dodaj znacznik w miejscu, w którym ma się pojawić element. Dozwolona jest dowolna nazwa znacznika zawierająca łącznik.
3. Opcjonalnie przekaż dane profilu do elementu jako atrybuty, używając znaczników personalizacji.
4. Opublikuj swój blok. Gdy Klaviyo Customer Hub załaduje się na stronie, na której Twoja witryna zdefiniowała ten element, kod Twojej witryny renderuje go wewnątrz bloku.

Ten przykład umieszcza element listy życzeń w bloku i przekazuje do niego adres e-mail kupującego. Link wewnątrz znacznika to zawartość zastępcza, która wyświetla się, jeśli element nie jest zdefiniowany na stronie. Zastąp nazwę znacznika i atrybuty tymi, których używa Twoje narzędzie zewnętrzne.

<div class="wishlist-block">
  <h3>Your wishlist</h3>
  <wishlist-widget customer-email="{{ person.email }}" max-items="4">
    <a href="/pages/wishlist">View your wishlist</a>
  </wishlist-widget>
</div>

Co warto wiedzieć

• Element musi być zdefiniowany w Twojej witrynie. Działa tylko na stronach, na których Twoja witryna załadowała skrypt, który go definiuje. Klaviyo nie ładuje za Ciebie skryptów firm trzecich. Dodaj treść zastępczą wewnątrz znacznika, aby kupujący zobaczyli coś przydatnego, jeśli element nie jest dostępny.
• Personalizacja działa w atrybutach. Te same zasady obowiązują wszędzie w Twoim bloku. Dane z profilu pojawiają się tylko w przypadku zalogowanych lub zidentyfikowanych kupujących, więc dodaj wartość domyślną dla wszystkich pozostałych.
• Niestandardowe elementy dziedziczą style Twojej witryny. Klaviyo Customer Hub nie renderuje się wewnątrz iframe ani shadow DOM, więc Twój niestandardowy element przejmuje CSS Twojej witryny i może być przez niego modyfikowany. Możesz też stylizować znacznik elementu z CSS Twojego bloku.
• Pisz kod JavaScript na swojej stronie, a nie w bloku. Wszelki kod JavaScript, który wpiszesz w polu HTML, jest usuwany i nie jest zapisywany. Zdefiniuj funkcjonalność w elemencie niestandardowym w swojej witrynie, a następnie odwołaj się do tego elementu z poziomu bloku.
• Odpowiadasz za kod i dane stron trzecich. Zanim przekażesz dane profilu do narzędzia strony trzeciej, upewnij się, że spełnia to Twoje zobowiązania dotyczące prywatności. Zespół pomocy technicznej Klaviyo nie może rozwiązywać problemów z Twoim niestandardowym elementem ani z narzędziem strony trzeciej, które za nim stoi.

Używaj niestandardowego HTML w blokach na stronie

Niestandardowy kod HTML działa w blokach treści na stronie tak samo jak na karcie Dla Ciebie. Tworzysz blok w tym samym edytorze bloków treści, używając pól HTML i CSS, a wszystko opisane w tym artykule ma zastosowanie, w tym znaczniki personalizacji, elementy niestandardowe i śledzenie kliknięć.

Pamiętaj o tych kwestiach, gdy Twój blok wyświetla się w Twoim sklepie:

• CSS w Twojej witrynie może wpływać na blok. Bloki onsite są renderowane bezpośrednio na Twojej stronie, więc style Twojej witryny mogą wpływać na to, jak wyglądają. Po opublikowaniu sprawdź blok na swojej stronie na żywo.
• Podgląd może różnić się od Twojej strony na żywo. Podgląd w edytorze nie może odtworzyć wszystkich stylów na Twojej stronie.
• Elementy niestandardowe muszą się wczytywać na każdej stronie, na której pojawia się blok. Upewnij się, że skrypt, który definiuje Twój element niestandardowy, jest wczytywany na każdej stronie, na której wyświetla się blok.

Użyj niestandardowego kodu HTML w blokach treści na stronie

Niestandardowy kod HTML działa też w blokach treści na stronie, które wyświetlają się bezpośrednio na stronach Twojego sklepu, zamiast wewnątrz wysuwanego panelu Klaviyo Customer Hub. Tworzysz je w tym samym edytorze bloków treści i obowiązują te same zasady: wybierz HTML, aby korzystać z oddzielnych pól HTML i CSS, używaj znaczników personalizacji dla danych profilu i odwołuj się do elementów niestandardowych dla każdej dodanej funkcji. Kilka rzeczy działa inaczej na stronie:

• CSS w Twojej witrynie ma większy wpływ. Blok renderuje się bezpośrednio na Twojej stronie, więc style Twojej witryny mogą wpływać na niego bardziej niż wewnątrz wysuwanego panelu Klaviyo Customer Hub. Przetestuj CSS na aktywnej stronie.
• Podgląd może nie być dokładnie taki sam jak Twoja strona. Użyj podglądu na stronie, aby sprawdzić swój blok, a następnie potwierdź, jak opublikowany blok wygląda na Twoim sklepie.
• Elementy niestandardowe muszą się wczytywać na każdej stronie, na której pojawia się blok. Jeśli odwołujesz się do elementu niestandardowego, upewnij się, że skrypt, który go definiuje, jest wczytywany na każdej stronie, na której wyświetla się Twój blok onsite.

Wyświetl podgląd i przetestuj swój blok

Podgląd aktualizuje się na bieżąco, gdy edytujesz HTML i CSS. Jeśli w Twoim kodzie wystąpi błąd, edytor wyświetli komunikat walidacji, abyś mógł/mogła go naprawić przed publikacją. Zanim opublikujesz:

• Użyj Podgląd jako, aby wybrać profil i porównać widoki Zalogowany i Wylogowany.
• Przetestuj na profilu, w którym brakuje danych używanych przez Twoje znaczniki personalizacji, aby potwierdzić, że wartości domyślne wyglądają poprawnie.
• Sprawdź blok w widoku mobilnym i desktopowym.

Śledź skuteczność bloku

Klaviyo śledzi każde kliknięcie niestandardowego bloku HTML jako zdarzenie Klaviyo Customer Hub kliknięto blok treści, używając wewnętrznej nazwy bloku, i raportuje je tak samo jak inne bloki treści. Klaviyo rejestruje, czy blok został kliknięty, a nie to, który konkretny link lub przycisk w jego obrębie został kliknięty.

Najlepsze praktyki

• Postaw na prostotę. Zacznij od domyślnego stylu i nadpisz tylko to, czego potrzebujesz.
• Chroń dane osobowe. Jeśli blok wyświetla się zalogowanym lub rozpoznanym kupującym, nie umieszczaj w nim wrażliwych danych osobowych. To Ty odpowiadasz za prywatność danych, które dodajesz do bloków niestandardowych.
• Zawsze ustawiaj wartości domyślne. Anonimowi odwiedzający oraz profile z brakującymi danymi nadal powinny widzieć kompletny blok.
• Projektuj z myślą o urządzeniach mobilnych. Większość wizyt w Klaviyo Customer Hub odbywa się na małych ekranach, więc najpierw testuj wąskie układy.
• Nazywaj bloki w jasny sposób. Nazwy wewnętrzne są używane w raportowaniu i nie można ich później zmienić.

Rozwiązywanie problemów

Mój blok nie publikuje się

Sprawdź pola HTML i CSS pod kątem komunikatów walidacji, popraw błędy i opublikuj ponownie. Jeśli twój blok opiera się na JavaScript, pamiętaj, że kod JavaScript wpisany w polu HTML jest usuwany i nie jest zapisywany. Przenieś tę funkcjonalność do elementu niestandardowego w swojej witrynie i odwołaj się do niego w swoim bloku.

Moje style się nie stosują

CSS jest ograniczony do bloku, więc twoje selektory muszą pasować do elementów w twoim własnym HTML. Sprawdź, czy w nazwach klas nie ma literówek. Twój CSS nie może stylizować niczego poza blokiem.

Personalizacja wyświetla pusty lub domyślny tekst

Dane profilu są wyświetlane tylko dla zalogowanych lub zidentyfikowanych kupujących. Potwierdź, że nazwa właściwości w Twoim znaczniku dokładnie odpowiada właściwościom profilu, w tym wielkości liter, i dodaj wartość domyślną.

Blok wygląda inaczej w mojej witrynie niż w podglądzie

CSS Twojej witryny może wpływać na to, jak renderuje się Klaviyo Customer Hub, zwłaszcza w przypadku bloków onsite, które wyświetlają się bezpośrednio na Twojej stronie. Sprawdź opublikowany blok na swojej aktywnej stronie i w razie potrzeby dostosuj CSS.

Mój niestandardowy element jest pusty lub się nie wyświetla

Element renderuje się tylko na stronach, na których Twoja witryna załadowała skrypt, który go definiuje. Potwierdź, że skrypt ładuje się na każdej stronie, na której wyświetla się blok, i sprawdź, czy nazwa znacznika w Twoim HTML pasuje do nazwy zarejestrowanej przez Twojego dewelopera. Jeśli zamiast tego widzisz swoją zawartość zastępczą, element nie jest zdefiniowany na tej stronie.

Potrzebuję pomocy w napisaniu kodu

Zespół pomocy Klaviyo nie może pisać ani debugować dla Ciebie niestandardowego HTML-a i CSS-a. Jeśli potrzebujesz pomocy, skorzystaj ze wsparcia dewelopera lub partnera Klaviyo.