Код за отваряне на писмо в браузър. Редактиране на изходния файл на html писмо. Правилно запазване на имейл кода


Здравейте всички!

Рустем отиде в Сочи, за да се наслади на топлия морски климат. И той инструктира Алина и мен да продължим историята за имейл маркетинга. Е, тази седмица е моята публикация. Ще ви разкажа за OpenRate.

Процентът на отворени имейли (Open Rate на английски) е един от най-важните. Изпратихте 10 000 писма, а само 10 души ги прочетоха. OpenRate беше 0,1%. тъга! Но ако има 2000 души, това не е лошо - 20%. Но възниква въпросът как да разберете колко души са прочели писмото? Услуги като Unisender, Mailchimp и др. предоставят тази информация в интерфейса. Нека се опитаме да разберем как те получават тези данни. За щастие има няколко начина - само два.

Вариант 1. Еднопикселно изображение.

Методът е изключително прост! Услугата вмъква прозрачно изображение 1x1 пиксел в писмото. Когато потребителят отвори писмото, изображението се зарежда в браузъра. В същото време снимката изглежда е на сървърите на „поща“. Когато дойде заявка за снимка (обаждане до сървъра), услугата може да проследи коя снимка е поискана. И направете извод - кое писмо от кой пощенски списък е отворено.

Между другото, можете също да проследите отварянето на отделни букви, като вмъкнете кода на Google Analytics в кода вместо адреса на изображението. И тогава броят на отварянията ще бъде показан в неговата статистика.

Недостатъци на такова проследяване: не работи във всички интерфейси на поща (и програми за електронна поща) и методът е приложим само ако вашето писмо е в HTML формат. В крайна сметка това е определен html код. Методът няма да работи в обикновено текстово съобщение.

Вариант 2. Следвайте връзки.

Второто решение също е на повърхността. Маркирахме връзките в писмото и добавихме специален код към адреса на всяка връзка. Ако някой ги последва до нашия уебсайт, значи той е отворил писмото. По кода можете да идентифицирате от кой бюлетин е дошъл потребителят. Този метод допълва първия вариант: ако не работи, тогава статистиката ще бъде изяснена чрез кликвания върху връзки.

Между другото, някога имаше идея да се проследи процентът на отворени писма не за изпращане по пощата, а за тези, изпратени от продавачи с търговски предложения. Открити са редица чужди услуги, които в крайна сметка работят на приблизително същите принципи.

Това е общо взето. Ползотворна работна седмица!

Прочетете предишните две части, овладейте третата и ще бъдете въоръжени с всички технически познания, за да работите пълноценно в новия редактор!

Как да извлека буквения код от новия редактор?

Така че работих в нова версиядизайнер. Като цяло ми хареса. Недостатъкът обаче е, че не ви позволява да конвертирате създадената буква заедно с текст и изображения в HTML код. Това е тъжно. Но има изход. Трябва сами да извлечете кода. Как да го направим?

Сега ще ти кажа. Като цяло имате писмо. Или шаблон за писмо. Ако не, върнете се към четенето на тази част, след като създадете шаблон (или готово писмо въз основа на него).

От самото начало

Така че, нека преминем през цялата процедура напълно. От самото начало. Правим всичко в четири стъпки.

Стъпка втора.Изберете запазения шаблон.

Стъпка трета.Кликнете върху бутона „Визуализация“. След това ще опиша процедурата в браузъра Google Chrome . Като щракнете върху бутона „Преглед“, писмото се отваря във формата, в която абонатът ще го види.

Стъпка четвърта.Щракнете с десния бутон, за да отворите меню, където избираме опцията „Преглед на кода“. В браузъра Chrome отдолу се отваря допълнителен прозорец („прозорец в прозорец“) с HTML кода на писмото.

За да стане по-ясно, по-долу има екранни снимки на всички стъпки.

Как да получите HTML кода на писмо

Ако задържите курсора на мишката над който и да е ред от код, тогава в прозореца за предварителен преглед на имейла (отворен е, все още е там) полето, което този ред описва, ще бъде маркирано.

