Jak wysłać niestandardowy kod HTML za pomocą Gmaila

Opublikowany: 2024-03-30

Wiadomości e-mail w formacie HTML stały się kluczowym elementem współczesnego marketingu e-mailowego. Umożliwiają tworzenie atrakcyjnych wizualnie i interaktywnych wiadomości e-mail, dzięki czemu są one bardziej atrakcyjne i skuteczne. Mają kluczowe znaczenie dla firm, ponieważ mogą podkreślać produkty, promocje i markę w sposób, którego zwykły tekst po prostu nie może. Umożliwiają także lepsze śledzenie i analizy, pomagając zrozumieć, w jaki sposób odbiorcy korzystają z Twoich e-maili.

W przeszłości Gmail umożliwiał użytkownikom bezpośrednie wprowadzanie i edycję kodu HTML w edytorze poczty e-mail. Ta funkcja była preferowana przez tych, którzy chcieli personalizować i projektować swoje e-maile w szerokim zakresie. Jednak w celu zwiększenia bezpieczeństwa i uproszczenia obsługi Gmail podjął decyzję o usunięciu możliwości bezpośredniego wprowadzania kodu HTML w edytorze poczty e-mail.

Ta zmiana skłoniła użytkowników do zbadania alternatywnych metod wysyłania niestandardowych wiadomości e-mail w formacie HTML za pośrednictwem Gmaila, co omówimy w tym artykule.

Przejdź do odpowiedniej sekcji tutaj lub przeczytaj cały przewodnik:

  • Wysyłanie niestandardowych wiadomości e-mail w formacie HTML za pośrednictwem Gmaila
  • Kopiowanie wyrenderowanego kodu HTML bezpośrednio do Gmaila
  • Ograniczenia korzystania z niestandardowych szablonów HTML
  • Wiadomości e-mail w formacie zwykłego tekstu a wiadomości e-mail w formacie HTML
  • Wysyłaj spersonalizowane e-maile w formacie HTML za pomocą Mailmeteor!

Wysyłanie niestandardowych wiadomości e-mail w formacie HTML za pośrednictwem Gmaila

Gmail korzysta z edytora WYSIWYG (What You See Is What You Get), co oznacza, że ​​bezpośrednie wysyłanie nieprzetworzonego kodu HTML nie jest opłacalną opcją. Ponieważ odbiorca faktycznie zobaczy surowy kod HTML zamiast wyrenderowanego dokumentu.

Spójrz na przykład na ten próbny szablon wiadomości e-mail. Renderowany kod HTML w Gmailu

Był czas, kiedy można było zrobić coś takiego bezpośrednio w Gmailu, ale jeśli spróbujesz skopiować i wkleić kod HTML w Edytorze Gmaila, dzieje się tak: Zwykły tekst HTML w Gmailu

Ponieważ Gmail korzysta z edytora WYSIWYG, odbiorca otrzymuje dokładnie to, co widzisz tutaj, czyli wiadomość e-mail, która jest niczym innym jak kodem HTML zapisanym zwykłym tekstem: Kod HTML odbiorcy w Gmailu

Istnieje jednak praktyczne obejście tego problemu. Użytkownicy mogą kopiować i wklejać wyrenderowaną wiadomość e-mail w formacie HTML do edytora Gmaila, aby wysyłać niestandardowe wiadomości e-mail w formacie HTML. Ta metoda umożliwia tworzenie atrakcyjnych wizualnie, dostosowanych e-maili, pracując w ramach ograniczeń Gmaila.

Kopiowanie wyrenderowanego kodu HTML bezpośrednio do Gmaila

Ta metoda jest w rzeczywistości o wiele prostsza, niż się wydaje, wystarczy otworzyć szablon wiadomości e-mail w przeglądarce, a następnie skopiować i wkleić całą jego zawartość do edytora Gmaila. Oto, co musisz zrobić:

  1. Przygotuj swój kod HTML
    • Otwórz edytor tekstu, taki jak Notatnik (Windows) lub TextEdit (Mac).
    • Napisz lub wklej swój kod HTML do edytora tekstu. Kod ten może zawierać tekst, obrazy, łącza i formatowanie, podobnie jak standardowa strona internetowa, ale z pewnymi ograniczeniami, które omówimy później.
    • Zapisz plik z rozszerzeniem „.html”, np. „template.html”.
  2. Podgląd w przeglądarce internetowej
    • Kliknij dwukrotnie utworzony plik HTML, aby otworzyć go w domyślnej przeglądarce internetowej. Dzięki temu Twój e-mail będzie dokładnie taki, jaki będzie widoczny dla odbiorcy.
    • Jeśli chcesz, możesz wrócić do edytora tekstu i zmienić jego zawartość, pamiętaj tylko o zapisaniu pliku po zakończeniu zmian i odświeżeniu strony przeglądarki w celu aktualizacji zmian.
  3. Wybierz Wszystko i Kopiuj
    • W przeglądarce naciśnij klawisze Ctrl+A (Windows) lub Cmd+A (Mac), aby zaznaczyć całą zawartość wiadomości e-mail w formacie HTML.
    • Następnie naciśnij Ctrl+C (Windows) lub Cmd+C (Mac), aby skopiować wybraną zawartość. Możesz także kliknąć prawym przyciskiem myszy i wybrać z menu opcję Kopiuj.
  4. Wklej do Gmaila
    • Otwórz Gmaila i zacznij tworzyć nową wiadomość e-mail.
    • Kliknij treść wiadomości e-mail, w której chcesz wstawić treść wiadomości e-mail w formacie HTML. Nie możesz wstawić kodu HTML w temacie wiadomości, więc jedyną opcją jest treść wiadomości e-mail.
    • Teraz naciśnij Ctrl+V (Windows) lub Cmd+V (Mac), aby wkleić zawartość skopiowaną z przeglądarki. Możesz też kliknąć prawym przyciskiem myszy i wybrać z menu opcję Wklej.
    • E-mail w formacie HTML należy wkleić bezpośrednio do edytora Gmaila i powinien zostać wyświetlony tak, jak na obrazku poniżej. Wklej HTML w Gmailu
  5. Wyślij e-mail
    • Uzupełnij wiadomość e-mail tematem, odbiorcą i dodatkowym tekstem lub elementami.
    • Kliknij przycisk „Wyślij”, a Twój niestandardowy e-mail w formacie HTML zostanie dostarczony do odbiorcy.

