Cześć wszystkim!

Rustem wyjechał z nas do Soczi, by cieszyć się ciepłym, morskim klimatem. Alina i ja zostaliśmy poinstruowani, abyśmy kontynuowali historię o e-mail marketingu. Cóż, w tym tygodniu jest mój post. Opowiem Ci o OpenRate.

Jednym z najważniejszych jest wskaźnik otwarć listów (ang. Open Rate w języku angielskim). Wysłałeś 10 000 listów i przeczytało je tylko 10 osób. OpenRate wyniósł 0,1%. Smutek! Ale jeśli jest 2000 osób, to nie jest źle - 20%. Ale pojawia się pytanie, jak dowiedzieć się, ile osób przeczytało list? Usługi takie jak Unisender, Mailchimp itp. udostępniają te informacje w interfejsie. Spróbujmy dowiedzieć się, skąd biorą te dane. Na szczęście sposobów jest kilka - tylko dwa.

Opcja 1. Obraz jednopikselowy.

Metoda jest niezwykle prosta! Usługa wstawia do wiadomości e-mail przezroczysty obraz 1×1 piksel. Gdy użytkownik otwiera wiadomość e-mail, obraz jest ładowany w przeglądarce. Jednocześnie zdjęcie wydaje się znajdować na serwerach „mailera”. Gdy nadejdzie żądanie obrazu (żądanie do serwera), usługa może śledzić, który obraz został zażądany. I wyciągnąć wniosek - który list, z jakiej listy mailingowej został otwarty.

Nawiasem mówiąc, możesz w ten sposób śledzić otwieranie pojedynczych liter, wstawiając kod GoogleAnalytics do kodu zamiast adresu obrazu. A wtedy liczba otwarć pojawi się w jego statystykach.

Wady takiego śledzenia: nie działa we wszystkich interfejsach programów pocztowych (i programów pocztowych), a metoda ta ma również zastosowanie tylko wtedy, gdy Twój list jest w formacie HTML. W końcu jest to pewien kod html. W zwykłej wiadomości tekstowej metoda nie zadziała.

Opcja 2. Podążaj za linkami.

Drugie rozwiązanie również znajduje się na powierzchni. Zaznaczyliśmy linki w liście, dodaliśmy specjalny kod do adresu każdego linku. Jeśli ktoś śledził ich na naszej stronie, to otwierał list. Po kodzie możesz zidentyfikować listę mailingową, z której pochodzi użytkownik. Ta metoda uzupełnia pierwszą opcję: jeśli to nie zadziałało, to statystyki zostaną wyjaśnione przez kliknięcia linków.

Nawiasem mówiąc, pojawił się kiedyś pomysł, aby śledzić wskaźnik otwarć listów nie do wysyłki, ale do tych wysyłanych przez sprzedawców z ofertami handlowymi. Odkryto szereg usług zagranicznych, które ostatecznie działają na mniej więcej tych samych zasadach.

To w zasadzie to. Życzę owocnego tygodnia pracy!

Przeczytaj poprzednie dwie części, opanuj trzecią, a uzbroisz się w całą wiedzę techniczną, aby w pełni pracować w nowym edytorze!

Jak pobrać kod e-mail z nowego edytora?

Pracowałem więc w nowej wersji konstruktora. Ogólnie mi się podobał. Minusem jest jednak to, że nie pozwala na konwersję utworzonego listu wraz z tekstem i obrazami na kod HTML. To jest smutne. Ale jest wyjście. Musisz samodzielnie rozpakować kod. Jak to zrobić?

Teraz ci powiem. Ogólnie masz list. Lub szablon listu. Jeśli nie, wróć do czytania tej części po utworzeniu szablonu (lub gotowego listu na jego podstawie).

Od samego początku

Przejdźmy więc przez całą procedurę całkowicie. Od samego początku. Wszystko robimy w czterech krokach.

Krok drugi. Wybierz zapisany szablon.

Krok trzeci. Kliknij przycisk „Podgląd”. Następnie opiszę procedurę w przeglądarce Google Chrome. Kliknięcie przycisku „Podgląd” powoduje otwarcie listu w formie, w której subskrybent go zobaczy.

Krok czwarty. Kliknij prawym przyciskiem myszy, aby wywołać menu, w którym wybieramy opcję „Wyświetl kod”. W przeglądarce Chrome, po tym, od dołu otwiera się dodatkowe okno („okno w oknie”) z kodem HTML litery.

Aby było to jaśniejsze, poniżej znajdują się zrzuty ekranu wszystkich kroków.

Jak uzyskać kod HTML poczty e-mail

Jeśli najedziesz kursorem myszy na dowolny wiersz kodu, to w oknie podglądu wiadomości (mamy ją otwartą, nigdzie nie zniknęła) pole, które opisuje ta linia, zostanie zaznaczone.

