Przesyłanie e-maili do Klaviyo

Emailify ma wbudowaną integrację z Klaviyo, która pozwala przesyłać e-maile HTML z wtyczki do Figmy prosto do szablonów Klaviyo.

Poradnik wideo: przesyłanie e-maili do Klaviyo

Ten film pokazuje, jak przesyłać e-maile HTML z wtyczki Emailify do Figmy na platformę Klaviyo.

Jeśli w akapitach tekstu potrzebujesz linków z szablonów Klaviyo (na przykład {{ event.url }}), natywne pole linku w Figmie zablokuje je jako nieprawidłowe adresy URL. Możesz to obejść, używając specjalnego formatu linku Klaviyo w Emailify: https://klaviyo.invalid/?{{ event.url }}. Emailify umieści wtedy w wyeksportowanym HTML surową składnię szablonów Klaviyo.

W panelu eksportu Emailify wybierz z listy rozwijanej opcję Klaviyo, a potem wklej prawidłowy prywatny klucz API Klaviyo (zgodnie z poniższymi krokami):

  1. Zaloguj się do Klaviyo i przejdź do strony ustawień kluczy API Klaviyo.
  2. Kliknij przycisk Create Private API Key.
  3. Nadaj kluczowi nazwę (na przykład „Emailify API Key”) i zaznacz przycisk opcji Custom Key.
  4. Dla zakresu API Templates zaznacz przycisk opcji Read/Write Access (wszystkie pozostałe zakresy API możesz zostawić na No Access).
  5. Na ekranie potwierdzającym utworzenie klucza kliknij ikonę Copy w sekcji Your Private Key.
  6. Wklej skopiowany klucz API (powinien wyglądać mniej więcej tak: pk_b3338b071136f98817d2a0e0a9581137ee) we wtyczce Emailify.

Gdy wszystko będzie gotowe, kliknij przycisk Upload To Klaviyo, aby wyeksportować do HTML e-maile zaznaczone w Figmie i automatycznie przesłać je na stronę szablonów Klaviyo.

Jeśli Twój e-mail HTML ma mniej niż 102 kB, a mimo to Gmail przycina go po wysłaniu z Klaviyo, przyczyną jest włączone w Klaviyo śledzenie linków. Klaviyo automatycznie zamienia wtedy pierwotne adresy URL linków na znacznie dłuższe „adresy śledzące”, przez co wysyłany HTML jest większy. Aby temu zapobiec, możesz wyłączyć na swoim koncie Klaviyo ustawienie śledzenia linków/GA.

Aktualizowanie szablonów Klaviyo przesłanych z Emailify ​

Jeśli chcesz, aby Emailify automatycznie aktualizował ten sam szablon Klaviyo zamiast za każdym razem tworzyć nowy, włącz przełącznik Enable Updatable Templates w ustawieniach eksportu wtyczki, gdy wybrana jest opcja Klaviyo.

Po pierwszym udanym przesłaniu Emailify automatycznie dopisze wartość klaviyoTemplateId do nazwy ramki w Figmie i użyje zapisanego identyfikatora szablonu przy kolejnym przesłaniu tej samej ramki do Klaviyo.

Upewnij się, że przełącznik Enable Updatable Templates jest włączony, zanim prześlesz szablon po raz pierwszy. To właśnie pierwsze przesłanie zapisuje pierwotny identyfikator szablonu Klaviyo w nazwie ramki w Figmie na potrzeby kolejnych przesłań.

Aktualizowany jest tylko zapisany szablon w bibliotece szablonów Klaviyo. Jeśli szablon został już użyty w kampanii lub flow Klaviyo, Klaviyo tworzy jego kopię dla tej wiadomości, więc ponowne przesłanie z Emailify nie zastąpi automatycznie używanych kopii.

Użycie przesłanego szablonu Klaviyo w kampanii ​

  1. Utwórz nową kampanię e-mailową w Klaviyo.
  2. Kliknij nazwę nowego szablonu na karcie Email:saved na liście strony Templates.
  3. Kliknij przycisk Use template w wyskakującym oknie podglądu.
  4. Kliknij przycisk Save na stronie edytora kodu (ten krok jest ważny).
  5. Gdy pojawi się komunikat „Your changes have been saved.”, kliknij przycisk Back to Content.
  6. Zaplanuj kampanię e-mailową według potrzeb.