Jeśli wszystko pójdzie dobrze, odbiorca otrzyma wiadomość e-mail wyrenderowaną idealnie tak, jak w utworzonym pliku .html. Zalecamy wysłanie wiadomości e-mail do siebie przed wysłaniem jej do docelowych odbiorców, aby upewnić się, że w kodzie HTML nie ma błędów.

Korzystanie z rozszerzenia przeglądarki HTML Editor

Dla użytkowników znających się na technologii, którzy chcą mieć większą kontrolę nad nieprzetworzonym kodem HTML swoich e-maili i nie czują się komfortowo podczas ręcznej edycji, opłacalnym rozwiązaniem jest użycie rozszerzenia edytora HTML.

Te rozszerzenia, powszechnie dostępne dla popularnych przeglądarek, takich jak Google Chrome, umożliwiają doświadczonym użytkownikom ręczne pisanie i edycję kodu HTML przed wysłaniem wiadomości e-mail przez Gmaila. Bezpłatny edytor HTML dla Gmaila firmy cloudHQ to jedna z najpopularniejszych opcji dla użytkowników przeglądarki Chrome.

Po prostu zainstaluj rozszerzenie i przejdź do Gmaila, aby uzyskać dostęp do edytora HTML na podzielonym ekranie, w którym możesz wprowadzać zmiany i przeglądać ich efekty na żywo, a wszystko to w zaciszu konta Gmail.

Ograniczenia korzystania z niestandardowych szablonów HTML

Niestety, nawet mając możliwość napisania własnego kodu HTML, istnieją ograniczenia, o których musisz wiedzieć przed rozpoczęciem tej podróży. Oto, co musisz wiedzieć:

Pożegnaj się z czcionkami!

Niestety Gmail nie umożliwia importowania niestandardowych czcionek internetowych do wiadomości e-mail w formacie HTML. Jesteś ograniczony do używania standardowych czcionek, co może ograniczyć Twoje wybory projektowe i możliwości promowania marki.

Jeśli musisz gdzieś użyć własnego brandingu, nie masz innego wyjścia, jak skorzystać z obrazów z zapisanym na nich tekstem. Ale nie można również wysłać tych obrazów jako części samego e-maila, co prowadzi nas do następnego punktu.

Obrazy muszą być hostowane publicznie

Nie możesz w wiadomości e-mail utworzyć linku do obrazu znajdującego się na Twoim komputerze i wysłać go innym. Może on pojawić się w Twojej lokalnej przeglądarce, ale w momencie dodania go do edytora Gmaila odmówi załadowania.

W naszym przykładowym szablonie wykorzystaliśmy obrazy z symbolu zastępczego i umieściliśmy kociaka, ponieważ oba są publicznie dostępne. Twoje zdjęcia muszą być również publicznie dostępne i przechowywane gdzieś w Internecie. Może to być Twoja własna witryna internetowa, publiczny folder na Dysku Google lub witryna do udostępniania zdjęć online.

Brak obsługi zewnętrznych arkuszy stylów

Zewnętrzne arkusze stylów nie będą działać w Twoim e-mailu. Jeśli znasz się na CSS, rozważ użycie osadzonego CSS i stylów wbudowanych, aby uzyskać pożądane formatowanie i styl swojej wiadomości e-mail.

To ograniczenie może zwiększyć złożoność procesu projektowania, ponieważ konieczne będzie uwzględnienie całej stylizacji bezpośrednio w kodzie HTML. Jednocześnie staraj się, aby Twoje style były tak proste, jak to możliwe, nigdy nie wiesz, jakiej przeglądarki lub aplikacji pocztowej używają Twoi odbiorcy, dlatego najlepiej trzymać się standardowych stylów CSS, aby zapewnić maksymalną kompatybilność.

