Newsletter na Autopilocie: Szablon HTML

0:00Na tym etapie nasza podstawowa struktura Airtable jest gotowa.

0:04Możemy więc pójść dalej i zająć się przygotowaniem szablonu naszej wiadomości.

0:09Konkretnie będzie to szablon HTML, ale musi spełniać kilka warunków.

0:13Pierwszym z nich jest kompatybilność z różnego rodzaju klientami pocztowymi,

0:17czyli inaczej mówiąc musimy zadbać o to, aby newsletter poprawnie wyświetlał się przynajmniej

0:22w najpopularniejszych klientach pocztowych.

0:24Następnie musimy uwzględnić w nim wszystkie

0:26informacje, które mamy tutaj oraz oczywiście uwzględnić, oraz oczywiście w

0:31sytuacji, gdy do newslettera mamy podłączone jakieś linki

0:34one również muszą zostać uwzględnione.

0:36Poza tym bardzo istotną kwestią jest również to, że przykładowo treść naszego

0:41newslettera powstaje z pomocą składni Markdown w naszym edytorze.

0:45Oznacza to, że później na etapie automatyzowania będziemy musieli zadbać o

0:49jej poprawne przekonwertowanie oraz umieszczenie w szablonie.

0:53Zaczynajmy więc.

0:54Jeżeli chodzi o kwestię dotyczącą kompatybilności z różnymi klientami

0:58pocztowymi, zastosujemy tutaj możliwie najprostsze rozwiązanie, jakim jest

1:02wykorzystanie narzędzia mjml, z którego ja osobiście korzystam od dłuższego czasu.

1:08Z jego pomocą możemy zapisać coś, co

1:10przypomina składnię Markdown, ale tak naprawdę jest to po prostu

1:13przypominająca go składnia, która docelowo zostaje zamieniona na kod HTML z

1:18dodatkowym uwzględnieniem różnego rodzaju ograniczeń klientów pocztowych.

1:23Oczywiście, aby nawet z pomocą składni Markdown przygotować taki szablon,

1:27tak czy inaczej, przynajmniej w pewnym

1:28stopniu trzeba orientować się w pisaniu kodu HTML.

1:32W tym momencie mamy dwa wyjścia. Wykorzystać sztuczną inteligencję i trochę

1:36znajomości HTML-a, aby dostosować szablon do swoich potrzeb, bądź też skorzystać z

1:41przygotowanego przeze mnie gotowego szablonu HTML, który dołączam do zasobów

1:45tej lekcji i dodatkowo będziemy go również wykorzystywać w kolejnych lekcjach.

1:49Jeżeli chodzi o wykorzystanie sztucznej

1:51inteligencji, tak naprawdę sięgam tutaj po makro, które przygotowałem i omówiłem w

1:56filmie, do którego link również dołączam do zasobów tej lekcji.

2:00Tak czy inaczej makro polega na tym, że

2:02mogę wykorzystywać sztuczną inteligencję gdzie tylko chcę, np.

2:06w mojej przeglądarce.

2:07Skorzystam teraz z możliwości transformacji tego

2:10tekstu właśnie wykorzystując GPT3 i za chwilę powinienem otrzymać szablon mjml.

2:17Zanim przejdziemy dalej, chciałbym Ci tylko wytłumaczyć co tutaj się wydarzyło.

2:21Mianowicie mam tutaj takie sprytne makro,

2:23które pozwala mi zaznaczyć tekst, a następnie na jego podstawie skontaktować

2:28się z GPT-3, aby wygenerować interesujące mnie wynik.

2:31Przykładowo teraz tekst zamienił się na

2:34link, który mogę wstawić sobie tutaj i od razu mam efekt, o który mi chodziło.

2:39Dokładnie na takiej zasadzie jestem w

2:41stanie generować kolejne sekcje i wprowadzać w nich modyfikacje.

2:45Niezaprzeczalnie dalej muszę w jakimś stopniu orientować się

2:48w składni HTML czy mjml, natomiast i tak większość pracy wykonuje tutaj sztuczna

2:53inteligencja. Natomiast i tak większość pracy wykonuje tutaj AI.

2:57I rzeczywiście mam tutaj szablon, który odpowiada moim potrzebom.

3:01Konkretnie składa się on z dwóch sekcji.

3:03Pierwsza z nich zawiera nagłówek oraz tekst, a druga sprawdzi się idealnie do

3:07tego, aby wyświetlać informacje na temat linków.

3:10Tutaj umieścimy sobie jakieś zdjęcie

3:12powiązane z linkiem, a następnie tutaj będziemy mieć jego tytuł oraz opis.

3:17Oczywiście w tym momencie nie będziemy sobie przechodzić przez wszystkie elementy

3:20dotyczące dostosowania szablonu ze względu na to, że nie jest to tematem tego kursu.

3:25Ważne jest tylko to, że tak naprawdę skopiowałem te wygenerowane fragmenty

3:29sekcji, a następnie uzupełniłem je tekstem.

3:31Tutaj wygenerowałem listę i swoją drogą to również zrobiłem wykorzystując AI.

3:36Mianowicie zapisałem zdanie z prośbą o wygenerowanie listy zawierającej tekst

3:41Lorem ipsum i chodziło mi tutaj o 5 punktów zawierających krótki tekst.

3:46Jak widać dokładnie taki sam efekt osiągnąłem w tym momencie.

3:50Idąc dalej mamy tutaj główną sekcję

3:52naszego newslettera, czyli dokładnie treść kolumny Content, która tak jak

3:55powiedziałem docelowo będzie zamieniona ze składni Markdown na składnię HTML.

4:00Oznacza to, że dokładnie ten zaznaczony fragment będzie przez automatyzację

4:04podmieniany dynamicznie na podstawie tekstu pochodzącego z Airtabel.

4:09Idąc dalej mamy tutaj jeszcze dwie sekcje, aczkolwiek tak naprawdę może być to jedna

4:13sekcja uwzględniająca listę linków oraz ich opisy.

4:17W tym miejscu będziemy musieli jeszcze

4:18zadbać o to, aby nagłówki były podlinkowane.

4:21W takiej sytuacji dodamy po prostu

4:23znacznik anchor, do którego będziemy przekazywać adres linku.

4:28No i teraz myślę, że w kontekście naszego szablonu mamy tutaj wszystko.

4:32Zatem w pierwszej części znajduje się

4:33wprowadzenie, następnie podsumowanie, główna treść oraz dołączone linki.

4:39Myślę, że dodatkowo przyda nam się jeszcze

4:41sekcja uwzględniająca możliwość oceny naszego newslettera.

4:45Tak jak widać, skopiowałem więc poprzednią

4:47sekcję, a następnie tutaj zapiszemy sobie następujący tekst.

4:51Konkretnie mamy tutaj nagłówek, zachęcenie

4:53do oceny newslettera, a następnie linki umożliwiające jego ocenę.

4:58Tak naprawdę jeszcze w tym momencie

5:00będziemy potrzebować znaczników, a i tutaj również wykorzystamy AI.

5:06Linki są gotowe, ale oczywiście ich adresy będziemy sobie jeszcze uzupełniać.

5:10Wygląda więc na to, że szablon naszego

5:12newslettera jest gotowy, zatem możemy wygenerować sobie tutaj kod HTML,

5:17a następnie będziemy wykorzystywać go na potrzeby automatyzacji.

5:21Ale zanim zakończymy tą lekcję, skorzystamy jeszcze z narzędzia HTML

5:25formatter, dzięki któremu sprawimy, że ten kod będzie nieco bardziej czytelny.

5:30No i mamy nasz rezultat, z którym będziemy pracować za chwilę.