Придвижвайки се нагоре, стигаме до самото начало на нашето писмо. Това може да бъде първият текст, например „Здравей, скъпи абонат“ или снимка – логото на вашия сайт.

Писмото ми започва с логото. Така че ще търсим кода, който започва описанието на всички елементи на писмото: текст и снимки.

Прозорецът с кода може да бъде разположен хоризонтално (в долната част на прозореца на браузъра), вертикално (от дясната страна на прозореца на браузъра) или като отделен независим прозорец. Но нямаме нужда от отделен независим прозорец, защото ще се скитаме из кода и ще видим какъв елемент от буквата показва. За мен е по-удобно допълнителният прозорец да се намира в долната част на прозореца на браузъра.

Как да настроите допълнителен прозорец

Изборът на местоположението на допълнителния прозорец е лесен.

  1. В горното меню на допълнителния прозорец, от дясната страна, до кръста, има елемент, обозначен с три вертикални точки. Нарича се Customize and control DevTools (името се показва, когато задържите курсора на мишката върху него). Да го отворим.
  2. Изберете режим Dock to bottom.

Всичко. Сега нашият допълнителен прозорец се намира в долната част. В този случай в лявата част на горното меню трябва да бъде избран режим Елементи.

Копирайте буквения код от браузъра

Сега преминаваме през кода отгоре надолу. След като намерим кода, който покрива едновременно всички елементи на страницата на нашето писмо, извикваме менюто с десния бутон на мишката и избираме Редактиране като HTML.

Отваря се блок: правоъгълник с много, много код вътре. Копирайте целия код вътре в този правоъгълник (първо натиснете клавишната комбинация Ctrl + A, след това Ctrl + C).

Това е всичко, копирахме HTML кода в клипборда, тоест във временната памет на нашия компютър. Сега можете да запазите този код като шаблон в SmartResponder.

Отваря се празно поле за нов шаблон, в менюто на което трябва да щракнете върху бутона „Източник“ (точно днес видях, че този бутон вече е преименуван на „HTML код“).

След това поставяме нашия HTML код с помощта на клавишната комбинация Ctrl + V. След това посочете темата на писмото (това е задължително поле) и натиснете бутона „Запазване“. Готов!

Правилно запазване на имейл кода

Добре, това е решено. Сега можете по избор да запишете кода като HTML файл на вашия компютър. За да направите това, просто отворете Notepad и запазете кода в него. След това променете разширението *.txt на *.html и отворете файла. Ще видите копие на вашето писмо в прозореца на браузъра.

Строго погледнато, за да запазите програмните кодове е по-добре изтеглете редактора на NotePad++. Винаги го използвам, защото Notepad е:

а) визуално показване на структурата на кода;
б) подчертаване на синтаксиса (т.е. връзки между елементите на кода: къде какво се отваря и затваря и какво е написано между тези „къде е написано какво“).

Вярно, в При обработката на кода на писмо, създадено специално в пощенската услуга SmartResponder, дори NotePad++ не ми помогна да получа красиво кодово маркиране. Помогнах тук Adobe Dreamweaver CC.

Само благодарение на него стана възможно структурирането на кода с помощта на командата „Форматиране на изходния код“.

Сега можете да прехвърлите кода в NotePad++ и да го запишете. Въпреки че не. Преди да запазите, трябва да щракнете върху „Конвертиране в ANSI“, така че да няма драсканици вместо текст при гледане.

Можете също да изберете „Преглед“ - „Прекъсване на ред“. Тогава целият код ще бъде разположен по ширината на страницата, а не в ред.

След това всичко трябва да се отвори и да се покаже като в шаблона на писмото в услугата SmartResponder.

Защитна мрежа: запазете кода в SmartResponder

Тъй като „изловихме“ кода от нашето писмо, създадено в новия редактор, тъй като вече го имаме, можем да го запазим в услугата SmartResponder за безопасност. За какво? За да създадете нови букви въз основа на него, променете ги и най-важното - използвайте ги на други ресурси (нека ви напомня, че новият редактор просто няма такива възможности).

