Vizualizarea unui document html într-un browser. Cum să urmăriți deschiderea unui e-mail? Copiați codul scris din browser

Salutare tuturor!

Rustem a mers la Soci pentru a se bucura de climatul maritim cald. Și ne-a instruit pe Alina și pe mine să continuăm povestea despre Email marketing. Ei bine, săptămâna aceasta este postarea mea. Vă voi spune despre OpenRate.

Rata de deschidere a e-mailului (Open Rate în engleză) este una dintre cele mai importante. Ai trimis 10.000 de scrisori și doar 10 persoane le-au citit. OpenRate a fost de 0,1%. Tristeţe! Dar dacă există 2.000 de oameni, atunci nu este rău - 20%. Dar apare întrebarea, cum să aflați câți oameni au citit scrisoarea? Servicii precum Unisender, Mailchimp etc. furnizează aceste informații în interfață. Să încercăm să ne dăm seama cum obțin aceste date. Din fericire, există puține moduri - doar două.

Opțiunea 1. Imagine cu un singur pixel.

Metoda este extrem de simplă! Serviciul inserează o imagine transparentă de 1x1 pixel în scrisoare. Când utilizatorul deschide scrisoarea, imaginea este încărcată în browser. În același timp, imaginea pare să fie pe serverele „mailerului”. Când sosește o solicitare pentru o imagine (un apel către server), serviciul poate urmări ce imagine a fost solicitată. Și trageți o concluzie - ce scrisoare a fost deschisă din ce listă de corespondență.

Apropo, puteți urmări și deschiderea literelor individuale inserând codul Google Analytics în cod în loc de adresa imaginii. Și apoi numărul de deschideri va fi afișat în statisticile sale.

Dezavantajele unei astfel de urmăriri: nu funcționează în toate interfețele de mail (și programele de e-mail), iar metoda este aplicabilă numai dacă scrisoarea dvs. este în format HTML. La urma urmei, acesta este un anumit cod HTML. Metoda nu va funcționa într-un mesaj text obișnuit.

Opțiunea 2. Urmați linkurile.

A doua soluție este, de asemenea, la suprafață. Am marcat legăturile în scrisoare și am adăugat un cod special la adresa fiecărui link. Dacă cineva i-a urmărit pe site-ul nostru, atunci a deschis scrisoarea. Prin cod puteți identifica din ce newsletter a venit utilizatorul. Această metodă completează prima opțiune: dacă nu funcționează, atunci statisticile vor fi actualizate prin clicuri pe link-uri.

Apropo, a existat odată o idee de a urmări rata deschisă a scrisorilor nu pentru corespondență, ci pentru cele trimise de vânzători cu oferte comerciale. Au fost descoperite o serie de servicii străine care funcționează în cele din urmă pe aproximativ aceleași principii.

Asta e practic tot. Să aveți o săptămână de lucru fructuoasă!

Citiți cele două părți anterioare, stăpâniți pe a treia și veți fi înarmat cu toate cunoștințele tehnice pentru a lucra pe deplin în noul editor!

Cum se extrage codul literei din noul editor?

Așa că am lucrat în noua versiune proiectant. Per total mi-a placut. Cu toate acestea, dezavantajul este că nu vă permite să convertiți litera creată împreună cu textul și imaginile în cod HTML. E trist. Dar există o cale de ieșire. Trebuie să extrageți singur codul. Cum să faci asta?

Vă spun acum. În general, ai o scrisoare. Sau un șablon de scrisoare. Dacă nu, atunci reveniți la citirea acestei părți după ce creați un șablon (sau o scrisoare gata făcută pe baza acestuia).

De la bun început

Deci, să parcurgem complet întreaga procedură. De la bun început. Facem totul în patru pași.

Pasul doi. Selectați șablonul salvat.

Pasul trei. Faceți clic pe butonul „Previzualizare”. În continuare voi descrie procedura în browser Google Chrome . Făcând clic pe butonul „Previzualizare”, scrisoarea se deschide în forma în care abonatul o va vedea.

Pasul patru. Faceți clic dreapta pentru a deschide un meniu în care selectăm opțiunea „Vizualizare cod”. În browserul Chrome, mai jos se deschide o fereastră suplimentară („fereastră într-o fereastră”) cu codul HTML al literei.

Pentru a fi mai clar, mai jos sunt capturi de ecran cu toți pașii.

Cum să obțineți codul HTML al unei scrisori

Dacă treceți mouse-ul peste orice linie de cod, atunci în fereastra de previzualizare a e-mailului (o avem deschisă, este încă acolo) câmpul descris de această linie va fi marcat.

Mișcându-ne în sus, ajungem la începutul scrisorii noastre. Acesta ar putea fi primul text, de exemplu, „Bună ziua, dragă abonat” sau o imagine – logo-ul site-ului dvs.

Scrisoarea mea începe cu logo-ul. Deci vom căuta codul care începe descrierea tuturor elementelor scrisorii: text și imagini.