Testy A/B własnych szablonów HTML w Klaviyo ​

Klaviyo obsługuje testy A/B własnych e-maili HTML, ale przy tworzeniu testu automatycznie robi z wariantu B identyczną kopię wariantu A. Aby przetestować dwa różne projekty z Emailify:

  1. W Figmie nadaj obu ramkom Emailify czytelne nazwy, na przykład Summer Sale - Test A i Summer Sale - Test B. Emailify używa nazw ramek jako nazw zapisanych szablonów w Klaviyo.
  2. Prześlij obie ramki do Klaviyo jako osobne zapisane szablony.
  3. Utwórz kampanię Klaviyo z szablonu Test A, a potem kliknij Create A/B test nad tematem wiadomości. Klaviyo utworzy wariant B jako kopię wariantu A.
  4. W innej karcie przeglądarki otwórz zapisany szablon Test B w sekcji Content > Templates, otwórz jego edytor kodu i skopiuj cały HTML.
  5. Wróć do kampanii, otwórz wariant B, kliknij Edit, zastąp skopiowany HTML szablonu Test A kodem HTML szablonu Test B i zapisz zmiany.
  6. Nadaj obu wariantom opisowe nazwy, a potem obejrzyj podgląd każdej wersji lub wyślij ją testowo i sprawdź wersję tekstową, zanim zaplanujesz kampanię.

Jeśli testujesz projekt lub treść e-maila, zostaw ten sam temat i dane nadawcy, aby zmieniała się tylko jedna zmienna.

Więcej o konfigurowaniu testu i wyborze metryki zwycięskiego wariantu przeczytasz w przewodniku Klaviyo po testach A/B.

Edytowalny tekst i obrazy w Klaviyo (opcjonalnie) ​

WAŻNE: nowy edytor Klaviyo automatycznie dodaje odstępy do edytowalnych bloków tekstu i przycisków. Niestety, aby e-mail wyglądał jak pierwotny projekt w Figmie, musisz ręcznie ustawić każdy z nich z powrotem na „0”, korzystając z filmu w sekcji Usuwanie automatycznych odstępów Klaviyo w edytowalnych kampaniach poniżej.

Jeśli chcesz, aby bloki treści dało się edytować po przesłaniu szablonu do Klaviyo, włącz przełącznik Editable Content w opcjach eksportu Emailify, a potem wykonaj w Klaviyo te kroki:

  1. Utwórz nową kampanię e-mailową w Klaviyo.
  2. W kroku Content kampanii kliknij opcję Drag and Drop.
  3. Kliknij kartę My Templates, a potem nowy szablon.
  4. Kliknij przycisk Save, a potem Back to Content.
  5. Kliknij przycisk Edit Email.

Usuwanie automatycznych odstępów Klaviyo w edytowalnych kampaniach ​

Klaviyo zaktualizowało swój edytor i od 6 czerwca 2023 roku wymusza go dla wszystkich szablonów. W efekcie, jeśli eksportujesz e-maile HTML z włączonym w Emailify przełącznikiem Editable Content, Klaviyo domyślnie dodaje wokół każdego elementu tekstowego około 18px dodatkowego odstępu – jako wbudowany atrybut style nowego elementu <td>, który wstrzykuje do HTML edytowalnego szablonu.

Włączenie w Emailify przełącznika Force the padding added by Klaviyo's new editor to be 0px automatycznie dodaje CSS, który usuwa ten odstęp we wszystkich klientach mobilnych i w klientach desktopowych innych niż Outlook, takich jak Gmail. Outlook nadal jednak wyświetli ten odstęp, chyba że podczas edycji e-maila w kampanii w edytorze Klaviyo ręcznie zmienisz na „0” każdą wartość „Padding” edytowalnych bloków tekstu w szablonie.