Idąc w górę dochodzimy do samego początku naszego listu. Może to być pierwszy tekst, na przykład „Witaj, drogi subskrybencie” lub zdjęcie - logo Twojej witryny.

Mój list zaczyna się od logo. Poszukamy więc kodu, od którego zaczyna się opis wszystkich elementów listu: tekstu i obrazków.

Okno z kodem może być umieszczone poziomo (na dole okna przeglądarki), pionowo (po prawej stronie okna przeglądarki) lub jako osobne niezależne okno. Ale nie potrzebujemy osobnego niezależnego okna, ponieważ będziemy wędrować po kodzie i sprawdzać, który element litery wyświetla. Dla mnie wygodniejsze jest to, że dodatkowe okno znajduje się na dole okna przeglądarki.

Jak skonfigurować dodatkowe okno

Wybór lokalizacji dodatkowego okna jest prosty.

1. W górnym menu dodatkowego okna, w prawej części, obok krzyża, znajduje się element oznaczony trzema pionowymi kropkami. Nazywa się Dostosuj i kontroluj DevTools (nazwa jest wyświetlana po najechaniu myszą). Otwieramy to.
2. Wybierz Zadokuj do trybu na dole.

Wszystko. Teraz nasze dodatkowe okno znajduje się na dole. W takim przypadku należy wybrać tryb Elementy w lewej części górnego menu.

Kopiowanie kodu e-mail z przeglądarki

Przejdźmy teraz przez kod od góry do dołu. Po znalezieniu kodu, który jednocześnie obejmuje wszystkie elementy na stronie naszego listu, wywołujemy menu prawym przyciskiem myszy i wybieramy Edytuj jako HTML.

Otwiera się blok: prostokąt, wewnątrz którego jest dużo kodu. Skopiuj cały kod wewnątrz tego prostokąta (najpierw naciśnij kombinację klawiszy Ctrl + A, a następnie Ctrl + C).

To tyle, skopiowaliśmy kod HTML do schowka, czyli do tymczasowej pamięci naszego komputera. Teraz możesz zapisać ten kod jako szablon w SmartResponder.

Otworzy się puste pole nowego szablonu, w menu którego koniecznie musisz kliknąć przycisk "Źródło" (właśnie dzisiaj widziałem, że teraz ten przycisk został przemianowany na "kod HTML").

Następnie wklejamy nasz kod HTML za pomocą skrótu klawiaturowego Ctrl + V . Następnie wskaż temat listu (jest to pole wymagane) i naciśnij przycisk „Zapisz”. Gotowy!

Prawidłowe zapisanie kodu e-mail

Tak, to załatwione. Teraz możesz dodatkowo zapisać kod jako plik HTML na swoim komputerze. Aby to zrobić, po prostu otwórz Notatnik i zapisz w nim kod. Następnie zmień rozszerzenie *.txt na *.html i otwórz plik. W oknie przeglądarki zobaczysz kopię swojego listu.

Ściśle mówiąc, do zapisywania kodów programów jest lepiej pobierz edytor NotePad++. Zawsze go używam, ponieważ Notatnik to:

a) wizualne przedstawienie struktury kodu;
b) podświetlanie składni (czyli powiązań między elementami kodu: gdzie to, co się otwiera i zamyka, a co jest napisane między tymi „gdzie co” jest napisane).

Prawda, w nauka przetwarzania kodu listu stworzonego specjalnie w usłudze mailingowej SmartResponder, nawet NotePad++ nie pomógł mi uzyskać pięknego znacznika kodu. Pomógł tutaj Adobe Dreamweaver CC.

Tylko dzięki niemu udało się ustrukturyzować kod za pomocą polecenia „Formatuj kod źródłowy”.

Teraz możesz przenieść kod do NotePad++ i zapisać go. Chociaż nie. Przed zapisaniem musisz kliknąć „Konwertuj na ANSI”, aby podczas przeglądania nie było bazgrołów zamiast tekstu.

Możesz także wybrać "Widok" - "Zawijaj linie". Wtedy cały kod będzie umieszczony na szerokości strony, a nie w linii.

Następnie wszystko powinno się otworzyć i wyświetlić jak w szablonie listu w usłudze SmartResponder.

Siatka bezpieczeństwa: zapisz kod w SmartResponder

Skoro „wyłowiliśmy” kod z naszego listu stworzonego w nowym edytorze, skoro już go mamy, możemy go dla bezpieczeństwa zapisać w usłudze SmartResponder. Po co? Aby na jej podstawie tworzyć nowe litery, zmień je, a co najważniejsze, użyj ich na innych zasobach (przypominam, że w nowym edytorze takich funkcji po prostu nie ma).

Aby to zrobić, kod skopiowany z przeglądarki Google Chrome należy wkleić do starego konstruktora SmartResponder.

Robi się to łatwo.