Trzymaj się układów opartych na tabelach

Podczas gdy większość współczesnego kodu HTML wykorzystuje elementy <div> do układu i stylizacji, wiadomości e-mail nadal wykorzystują stare, dobre układy oparte na tabelach. Jeśli więc chcesz utworzyć jakiekolwiek elementy siatki lub ramki, będziesz musiał to zrobić przy użyciu różnych znaczników tabeli, takich jak <table> , <tr> i `<td>.

Dzieje się tak dlatego, że nie wszyscy korzystają z usług tego samego dostawcy usług poczty e-mail, więc nawet jeśli Gmail zacznie obsługiwać nową funkcję, niezliczona liczba innych będzie nadal pozostawać w tyle. Nieprawidłowo wygenerowany e-mail powoduje złe pierwsze wrażenie, dlatego najlepiej trzymać się tego, co działa dla wszystkich i skupić się na faktycznej treści danego e-maila.

Wiadomości e-mail w formacie zwykłego tekstu a wiadomości e-mail w formacie HTML

Wybór pomiędzy wysyłaniem wiadomości e-mail w formacie zwykłego tekstu a wiadomości e-mail w formacie HTML odgrywa kluczową rolę w określaniu skuteczności i wpływu Twoich wiadomości. Obydwa formaty mają swój własny zestaw zalet i odpowiadają unikalnym potrzebom i preferencjom.

Podkreślmy kluczowe różnice między tymi dwoma formatami wiadomości e-mail:

Funkcja Zwykły tekst e-maili E-maile HTML
Formatowanie i stylizacja Ograniczone do zwykłego tekstu, bez stylizacji Obsługa bogatego formatowania i stylizacji
Obrazy i multimedia Brak obsługi osadzonych obrazów Może zawierać obrazy i multimedia
Linki i przyciski CTA Podstawowe hiperłącza Stylowe linki i interaktywne przyciski
Układ i struktura Liniowa, minimalna struktura Możliwe są złożone układy
Personalizacja Ograniczone do personalizacji tekstowej Rozbudowane opcje personalizacji, w tym wykorzystanie spersonalizowanych obrazów w bardziej zaawansowanych przypadkach
Śledzenie i analityka Ograniczone możliwości śledzenia Zaawansowane śledzenie i analityka
Zgodność Uniwersalnie kompatybilny Wymaga obszernych testów i czasu rozwoju, aby uzyskać pełną kompatybilność ze wszystkimi urządzeniami
Zaangażowanie i wpływ Ograniczona atrakcyjność wizualna, przekazuje jedynie informacje Większe zaangażowanie i wpływ

Podczas gdy e-maile w formacie zwykłego tekstu są znane ze swojej prostoty i uniwersalnej kompatybilności, e-maile w formacie HTML oferują szersze pole dla kreatywności i zaangażowania.

Wysyłaj spersonalizowane e-maile w formacie HTML za pomocą Mailmeteor!

Mailmeteor to potężne narzędzie do marketingu e-mailowego, które upraszcza proces wysyłania spersonalizowanych wiadomości e-mail w formacie HTML do wielu odbiorców za pośrednictwem Gmaila. Ten przydatny dodatek płynnie integruje się z Gmailem i Arkuszami Google, dzięki czemu możesz z łatwością tworzyć i wysyłać spersonalizowane e-maile.

  • Personalizacja poczty e-mail: twórz wysoce spersonalizowane wiadomości e-mail, korzystając z niestandardowych tagów scalania z danych w Arkuszach Google lub korzystając z platformy internetowej z polami takimi jak imiona i nazwiska, dane firmy lub inne niestandardowe zmienne.
  • Edytor szablonów HTML: skorzystaj z zaawansowanego edytora HTML i wstaw spersonalizowane dane bezpośrednio do szablonów wiadomości e-mail.
  • Śledzenie poczty e-mail: Śledź wiadomości e-mail po opuszczeniu skrzynki pocztowej, sprawdzaj, czy odbiorcy je otwierają i przeprowadzaj testy A/B z wiarygodną informacją zwrotną.
  • Biblioteka szablonów: uzyskaj dostęp do biblioteki wstępnie zaprojektowanych szablonów wiadomości e-mail lub utwórz własne szablony wiadomości e-mail w formacie HTML do wykorzystania w swoich kampaniach.

Ten przewodnik został napisany przez Guy Bou Samrę, redaktora treści w Mailmeteor. Mailmeteor to proste i zorientowane na prywatność oprogramowanie do poczty e-mail. Zaufało mu miliony użytkowników na całym świecie i często jest uważane za najlepsze narzędzie do wysyłania biuletynów za pomocą Gmaila. Wypróbuj nas i daj nam znać, co myślisz!

➤ Oszczędzaj czas, wysyłając e-maile za pomocą Gmaila za pomocą Mailmeteor
Opublikowane w:
  • Marketing e-mailowy
  • Gmaila
  • Przewodnik