Dodawanie dynamicznego feedu produktów do e-maili Klaviyo ​

Poradnik wideo: dodawanie dynamicznego feedu produktów do e-maili Klaviyo

Ten film pokazuje, jak dodać własne feedy produktów Klaviyo do własnych szablonów HTML za pomocą wtyczki Emailify do Figmy.

Aby dodać dynamiczny feed produktów Klaviyo do szablonu e-maila HTML w Emailify, możesz użyć jednego z gotowych komponentów na karcie Ecomm wśród kart kategorii wtyczki Emailify.

Po dodaniu komponentu do ramki Emailify zamień w nim nazwę YOUR_KLAVIYO_PRODUCT_FEED_NAME_HERE na nazwę feedu produktów, który utworzono na Twoim koncie Klaviyo.

Aby używać w Klaviyo własnych feedów produktów w HTML, musisz też włączyć przełącznik Editable Content w opcjach eksportu Emailify. Dzięki temu po przesłaniu e-maila do szablonów Klaviyo przeciągniesz do niego domyślny blok „Product” z paska bocznego „Blocks” w edytorze Klaviyo.

Warto obejrzeć powyższy poradnik wideo, aby zobaczyć cały proces krok po kroku i upewnić się, że szablon Klaviyo jest poprawnie skonfigurowany. Jeśli pominiesz któryś krok, dane z feedu produktów mogą się nie wyświetlić.

Jeśli potrzebujesz pomocy, zwróć się do programisty w swoim zespole lub do zespołu wsparcia Klaviyo. My (Emailify) nie możemy zapewnić wsparcia technicznego ani pomóc we własnych wdrożeniach tej zaawansowanej funkcji szablonów Klaviyo.

Ręczne dodawanie edytowalnego obszaru do przeciągnięcia feedu produktów Klaviyo ​

Od 2025 roku wygląda na to, że ten edytowalny obszar trzeba też ręcznie dodać do szablonu HTML najpierw we własnym edytorze kodu szablonów Klaviyo i ponownie zapisać szablon, zanim użyjesz go w kampanii. Tylko wtedy dynamiczny feed produktów wczyta dane:

<table>
  <tr>
    <td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
      <div class="klaviyo-block klaviyo-text-block">
        Drag and Drop your Klaviyo Product Feed Block Here <br/>
        NOTE: Remove this text element in Klaviyo's editor when you're done! <br/>
        Video Tutorial: <a href="https://www.youtube.com/watch?v=PaRSIxVLYlo" target="_blank">https://www.youtube.com/watch?v=PaRSIxVLYlo</a>
      </div>
    </td>
  </tr>
</table>

Wklej go w edytorze szablonów Klaviyo w linii nad <div dir="auto" lang="en"... w szablonie HTML. Kod pojawi się wtedy na górze szablonu.

Dodawanie feedu produktów z porzuconego koszyka do e-maili Klaviyo ​

Poradnik wideo: tworzenie w Figmie szablonu e-maila do flow porzuconego koszyka w Klaviyo

Ten film pokazuje, jak dodać własne flow porzuconego koszyka Klaviyo do własnych szablonów HTML za pomocą wtyczki Emailify do Figmy.

Aby dodać do szablonu e-maila HTML w Emailify dynamiczny blok flow porzuconego koszyka Klaviyo, możesz użyć jednego z gotowych komponentów na karcie Ecomm wśród kart kategorii wtyczki Emailify. Dostępne są warianty dla:

  • Shopify
  • WooCommerce
  • Magento 1
  • Magento 2
  • BigCommerce

Emailify automatycznie utworzy warstwy zawierające zmienne danych zdarzeń produktowych Klaviyo dla każdej platformy. Pamiętaj, że aby to działało, nadal musisz skonfigurować flow porzuconego koszyka w Klaviyo.

Jeśli potrzebujesz pomocy, zwróć się do programisty w swoim zespole lub do zespołu wsparcia Klaviyo. My (Emailify) nie możemy zapewnić wsparcia technicznego ani pomóc we własnych wdrożeniach tej zaawansowanej funkcji szablonów Klaviyo.