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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В същото време, за да видите самото писмо и да проследите промените в него, просто трябва да отворите 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;“ . Нека увеличим размера на шрифта от 14px на 16px.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Послеслов

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

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

Как да изтегля имейл кода от новия редактор?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сега нека преминем през кода отгоре надолу. След като намерим кода, който покрива едновременно всички елементи на страницата на нашето писмо, извикваме менюто с десния бутон на мишката и избираме Редактиране като 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 и задайте типа на файла на „Всички файлове“.


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

Следващият урок е.