Czy warto używać AI do generowania HTML emaili? Przetestowaliśmy 3 narzędzia, by to sprawdzić

Skoro w Niestandardowym edytorze HTML od MailerLite możesz wysyłać emaile oparte na kodzie, pojawia się pokusa: wygenerować email jednym promptem i od razu go wysłać.

Ale czy warto to robić? Przetestowaliśmy HTML emaile wygenerowane przez Gemini, Claude'a i ChatGPT, żeby to sprawdzić.

Wyniki naszych testów początkowo wyglądały obiecująco – projekty prezentowały się dobrze, a w podglądzie nie widać było żadnych oczywistych błędów.

Jednak po dokładniejszym testowaniu w wielu skrzynkach pocztowych nie możemy polecić generowania kodu HTML emaili przez chatboty AI osobom, które nie znają standardów HTML stosowanych w email marketingu.

Były ku temu dwa główne powody. Po pierwsze, wszystkie wygenerowane wiadomości zawierały błędy, przez które nie wyświetlały się prawidłowo w każdej skrzynce pocztowej.

To wskazuje na największy problem z generowaniem kodu HTML emaili – każda skrzynka renderuje wiadomości inaczej. Nasz developer Mantas wyjaśnił, na czym polega ten problem i jak radzą sobie z nim kreatory drag & drop:

Drugi powód jest taki, że bez rozbudowanych testów nigdy nie wiesz dokładnie, co zawiera, a czego nie uwzględnia wygenerowany kod HTML. Odkryliśmy ukryte preheadery, emaile wygenerowane bez adresów i linki HTTP zamiast HTTPS. Choć te problemy nie zawsze kończą się poważnymi konsekwencjami, brak pewności co do zawartości kodu to ryzyko, którego lepiej unikać.

Jedynym wyjątkiem jest sytuacja, gdy znasz standardy HTML stosowane w emailach. Wtedy możesz generować projekty za pomocą AI, a następnie samodzielnie poprawiać błędy zawarte w wygenerowanym kodzie HTML emaila.

Zbudowaliśmy kod HTML emaili przy użyciu trzech głównych narzędzi AI: Gemini, ChatGPT i Claude'a. Dla każdego emaila dostarczyliśmy tę samą treść, linki i ten sam prompt.

Nie był to test zdolności AI do stworzenia idealnego kodu HTML emaila za pierwszym razem. Chcieliśmy dać im jak najlepszą szansę na sukces, dlatego testowaliśmy różne wersje poleceń, aż byliśmy zadowoleni z efektu.

Ostateczny prompt zawierał mnóstwo kontekstu: URL-e do linków, wskazówki dotyczące projektu dla każdej sekcji, zmienne do wypisania się, dane dotyczące zgodności z przepisami, style marki i copy. Wszystko, czego narzędzie AI mogłoby potrzebować (gdy pomijaliśmy te informacje we wcześniejszych testach, wynik był znacznie mniej użyteczny).

Gdy narzędzie AI stworzyło kod HTML emaila, sprawdzaliśmy podgląd pod kątem problemów wizualnych, które marketer bez wiedzy o kodowaniu byłby w stanie zauważyć. Jeśli jakieś były, prosiliśmy AI o ich poprawienie.

Następnie testowaliśmy email na trzy sposoby:

• Dodając kod HTML do edytora HTML MailerLite i sprawdzając podgląd

• Wyświetlając w Gmailu i Outlooku na desktopie i urządzeniu mobilnym

• Prosząc ekspertów o sprawdzenie kodu HTML emaila pod kątem innych problemów

Oto wyniki!

Każde z narzędzi AI stworzyło email, który wyglądał dobrze. Wszystkie poprawnie dodały tekst i treści, o które prosiliśmy, oraz zastosowały się do podanych wytycznych dotyczących stylu marki.

Pojawiły się drobne problemy – jeden z emaili używał ciemnych ikon na czarnym tle, ale wystarczył jeden dodatkowy prompt, żeby to poprawić.

Oto email wygenerowany przez Claude'a. Poprawnie zastosował zaproponowane przez nas obrazy, copy i style.

A oto szablon emaila, na którym się wzorował.

Chociaż wygenerowany kod HTML emaila jest dobry, w jednym miejscu kreator drag & drop wypadł wyraźnie lepiej.

Email Claude'a użył znaków Unicode w sekcji korzyści na końcu – zapewne dlatego, że narzędzia AI nie mają dostępu do biblioteki ikon.

Wyglądają jednak mniej atrakcyjnie niż ikony obrazkowe w szablonie emaila i mogą powodować niespójności podczas wyświetlania w różnych programach pocztowych.

Email wyglądający dobrze jest bezużyteczny, jeśli nie działa. Na szczęście każdy z emaili zawierał wszystkie linki, a także zmienne do wypisania się, przekazania dalej i wyświetlenia w przeglądarce, które uwzględniliśmy w poleceniu.

Był jednak jeden problem z kodem HTML emaila Claude'a. Dodając link, użył wersji URL z http:// zamiast https://.