Fereastra cu codul poate fi amplasată orizontal (în partea de jos a ferestrei browserului), vertical (în partea dreaptă a ferestrei browserului) sau ca o fereastră independentă separată. Dar nu avem nevoie de o fereastră independentă separată, deoarece vom rătăci prin cod și vom vedea ce element al literei afișează. Este mai convenabil pentru mine să am fereastra suplimentară situată în partea de jos a ferestrei browserului.

Cum să configurați o fereastră suplimentară

Selectarea locației ferestrei suplimentare este simplă.

1. În meniul de sus al ferestrei suplimentare, în partea dreaptă, lângă cruce, există un element indicat prin trei puncte verticale. Se numește Customize and control DevTools (numele este afișat când treceți mouse-ul peste el). Să-l deschidem.
2. Selectați modul Dock to bottom.

Toate. Acum fereastra noastră suplimentară este situată în partea de jos. În acest caz, modul Elemente trebuie selectat în partea stângă a meniului de sus.

Copiați codul scris din browser

Acum trecem prin cod de sus în jos. Odată ce am găsit codul care acoperă simultan toate elementele de pe pagina scrisorii noastre, apelăm meniul cu butonul din dreapta al mouse-ului și selectăm Editare ca HTML.

Se deschide un bloc: un dreptunghi cu o mulțime de cod înăuntru. Copiați tot codul din acest dreptunghi (mai întâi apăsați combinația de taste Ctrl + A, apoi Ctrl + C).

Gata, am copiat codul HTML în clipboard, adică în memoria temporară a computerului nostru. Acum puteți salva acest cod ca șablon pe SmartResponder.

Se deschide un câmp gol pentru un șablon nou, în meniul căruia trebuie să faceți clic pe butonul „Sursă” (tocmai astăzi am văzut că acest buton a fost redenumit „Cod HTML”).

Apoi lipim codul nostru HTML folosind comanda rapidă de la tastatură Ctrl + V. Apoi indicați subiectul scrisorii (acesta este un câmp obligatoriu) și apăsați butonul „Salvați”. Gata!

Salvarea corectă a codului de e-mail

Bine, asta s-a rezolvat. Acum puteți salva opțional codul ca fișier HTML pe computer. Pentru a face acest lucru, deschideți Notepad și salvați codul în el. După aceea, schimbați extensia *.txt în *.html și deschideți fișierul. Veți vedea o copie a scrisorii dvs. în fereastra browserului.

Strict vorbind, pentru a salva codurile de program este mai bine descărcați editorul NotePad++. Îl folosesc întotdeauna pentru că Notepad este:

a) afișarea vizuală a structurii codului;
b) evidențierea sintaxelor (adică conexiunile dintre elementele de cod: unde se deschide și se închide și ce se scrie între acestea „unde ce” este scris).

Adevărat, în La procesarea codului unei scrisori create special în serviciul de corespondență SmartResponder, nici măcar NotePad++ nu m-a ajutat să obțin un cod frumos de marcare. Ajutat aici Adobe Dreamweaver CC.

Numai datorită lui a fost posibilă structurarea codului folosind comanda „Format Source Code”.

Acum puteți transfera codul în NotePad++ și îl puteți salva. Deși, nu. Înainte de a salva, trebuie să faceți clic pe „Convertire în ANSI”, astfel încât să nu existe mâzgăli în loc de text atunci când vizualizați.

De asemenea, puteți selecta „View” - „Line Break”. Apoi, tot codul va fi localizat pe lățimea paginii și nu într-o linie.

După aceasta, totul ar trebui să se deschidă și să fie afișat ca în șablonul de scrisoare de pe serviciul SmartResponder.

Rețea de siguranță: salvați codul în SmartResponder

Deoarece am „pescuit” codul din scrisoarea noastră creată în noul editor, deoarece îl avem deja, îl putem salva în serviciul SmartResponder pentru siguranță. Pentru ce? Pentru a crea litere noi pe baza acestuia, schimbați-le și, cel mai important, folosiți-le pe alte resurse (permiteți-mi să vă reamintesc că noul editor pur și simplu nu are astfel de capacități).

Pentru a face acest lucru, codul copiat din browserul Google Chrome trebuie să fie lipit în vechiul constructor SmartResponder.

Acest lucru este ușor de făcut.

1. În fila „Mailouts”, selectați secțiunea „Lista șabloane de scrisori”.
2. Faceți clic pe butonul „Creați șablon”.
3. Selectați tipul „Literă HTML colorată (editor vechi)” și faceți clic pe „Următorul”.
4. În editorul care se deschide, în meniul de instrumente pentru crearea unei scrisori, faceți clic pe butonul „Cod HTML”.
5. Lipiți codul nostru (apăsați Ctrl + V). Putem face clic din nou pe butonul „Cod HTML”, adică să dezactivăm modul de afișare a codului și să pornim modul de vizualizare aspect scrisori.
6. Asigurați-vă că completați câmpul „Subiectul scrisorii” (în rusă: dați un nume șablonului nostru).
7. Faceți clic pe butonul „Salvare”.