1. W zakładce „Mailouty” wybierz sekcję „Lista szablonów listów”.
2. Kliknij przycisk „Utwórz szablon”.
3. Wybierz typ „Kolorowy e-mail HTML (stary edytor)” i kliknij „Dalej”.
4. W otwartym edytorze, w menu narzędzi do tworzenia listu, kliknij przycisk „Kod HTML”.
5. Wklej nasz kod (naciśnij Ctrl + V). Możemy ponownie kliknąć przycisk „Kod HTML”, czyli wyłączyć tryb wyświetlania kodu i włączyć tryb przeglądania wygląd zewnętrzny listy.
6. Pamiętaj, aby wypełnić pole „Temat listu” (po rosyjsku: podajemy nazwę naszemu szablonowi).
7. Wciskam przycisk „Zapisz”.

W rzeczywistości to wszystko, co chciałem powiedzieć o nowym edytorze SmartResponder po tym, jak utworzyłem w nim swój pierwszy list.

Chcę powiedzieć, że wcześniej w ogóle nie znałem usługi SmartResponder. Oznacza to, że nie miałem umiejętności pracy ani w starym, ani w nowym edytorze. Ale zapisałem się i rozgryzłem. Cóż, teraz wiesz, jak pracować w nowym konstruktorze SmartResponder.

A z jakich usług tworzenia i wysyłania listów korzystasz w swojej pracy?

Często jesteśmy pytani o możliwości edycji e-maili html. Z reguły nie ma z tym problemów, ponieważ serwisy mailingowe wyposażone są w różne edytory listów.

Ale co, jeśli musisz wysyłać listy tylko do kilku odbiorców, a każdy z nich musi być indywidualny? Płacić pieniądze tylko za możliwość korzystania z edytora usług?

Niekoniecznie. Dziś powiemy Ci, jak zastąpić treść listu w kodzie źródłowym na przykładzie edytora tekstu Sublime Text.

Poznawanie redaktora

Jednocześnie, aby zobaczyć samą literę i śledzić w niej zmiany, wystarczy otworzyć plik html z listem w oknie przeglądarki. Po zapisaniu zmian (Ctrl + S) w tekście kodu wystarczy odświeżyć stronę, a zobaczysz wprowadzone zmiany.

Jak widać, Sublime koloruje różne formaty danych, w naszej wersji: różowy dla tagów html, zielony dla opcji, żółty, fioletowy i niebieski dla wartości różnych opcji oraz biały dla tekstu.

Zamiana tekstu listu

Dzięki wyżej omówionym funkcjom edytora dziecko poradzi sobie również z podmianą tekstu listu. Wystarczy, że zamienisz sam tekst, podświetlony na biało przez Sublime.

Warto zauważyć, że Sublime, podobnie jak Notatnik, automatycznie resetuje formatowanie tekstu. Możesz więc bezpiecznie skopiować dowolny tekst i wkleić go w odpowiednie miejsce, zostanie wyświetlony w liście zgodnie z parametrami określonymi w kodzie.

I jeszcze jedna mała wskazówka, aby znaleźć żądany tekst w całej tablicy kodu, naciśnij Ctrl + F - po tym na dole edytora pojawi się pole wyszukiwania tekstu.

W razie potrzeby możesz zmienić styl czcionki.

Zalecamy używanie jednej z następujących czcionek - Arial, Arial Black, Tahoma, Trebuchet MS, Verdana, Courier, Courier New, Georgia, Times, Times New Roman Są to standardowe czcionki rozpoznawane przez każdy system. W przeciwnym razie Twój tekst na innym komputerze może zmienić się w bełkot.

Rozmiar- zastępca Pożądana wartość w parametrze „rozmiar czcionki: 14px;” . Zwiększmy rozmiar czcionki z 14px do 16px.

Kolor- wartość koloru ustawiana jest w parametrze HEX „kolor: #323232;” .

Możesz wybrać wartość koloru za pomocą jednej z usług online, na przykład tutaj - get-color.ru.

Sprawimy, że tekst będzie szary - #4F4F4F.

Odstępy między wierszami- analogicznie do rozmiaru czcionki, ustawionego parametrem wysokość linii: 18px;

Format czcionki- ustawione według tagów tekst - tłuszcz, tekst - kursywa i tekst - podkreślenie.

Warto zauważyć, że Sublime podczas otwierania tagu automatycznie dodaje polecenie zamknięcia tagu. Bądź ostrożny.

Ustawmy nasz tekst kursywą.

Przerwanie linii- ustawiony przez tag
. Po prostu wstaw ten tag przed wybraną sekcją tekstu.

Zastąp tekst, zapisz, zaktualizuj i gotowe.

Wstawianie linku w tekście

cel=”_blank” - to polecenie, aby otworzyć link w nowej karcie. Jeśli chcesz, aby link otwierał się w bieżącej karcie, po prostu go pomiń.