To może brzmieć jak drobiazg, ale wersja http:// to niezabezpieczona wersja linku URL. Używanie jej w kodzie HTML emaila może zwiększyć ryzyko, że wiadomość wyzwoli ostrzeżenia bezpieczeństwa.

Rozwiązanie jest proste: zawsze podawaj pełny adres z https://, nie tylko domenę.

Kod HTML emaila wygenerowany przez ChatGPT wyglądał świetnie w edytorze HTML MailerLite i na desktopie, ale miał problem na urządzeniach mobilnych.

Sekcja korzyści na dole emaila była wyśrodkowana lekko nieprawidłowo w mobilnej aplikacji Outlook, a w mobilnym Gmailu całkowicie się rozjechała. Separator pojawił się obok bloku, podczas gdy powinien być pod nim lub całkowicie ukryty.

Sugeruje to problem z konfiguracją szerokości tabeli w wygenerowanym kodzie.

Kod HTML emaila Claude'a też miał pewne problemy z wyrównaniem, choć nie tak poważne jak w przypadku ChatGPT.

Problem polegał na tym, że pierwszy zestaw przycisków i sekcja korzyści na dole były lekko przesunięte podczas wyświetlania w mobilnej aplikacji Outlook. Obie sekcje były niewyśrodkowane, przez co email nie wyglądał profesjonalnie.

Kod HTML emaila Gemini zawierał ciemne tło. Niestety Outlook i Gmail na urządzeniach mobilnych zignorowały to i zamiast tego zastosowały zwykłe białe tło.

Na szczęście nie wywołało to poważnego problemu, bo białe tło wyglądało akceptowalnie. Oznacza to jednak, że email nie był spójny między przeglądarkami. Jeżeli kolor tła jest dla Ciebie istotnym elementem wizualnym projektu, nie zostałby odpowiednio pokazany.

Podczas pierwszego testu nie uwzględniliśmy żadnego tekstu preheadera w prompcie. Efekt był taki, że Claude i Gemini samodzielnie wymyśliły własny tekst.

Nie był to ogromny problem, bo tekst pasował do emaila. Podkreśla jednak fakt, że nigdy nie wiesz dokładnie, co zawiera wygenerowany kod HTML emaila – szczególnie że tekst preheadera (lub jego brak) zobaczysz dopiero wtedy, gdy email trafi do skrzynki podczas testowania.

W drugim zestawie emaili uwzględniliśmy tekst preheadera w prompcie. Wszystkie trzy narzędzia AI poprawnie go dodały, choć ani ChatGPT, ani Gemini nie wyizolowały tego tekstu. Oznaczało to, że program pocztowy zaciągał tekst otwierający emaila, żeby wypełnić miejsce.

To znowu nie jest ogromny problem, ale czystszym rozwiązaniem jest dodanie do kodu HTML instrukcji, żeby po określonym tekście preheadera nic się nie wyświetlało.

Ponieważ narzędzia AI nie mają dostępu do biblioteki ikon, wszystkie zastosowały obejścia, żeby dodać element wizualny do sekcji korzyści. Gemini wpadło na eleganckie rozwiązanie – zapis dużymi literami. Claude użył ikon Unicode, a ChatGPT emoji.

Te dwa obejścia mogą w rzadkich przypadkach powodować niespójne renderowanie kodu HTML emaila. Choć w żadnym z testowanych programów pocztowych nie pojawił się problem, użycie ikony jako obrazka w szablonie emaila zwiększyłoby prawdopodobieństwo spójnego wyświetlania we wszystkich skrzynkach.

Żeby ikony działały prawidłowo, trzeba byłoby hostować obraz lub użyć obrazka ikony, który jest już dostępny online, a następnie podlinkować go w kodzie HTML emaila. To kolejne miejsce, gdzie kreator drag & drop może pomóc – MailerLite daje bezpośredni dostęp do Biblioteki plików, co ułatwia dodawanie takich obrazów do szablonu emaila.

Mimo że narzędzia AI wygenerowały całkiem przyzwoicie wyglądające emaile, kod HTML każdego z nich zawierał błędy podczas wyświetlania w skrzynce pocztowej. Mając to na uwadze, zalecamy zastanowić się dwa razy przed wysyłaniem emaili z kodem HTML wygenerowanym przez AI.

Oto dlaczego:

1. Nie wiesz dokładnie, co wysyłasz

To kluczowy argument. Nawet przy rozbudowanych testach nigdy nie masz pewności co do jakości wysyłanego kodu, jeśli go nie rozumiesz.

Po prostu nie ma sposobu, żeby mieć pewność, że kod HTML emaila, który wysyłasz, jest dobry. A nawet drobne problemy mogą powodować poważne konsekwencje – ważne treści mogą się nie wyświetlać prawidłowo, a zły kod HTML może zwiększyć szanse, że emaile trafią do spamu.

Wysyłanie emaila z kodem HTML wygenerowanym przez AI to niepotrzebne ryzyko, które może negatywnie wpłynąć na skuteczność email marketingu, a potencjalnie nawet na reputację firmy.