За да направите това, кодът, копиран от браузъра Google Chrome, трябва да бъде поставен в стария конструктор на SmartResponder.

Това се прави лесно.

  1. В раздела „Изпращания“ изберете секцията „Списък с шаблони за писма“.
  2. Кликнете върху бутона „Създаване на шаблон“.
  3. Изберете типа „Цветно HTML писмо (стар редактор)“ и щракнете върху „Напред“.
  4. В редактора, който се отваря, в менюто с инструменти за създаване на писмо щракнете върху бутона „HTML код“.
  5. Поставете нашия код (натиснете Ctrl + V). Можем отново да щракнем върху бутона „HTML код“, тоест да изключим режима на показване на кода и да включим режима на преглед външен видписма.
  6. Не забравяйте да попълните полето „Тема на писмото“ (на руски: дайте име на нашия шаблон).
  7. Кликнете върху бутона „Запазване“.

Това е общо взето всичко, което исках да ви кажа за новия редактор на SmartResponder, след като създадох първото си писмо в него.

Искам да кажа, че преди изобщо не бях запознат с услугата SmartResponder. Тоест нямах умения да работя нито в стария, нито в новия редактор преди. Но след това се регистрирах и разбрах. Е, сега знаете как да работите в новия конструктор SmartResponder.

Какви услуги използвате в работата си за създаване и изпращане на писма?

Докато изучават теоретичен материал за езика HTML, някои потребители имат въпрос: как поставете html файл в уеб браузъра? Като вече написан html код, преглед в браузър. Вижте , така да се каже, резултатът от свършената работа.

Както вече се съгласихме, ние пишем нашия html код в програмата Notepad (но никой не забранява използването на други редактори, например Notepad++, което е още по-удобно).

И така, отворете програмата Notepad и напишете малко html код в нея. Нека вземем html кода от миналия урок.

</span><span>

"Описание" съдържание=" Описание на страницата">

Вярно е, че такъв html код няма да ни даде нищо в браузъра. Задължително между етикетите И напишете нещо друго, например заглавие и няколко абзаца:

Всичко работи

Добавяме тези три реда към нашия html код и получаваме код като този:

</span><span>заглавие на документа (уеб страница)</span><span>

"Описание" съдържание=" Описание на страницата">

Проверка на резултата от писане на html код

Всичко работи

Запазете нашия файл: щракнете върху файл →Запази като

В прозореца, който се отваря, изберете папката, в която ще запазим файла, въведете името на файла (например dokument), променете файловото разширение .txt на .html и задайте типа на файла на „Всички файлове“.


За да отворите нашия файл в браузър, задръжте курсора на мишката върху файла, щракнете с десния бутон, в прозореца, който се отваря, изберете „Отваряне с“ и изберете браузъра, който използваме.

Следващ урок -.

Често ни питат за възможностите за редактиране на html имейли. По правило няма проблеми с това, тъй като пощенските услуги са оборудвани с различни редактори на писма.

Но какво ще стане, ако трябва да изпратите писма само до няколко получателя и всеки от тях трябва да е индивидуален? Плащате пари само за възможността да използвате редактора на услугата?

Не е задължително. Днес ще ви кажем как да замените съдържанието на писмо в изходния код, използвайки пример текстов редакторВъзвишен текст.

Запознайте се с редактора

В същото време, за да видите самото писмо и да проследите промените в него, просто трябва да отворите html файла на писмото в прозорец на браузъра. След като запазите промените (Ctrl+S) в текста на кода, просто опреснете страницата и ще видите направените промени.

Както можете да видите, Sublime подчертава различни формати на данни в цветове в нашата версия: розово - html тагове, зелено - параметри, жълто, лилаво и синьо - стойността на различни параметри и бяло - текст.

Подмяна на текста на съобщението

Благодарение на функциите на редактора, споменати по-горе, дори дете може да се справи с подмяната на текста на писмо. Всичко, което трябва да направите, е просто да замените самия текст, маркиран в бяло от Sublime.

