Jak użyć bloku tabeli w e-mailu
Czego się dowiesz?
Dowiedz się, jak używać bloku tabeli w wiadomości e-mail. Te bloki mogą wyświetlać obrazy i tekst obok siebie. Bloki tabeli mogą też być dynamiczne, iterując po danych, aby spersonalizować wiadomość e-mail dla każdego odbiorcy.
Omówienie bloków tabel
Istnieją 2 typy bloków tabel:
- Statyczna
Ten typ bloku tabeli wyświetla dokładnie taką liczbę wierszy i kolumn, jaką wybierzesz. Każdy odbiorca widzi ten sam układ tabeli, ale treść może się różnić, jeśli użyjesz znaczników personalizacji, zdarzeń, katalogu lub innych znaczników. - Dynamiczne
Te bloki tabel umożliwiają iterowanie po liście danych (np. liście produktów w sekwencji porzuconego koszyka zakupowego lub sekwencji potwierdzenia zamówienia). Liczba wierszy jest określana przez liczbę pozycji na liście: jeśli ktoś zamówi 1 produkt, będzie mieć 1 wiersz; jeśli zamówi 5 produktów, będzie mieć 5 wierszy.
Najczęstszym zastosowaniem dynamicznego bloku tabeli jest wyróżnianie produktów w wiadomości dotyczącej porzuconego koszyka zakupowego. W tym celu używany jest dynamiczny blok do wyświetlania wielu wierszy z obrazami, nazwami produktów i cenami każdego porzuconego elementu.
Kiedy używać bloków tabeli
Blok tabeli to jeden z kilku sposobów umieszczenia obok siebie 2 lub większej liczby elementów treści. Alternatywą są bloki podziału i kolumny.
Dowiedz się więcej o różnych opcjach umieszczania treści obok siebie w poniższej tabeli.
Układ treści | Liczba kolumn | Opcje szerokości | Dozwolone typy treści | Czy kolumny mogą układać się jedna pod drugą w widoku mobilnym? |
Blok podziału | 2 | Precyzyjna kontrola (Użyj Style > Układ, a następnie Szerokość kol. 1 i Szerokość kol. 2) | Tekst lub obrazy | Tak |
Kolumny | 1–4 | Ograniczony wybór | Dowolny typ bloku treści (np. blok tekstowy, blok obrazu, blok cytatu z recenzji) | Tak |
Blok tabeli | Dowolna liczba | Precyzyjna kontrola (Użyj Szerokość kolumny > Ręcznie) | Tekst lub obrazy | Nie |
Tabele mogą stanowić wyzwanie pod kątem dostępności, ponieważ czytniki ekranu mają trudności z ich interpretacją.
Statyczne bloki tabeli
Słowo „statyczny” oznacza tutaj po prostu, że treść i liczba wierszy w tabeli pozostają takie same dla każdego odbiorcy. Jedyna sytuacja, w której treść się zmienia, to taka, gdy dodasz dynamiczną treść, np. personalizację, datę i znaczniki katalogu, w statycznym bloku tabeli.
Przypadki użycia statycznych bloków tabeli
Użyj statycznego bloku tabeli, aby:
- Wyświetl konkretny element, np. na potrzeby sprzedaży błyskawicznej lub premiery produktu.
- Zawsze uwzględniaj taką samą liczbę elementów (np. pokaż ostatnio oglądany element w wiadomości sekwencji porzuconego przeglądania).
- Utwórz wiadomość sekwencji, w której dane zdarzenia zawierają tylko 1 element, który obejmuje:
- Sekwencje porzuconego koszyka zakupowego (wyzwalacz dodania do koszyka)
- Sekwencje porzuconego przeglądania
- Sekwencje „Znów dostępne” i „Spadek ceny”
- Umieść tekst statyczny i obrazy obok siebie.
Jak utworzyć statyczny blok tabeli
- Przejdź do e-maila (np. e-maila z kampanii, szablonu lub e-maila sekwencji).
- W menu Bloki przeciągnij blok Tabela na obszar roboczy.
- Otwórz menu Style dla bloku. Zwróć uwagę, że opcja Statyczny jest już wybrana, ponieważ jest to ustawienie domyślne dla bloków tabeli.
- W sekcji Kolumny kliknij Dodaj kolumnę, aby dodać kolejne kolumny.
- W sekcji Wiersze kliknij Dodaj wiersz, aby dodać dodatkowe wiersze.
- Wróć do karty Treści bloku.
- W obszarze Selektor komórek wybierz komórkę, którą chcesz edytować.
- Wybierz Tekst lub Obraz dla wybranej komórki w sekcji Zawartość komórki.
- W przypadku komórki tekstowej kliknij komórkę dwukrotnie w obszarze roboczym e-maila i wpisz swój tekst. W przypadku komórki obrazu dodaj obraz w sekcji Obraz komórki. Powtórz te kroki dla każdej komórki.
- Gdy dodasz treść do każdej komórki, kliknij strzałkę wstecz, aby wrócić do głównego menu Treść i kontynuować tworzenie e-maila.
- Kliknij Podgląd, aby sprawdzić tabelę na komputerze i na urządzeniu mobilnym.
Dynamiczne bloki tabeli
Jeśli Twoja platforma e-commerce ma standardowe integracje z Klaviyo, nie musisz tworzyć dynamicznego bloku tabeli. Zamiast tego użyj bloków tabel dostępnych w domyślnych sekwencjach porzuconego koszyka zakupowego lub złożenia zamówienia, które znajdziesz w bibliotece sekwencji.
Dynamiczne bloki tabel iterują po zbiorze danych, aby powtarzać treści na podstawie liczby wpisów w tym zbiorze. Blok iteruje, dopóki nie dotrze do końca listy. Na przykład można wyświetlić dokładną liczbę produktów w czyimś koszyku.
Aby użyć bloku dynamicznego, musisz odwołać się do danych sformatowanych jako lista zagnieżdżona, w której każdy wpis na liście ma ten sam format. Najczęstszy przypadek użycia to informacje o produkcie znalezione w zdarzeniu wyzwalającym sekwencji (np. rozpoczęcie realizacji zakupu, złożenie zamówienia), ale możesz też użyć kanału internetowego, aby wyświetlić wpisy na blogu, lub odwołać się do danych profilu sformatowanych jako lista.
Elementy bloku tabeli dynamicznej
Utworzenie dynamicznego bloku treści wymaga 3 elementów:
- Kolekcja wierszy
Lokalizacja danych, po których należy iterować. Podczas przeglądania danych źródłowych (np. elementów w metadanych zdarzenia Started Checkout) jest to część odpowiednich znaczników szablonu, która jest taka sama dla każdego znacznika. - Alias wiersza
Krótka nazwa bieżącego elementu, gdy tabela iteruje po Twoim zbiorze danych. Użyj jednego słowa, np. element, i używaj tego samego aliasu w znacznikach dla powtarzającej się treści. - Treści dynamiczne
Treści, które będą wyświetlane w każdym wierszu. Na przykład możesz chcieć wyświetlać obraz, nazwę produktu, cenę i informacje o wariancie dla każdego elementu pozostawionego w koszyku.
Przykłady zastosowań bloków tabel dynamicznych
Użyj bloku tabeli dynamicznej, jeśli dynamicznie odwołujesz się do listy danych i każdy wpis na liście jest sformatowany w ten sam sposób. Obejmuje to:
- Sekwencje porzuconego koszyka zakupowego (wyzwalacz rozpoczęcia realizacji zakupu)
- Sekwencje potwierdzenia zamówienia
- Sekwencje up-sellingu lub cross-sellingu (sprzedaż krzyżowa)
Jak utworzyć blok tabeli dynamicznej
Wszystkie znaczniki użyte w tych instrukcjach są przykładami i prawdopodobnie różnią się od prawidłowych znaczników dla Twojego konta. Właściwe znaczniki dla Twojej wiadomości zależą od źródła i struktury Twoich danych (często jest to platforma e-commerce), co w przypadku wielu kont Klaviyo wygląda inaczej.
Ta sekcja omawia ogólnie dynamiczne bloki tabel. Aby uzyskać bardziej szczegółowe instrukcje dotyczące tego procesu, dowiedz się jak tworzyć dynamiczne bloki w e-mailu sekwencji.
- Przejdź do edytora wiadomości e-mail. Jeśli używasz danych zdarzeń (np. szczegółów porzuconego koszyka zakupowego), przejdź do wiadomości e-mail w sekwencji wyzwalanej przez odpowiednie zdarzenie.
- Jeśli używasz danych zdarzeń, kliknij Podgląd i wybierz ostatnie zdarzenie dla wyzwalacza sekwencji, które zawiera elementy, które chcesz wyświetlić. W sekcji Właściwości zdarzenia kliknij właściwości, których potrzebujesz, aby skopiować ich znaczniki, a następnie zamknij podgląd, aby wrócić do edytora.
- W menu Bloki przeciągnij blok Tabela na obszar roboczy.
- Otwórz menu Style dla bloku i wybierz Dynamiczny.
- Ustaw swoją kolekcję wierszy: wpisz ścieżkę do listy, którą chcesz powtórzyć, bez nawiasów klamrowych. Pomiń kropkę i numer elementu bezpośrednio po nazwie listy.
- Na przykład, jeśli {{ event.products.0.imageURL }} to znacznik obrazu pierwszego elementu, a {{ event.products.1.name }} to znacznik nazwy drugiego elementu, to kolekcją wierszy powinna być event.products.
- Kolekcja wierszy prawie zawsze będzie częścią znacznika poprzedzającą pierwszą liczbę (np. event.extra.line_items jeśli pełny znacznik to {{ event.extra.line_items.0.product.name }}).
- Ustaw alias wiersza jako item.
- Wróć do karty Treści bloku.
- Dodaj zawartość do każdej komórki tabeli. Zazwyczaj komórka po lewej stronie zawiera obraz, a komórka po prawej stronie to tekst zawierający dynamiczne znaczniki z informacjami o produkcie. Kliknij dwukrotnie komórkę tekstową w edytorze wiadomości e-mail, aby edytować jej tekst. W przypadku komórki z obrazem użyj znacznika adresu URL obrazu jako dynamicznego obrazu w sekcji Cell image.
- W każdym znaczniku dla elementu w Twojej kolekcji wierszy zastąp ścieżkę kolekcji oraz następującą po niej kropkę i numer elementu aliasem wiersza (np.
item). Zachowaj pozostałą część ścieżki właściwości oraz nawiasy klamrowe. Na przykład:- {{ event.extra.line_items.0.imageURL }} zmienia się w {{ item.imageURL }}
- {{ event.items.0.product.name }} zmienia się na {{ item.product.name }}
- Kliknij Podgląd, aby wyświetlić podgląd e-maila.
- Wybierz dane podglądu zawierające Twoją kolekcję wierszy(np. ostatnie zdarzenie Started Checkout dla wiadomości o porzuconym koszyku zakupowym). Sprawdź, czy obraz i szczegóły każdego elementu wyświetlają się poprawnie. Jeśli nie wyświetlają się żadne wiersze, sprawdź wybrane dane, Row collection, Row alias oraz znaczniki w komórkach.
Ten proces pozwala programistom i marketerom obeznanym z kodem tworzyć wysoce spersonalizowane treści. Jeśli nie masz w zespole programisty i nie czujesz się komfortowo, tworząc ten blok samodzielnie, rozważ skontaktowanie się z partnerem Klaviyo w celu uzyskania pomocy.
Dowiedz się więcej o tworzeniu sekwencji porzuconego koszyka zakupowego lub wykorzystaniu danych zdarzeń do personalizacji sekwencji e-mailowych i sekwencji SMS.
Jak działają dynamiczne bloki tabeli
Dynamiczne bloki tabel działają dokładnie tak samo jak pętla for w większości języków programowania.
- Kolekcja wierszy identyfikuje część danych do przejścia w pętli.
- Alias wiersza identyfikuje bieżący element w kolekcji wierszy.
- Każdy znacznik, który używa aliasu wiersza, będzie odwoływać się do właściwej linii w danych zdarzenia, w zależności od tego, w którym wierszu się znajduje.
Podczas renderowania e-maila Klaviyo przechodzi w pętli przez każdy element w zestawie danych. Za pierwszym razem alias wiersza jest zastępowany przez [row collection].0., co odnosi się do pierwszego elementu w zestawie danych. Za drugim razem alias wiersza jest zastępowany przez [row collection].1., co wskazuje na drugi element w zestawie danych. Ten proces jest następnie kontynuowany, aż nie pozostaną żadne elementy, i istnieje jeden wiersz dla każdego elementu w zestawie danych.
Dodatkowe źródła
- Jak wyświetlać produkty pionowo w wiadomościach e-mail
Dowiedz się, jak wyświetlać produkty w sekwencjach porzuconego koszyka zakupowego oraz potwierdzenia zamówienia pionowo (tj. z obrazem nad informacjami o produkcie, a nie obok).
- Customize and personalize emails using Django