Dlatego, jeśli nie masz wiedzy z zakresu HTML, polecamy Ci trzymać się wizualnych edytorów, takich jak kreator drag & drop i prosty edytor MailerLite. Z naszego narzędzia korzystają setki tysięcy firm do wysyłania emaili każdego dnia, a eksperci przez lata je dopracowywali, żeby zredukować niespójności w renderowaniu kodu HTML do minimum.

2. AI nie sygnalizuje braków w zgodności z przepisami

W naszych początkowych eksperymentach prosiliśmy narzędzia AI o tworzenie kodu HTML emaili z krótszym promptem.

Wszystkie trzy narzędzia AI wygenerowały emaile bez adresu firmy – to ogromny problem, ponieważ zgodnie z przepisami antyspamowymi, w tym RODO, musisz podać adres, żeby email był zgodny z prawem. Brak adresu zwiększa prawdopodobieństwo trafienia do spamu, a do tego możesz narazić się na konsekwencje prawne.

Trzeba przyznać, że nie uwzględniliśmy adresu w poleceniu, więc rozumiemy, dlaczego AI go nie dodało. I gdy go dodaliśmy – zawsze był uwzględniany.

Ale narzędzie AI nie zwróciło uwagi, że brak adresu jest problemem. Zamiast tego pewnie dostarczyło gotowy kod HTML emaila, gotowy do wysyłki. Gdybyśmy nie znali tej zasady, wysłalibyśmy email bez zastanowienia.

Porównaj to z tym, co dzieje się w kreatorze drag & drop: sekcje wymagane do zachowania zgodności z przepisami – takie jak adres i linki do wypisania się – są dodawane do szablonu emaila automatycznie, więc pozostajesz w zgodzie z przepisami niezależnie od tego, czy znasz tę zasadę.

3. Testowanie i promptowanie kodu HTML emaila zajmuje dużo czasu

Jeśli chcesz, żeby wygenerowany kod HTML emaila był przyzwoity, musisz napisać niezwykle szczegółowy prompt. W naszym zawarliśmy copy, style marki, URL-e do obrazów, adres, zmienne do wypisania się, URL-e ofert, tekst preheadera i ogólne wskazówki projektowe dla każdego bloku treści.

Zebranie tego wszystkiego zajęło sporo czasu. A gdy kod HTML emaila jest już gotowy, musisz poświęcić jeszcze więcej czasu na testowanie w różnych programach pocztowych i urządzeniach.

Biorąc to pod uwagę, oszczędność czasu przy tworzeniu emaila z kodem HTML generowanym przez AI w porównaniu z kreatorem drag & drop jest minimalna.

To, że nie warto generować kodu HTML emaili przez AI, nie oznacza, że ich tworzenie musi być czasochłonne.

Oto kilka wskazówek, jak przyspieszyć ten proces.

Duplikuj wysłane wiadomości lub używaj szablonów emaili

Tworzenie szablonu emaila lub duplikowanie poprzednich wiadomości oznacza, że zaczynasz projektowanie z gotowym emailem dopasowanym do marki. Możesz zachować ten sam nagłówek i stopkę i skupić się tylko na edycji głównej treści.

Możesz też wybrać gotowy szablon emaila i dostosować go do swoich potrzeb.

Twórz szablony ważnych sekcji

Możesz tworzyć szablony dla różnych sekcji używanych w emailach. Następnie możesz je wciągać do wiadomości zawsze gdy są potrzebne.

W MailerLite sami dużo korzystamy z tej funkcji. Na przykład stworzyliśmy blok promujący naszą wyprzedaż, który mogliśmy łatwo wciągać do każdego emaila, gdzie chcieliśmy wspomnieć o ofercie. Mamy też bloki dla podpisów emailowych, udostępniania wpisów blogowych, ankiet, integracji i nie tylko.

Korzystaj z gotowych bloków

Kreator drag & drop zawiera mnóstwo gotowych bloków na różne okazje. MailerLite ma bloki dla produktów, CTA, nagłówków, stopek, podpisów emailowych, liczników czasu, galerii, kuponów, postów społecznościowych i nie tylko.

Żeby dodać jeden z nich do szablonu emaila, wystarczy przeciągnąć go na miejsce, dodać treść i dostosować projekt.

Ustaw style marki

MailerLite pozwala ustawiać Style marki bezpośrednio w kreatorze drag & drop. Oznacza to, że każdy dodawany blok automatycznie używa wybranych kolorów marki, więc nie musisz długo dostosowywać nowych bloków w szablonie emaila. 

Co więcej, jeśli Style marki nie są jeszcze skonfigurowane, możesz je stworzyć w kilka sekund. Wystarczy dodać link do swojej strony, a nasze narzędzie wykryje kolory i stworzy przewodnik po stylu marki.

Używaj wbudowanych narzędzi AI

MailerLite ma narzędzia AI do tworzenia treści emaili i tematów wiadomości – to właśnie tu AI naprawdę się sprawdza. Szczególnie skuteczna jest funkcja sugestii tematów – analizuje treść emaila i automatycznie sugeruje tematy wiadomości, które możesz dodać jednym kliknięciem. To zupełnie inny przypadek użycia niż generowanie kodu HTML emaila – i znacznie bardziej niezawodny.