dekoracja tekstu: podkreślenie; - polecenie do przeglądarki, aby podkreślić link. Jeśli podkreślenie nie jest wymagane, musisz napisać dekoracja tekstu: brak;

W każdym razie pamiętaj, aby napisać to polecenie, w przeciwnym razie każda przeglądarka na swój sposób zdecyduje, czy ma podkreślać, czy nie.

Jest to również wymagane polecenie, w przeciwnym razie przeglądarki będą wyświetlać kolor według własnego uznania.

Uwaga! Niektórzy klienci poczty e-mail są mądrzejsi niż na to wyglądają, a jeśli widzą link w tekście, na przykład „Możesz przejść do witryny w celu dalszego studiowania…”, mogą to zaznaczyć samodzielnie i samodzielnie droga.

Wstawianie/zastępowanie linku w obrazie

Zdjęcia w liście nie są przechowywane jako załączniki, ale znajdują się na serwerach. W związku z tym w kodzie obrazek jest linkiem do niego, a polecenie jego dodania jest podobne do omówionego powyżej.

www.example.com”target=”_blank” style=”dekoracja tekstu: podkreślenie; ">

kolor:#234322; - polecenie ustawienia kolorów nie dotyczy obrazu.

granica = "0" - polecenie kadrowania obrazu. Wartość 0 usuwa białą ramkę wokół obrazu, wartości większe od tej wartości powodują wyrzucenie odpowiadającej jej szerokości piksela.

Pamiętaj, aby wprowadzić to polecenie. Na przykład program Outlook automatycznie przypisuje ramkę do obrazu, jeśli nie zarejestrujesz tego polecenia.

Znajdowanie fragmentu kodu z obrazkiem będzie łatwiejsze w przeglądarce. Aby to zrobić, kliknij prawym przyciskiem myszy wymagany obraz i wybierz „Wyświetl kod” (są to nazwy tej opcji w Google Chrome, nazwa i ścieżka do niej w innych przeglądarkach mogą się różnić). Przeglądarka automatycznie podświetli odpowiednią część dla Ciebie, skopiuje kod i wklei go do wyszukiwania Sublime.

Podczas wymiany zdjęcia należy zachować ostrożność - jeśli rozmiar nowego zdjęcia różni się od rozmiaru poprzedniego, należy zmienić wszystkie parametry szerokość oraz wzrost do obecnych.

Posłowie

Opowiedzieliśmy Ci o najbardziej „bezbolesnych” opcjach edycji kodu e-mail. Jeśli potrzebujesz dokonać bardziej znaczących zmian, zdecydowanie zalecamy powierzenie takiego zadania specjaliście od layoutu lub przynajmniej stworzenie kopii kodu przed edycją.

W trakcie studiowania materiału teoretycznego na temat języka HTML niektórzy użytkownicy mają pytanie: jak wklej plik html do przeglądarki internetowej? Podobnie jak już napisany kod html, zobaczyć w przeglądarka. Widzieć że tak powiem, wynik wykonanej pracy.

Jak już ustaliliśmy, nasz kod html piszemy w programie Notepad (ale nikt nie zabrania korzystania z innych edytorów, np. Notepad++, co jest jeszcze wygodniejsze).

A więc otwórz program Notatnik i napisz w nim trochę kodu html. Weźmy kod html z ostatniej lekcji.

Treść "Opis" = " Opis strony">

Co prawda taki kod html nic nam nie da w przeglądarce. Wymagane między tagami oraz napisz coś innego, na przykład nagłówek i kilka akapitów:

Wszystko działa

Dodajemy te trzy wiersze do naszego kodu html i otrzymujemy kod taki:

Treść "Opis" = " Opis strony">

Sprawdzanie wyniku pisania kodu html

Wszystko działa

Zapisz nasz plik: kliknij plik → Zapisz jako

W oknie, które się otworzy, wybierz folder, w którym zapiszemy plik, wpisz nazwę pliku (na przykład dokument), zmień rozszerzenie pliku .txt na .html i ustaw typ pliku na „Wszystkie pliki”.

Aby otworzyć nasz plik w przeglądarce, najedź na plik, kliknij prawym przyciskiem myszy, wybierz „Otwórz za pomocą” w oknie, które się otworzy, i wybierz przeglądarkę, której używamy.

Następna lekcja to .

Polecamy również

• Najlepsze cytaty Dostojewskiego o życiu, człowieku i miłości
• Powinieneś wiedzieć, że kiedy odpuszczasz, przychodzi do ciebie najlepsze.
• Jakie są nawyki
• Przypowieści o miłości są piękne i mądre
• Statusy o ludziach Cytaty o braku uznania
• Każdy robi tylko to, czego chce, a nie to, czego chcą od niego inni. Dlaczego człowiek robi to, czego nie chce?