Practic, asta este tot ce am vrut să vă spun despre noul editor SmartResponder după ce am creat prima mea scrisoare în el.

Vreau să spun că anterior nu eram deloc familiarizat cu serviciul SmartResponder. Adică nu aveam abilități să lucrez nici în editorul vechi, nici în cel nou. Dar apoi m-am înregistrat și mi-am dat seama. Ei bine, acum știi cum să lucrezi în noul constructor SmartResponder.

Ce servicii folosești în munca ta pentru crearea și trimiterea scrisorilor?

Suntem adesea întrebați despre posibilitățile de editare a email-urilor html. De regulă, nu există probleme cu aceasta, deoarece serviciile de corespondență sunt echipate cu diverse editori de scrisori.

Dar ce se întâmplă dacă trebuie să trimiteți scrisori la doar câțiva destinatari și fiecare dintre ei trebuie să fie individual? Plătiți bani doar pentru posibilitatea de a folosi editorul de servicii?

Opțional. Astăzi vă vom spune cum să înlocuiți conținutul unei litere din codul sursă folosind exemplul editorului de text Sublime Text.

Faceți cunoștință cu editorul

În același timp, pentru a vedea scrisoarea în sine și pentru a urmări modificările din ea, trebuie doar să deschideți fișierul html al literei într-o fereastră de browser. După salvarea modificărilor (Ctrl+S) în textul codului, doar reîmprospătați pagina și veți vedea modificările făcute.

După cum puteți vedea, Sublime evidențiază diferite formate de date în culori, în versiunea noastră: roz - etichete html, verde - parametri, galben, violet și albastru - valoarea diferiților parametri și alb - text.

Înlocuirea textului mesajului

Datorită caracteristicilor editorului menționate mai sus, chiar și un copil poate face față înlocuirii textului unei scrisori. Tot ce trebuie să faceți este să înlocuiți pur și simplu textul în sine, evidențiat în alb de Sublime.

Este de remarcat faptul că Sublime, la fel ca Notepad, resetează automat formatarea textului. Deci, puteți copia în siguranță orice text și îl puteți lipi în locul dorit, acesta va fi afișat în literă conform parametrilor specificați în cod.

Și încă un mic sfat, pentru a găsi textul dorit în întreaga matrice de cod, apăsați Ctrl+F - după aceasta, un câmp de căutare text va apărea în partea de jos a editorului.

Dacă este necesar, puteți schimba stilul fontului.

Vă recomandăm să utilizați unul dintre următoarele fonturi - Arial, Arial Black, Tahoma, Trebuchet MS, Verdana, Courier, Courier New, Georgia, Times, Times New Roman Acestea sunt fonturi standard care sunt recunoscute de orice sistem. În caz contrar, textul dvs. de pe alt computer se poate transforma în gobbledygook.

Dimensiune- înlocuiți valoarea dorită în parametru „dimensiunea fontului: 14px;” . Să creștem dimensiunea fontului de la 14 pixeli la 16.

Culoare- valoarea culorii este specificată în parametrul HEX „culoare: #323232;” .

Puteți selecta valoarea culorii din serviciile online, de exemplu aici - get-color.ru.

Vom face textul gri - #4F4F4F.

Spațiere între linii- similar cu dimensiunea fontului, stabilită de parametru „linie-înălțime: 18px;”

Format de font- specificate prin etichete text - grăsime, text - cursive și text - subliniere.

Este de remarcat faptul că Sublime, la deschiderea unei etichete, adaugă automat o comandă de închidere a etichetei. Atenție.

Să evidențiem textul nostru cu caractere cursive.

Rupere de linie- specificat prin etichetă
. Doar introduceți această etichetă înaintea secțiunii dorite de text.

Înlocuim textul, salvăm, actualizăm și gata.

Inserarea unui link în text

target="_blank" - această comandă este pentru a deschide un link într-o filă nouă. Dacă doriți ca linkul să se deschidă în fila curentă, nu-l scrieți.

text-decor: subliniere; - comanda către browser pentru a sublinia linkul. Dacă sublinierea nu este necesară, trebuie să scrieți text-decor: niciuna;

În orice caz, asigurați-vă că scrieți această comandă, altfel fiecare browser va decide diferit dacă subliniază sau nu.

Aceasta este, de asemenea, o comandă obligatorie, în caz contrar browserele vor afișa culoarea așa cum consideră de cuviință.

Atenţie! Unii clienți de e-mail sunt mai inteligenți decât par și dacă văd un link în text, de exemplu, „Puteți accesa site-ul web pentru studiu suplimentar...”, atunci îl pot evidenția singuri și în felul lor.

Inserarea/înlocuirea unui link într-o imagine

Imaginile din scrisoare nu sunt stocate ca atașamente, ci sunt localizate pe servere. În consecință, în cod, imaginea este un link către aceasta, iar comanda pentru adăugarea acesteia este similară cu cea discutată mai sus.

www.example.com” target="_blank” style="text-decor: subliniere; ”>