Струва си да се отбележи, че Sublime, подобно на Notepad, автоматично нулира форматирането на текста. Така че можете безопасно да копирате всеки текст и да го поставите на желаното място, той ще бъде показан в писмото според параметрите, посочени в кода.

И още един малък съвет, за да намерите желания текст в целия кодов масив, натиснете Ctrl+F - след това в долната част на редактора ще се появи поле за търсене на текст.

Ако е необходимо, можете да промените стила на шрифта.

Препоръчваме да използвате един от следните шрифтове - Arial, Arial Black, Tahoma, Trebuchet MS, Verdana, Courier, Courier New, Georgia, Times, Times New Roman Това са стандартни шрифтове, които се разпознават от всяка система. В противен случай вашият текст на друг компютър може да се превърне в празни приказки.

Размер- заменете желаната стойност в параметъра „размер на шрифта: 14px;“ . Нека увеличим размера на шрифта от 14 пиксела на 16.

Цвят- стойността на цвета е посочена в параметъра HEX „цвят: #323232;“ .

Можете да изберете стойността на цвета от онлайн услуги, например тук - get-color.ru.

Ще направим текста сив - #4F4F4F.

Разстояние между редовете- подобен на размера на шрифта, зададен от параметър „височина на линия: 18px;“

Формат на шрифта- определени от тагове текст - дебел, текст - курсив и текст - Долна черта.

Заслужава да се отбележи, че Sublime, когато отваря таг, автоматично добавя команда за затваряне на тага. Бъди внимателен.

Нека подчертаем нашия текст в курсив.

Нов ред- посочено от етикет
. Просто вмъкнете този етикет преди желаната част от текста.

Заменяме текста, запазваме, актуализираме и готово.

Вмъкване на връзка в текст

цел=”_празно” - тази команда е за отваряне на връзка в нов раздел. Ако искате връзката да се отваря в текущия раздел, просто не я пишете.

текст-декорация: подчертаване; - команда към браузъра за подчертаване на връзката. Ако не е необходимо подчертаване, трябва да напишете текст-декорация: няма;

Във всеки случай, не забравяйте да напишете тази команда, в противен случай всеки браузър ще реши различно дали да подчертае или не.

Това също е задължителна команда, в противен случай браузърите ще показват цвета, както сметнат за добре.

внимание! Някои имейл клиенти са по-умни, отколкото изглеждат, и ако видят връзка в текста, например „Можете да отидете на уебсайта за по-нататъшно проучване...“, тогава те могат да го подчертаят сами и по свой начин.

Вмъкване/замяна на връзка в изображение

Снимките в писмото не се съхраняват като прикачени файлове, а се намират на сървъри. Съответно в кода картината е връзка към нея, а командата за добавянето й е подобна на тази, разгледана по-горе.

www.example.com” target=”_blank” style=”текстова декорация: подчертаване; ”>

цвят:#234322; - командата за настройка на цвета не е подходяща за картината.

граница=”0” - команда за рамкиране на картина. Стойност 0 премахва бялата граница около изображението, стойности по-големи ще го направят със съответната дебелина в пиксели.

Не забравяйте да включите тази команда. Например Outlook автоматично присвоява рамка на картина, ако не посочите тази команда.

Ще бъде по-лесно да намерите част от код с картина в браузъра. За да направите това, щракнете с десния бутон върху желаното изображение и изберете „Преглед на кода“ (това са имената на тази опция в Google Chrome; името и пътя към нея може да се различават в други браузъри). Браузърът автоматично ще маркира частта, от която се нуждаете, ще копира кода и ще го постави в търсенето на Sublime.

Когато сменяте картина, внимавайте - ако размерът на новата картина се различава от размера на предишната, трябва да промените всички параметри ширинаИ височинакъм текущите.

Послеслов

Разказахме ви за най-„безболезнените“ опции за редактиране на имейл код. Ако трябва да направите по-значителни промени, силно препоръчваме да поверите такава задача на специалист по оформление или поне да създадете копие на кода преди редактиране.