Lesen Sie die beiden vorherigen Teile, meistern Sie den dritten und Sie sind mit allem gerüstet technisches Wissen für vollwertige Arbeit im neuen Editor!

Wie extrahiere ich den Buchstabencode aus dem neuen Editor?

Also habe ich mitgearbeitet neue Version Designer. Insgesamt hat es mir gefallen. Der Nachteil besteht jedoch darin, dass Sie den erstellten Brief zusammen mit Text und Bildern nicht in HTML-Code konvertieren können. Es ist traurig. Aber es gibt einen Ausweg. Sie müssen den Code selbst extrahieren. Wie kann man das machen?

Ich sage es dir jetzt. Im Allgemeinen haben Sie einen Brief. Oder eine Briefvorlage. Wenn nicht, lesen Sie diesen Teil erneut, nachdem Sie eine Vorlage (oder einen darauf basierenden vorgefertigten Brief) erstellt haben.

Von Anfang an

Lassen Sie uns also den gesamten Vorgang vollständig durchgehen. Von Anfang an. Wir machen alles in vier Schritten.

Schritt zwei. Wählen Sie die gespeicherte Vorlage aus.

Schritt drei. Klicken Sie auf die Schaltfläche „Vorschau“. Als nächstes beschreibe ich die Vorgehensweise im Browser Google Chrome . Durch Klicken auf die Schaltfläche „Vorschau“ öffnet sich der Brief in der Form, in der er dem Abonnenten angezeigt wird.

Schritt vier. Klicken Sie mit der rechten Maustaste, um ein Menü zu öffnen, in dem wir die Option „Code anzeigen“ auswählen. IN Chrome-Browser Danach öffnet sich unten ein zusätzliches Fenster („Fenster im Fenster“) mit dem HTML-Code des Briefes.

Um es klarer zu machen, finden Sie unten Screenshots aller Schritte.

So erhalten Sie den HTML-Code eines Briefes

Wenn Sie mit der Maus über eine Codezeile fahren, wird im E-Mail-Vorschaufenster (wir haben es geöffnet, es ist immer noch da) das Feld markiert, das diese Zeile beschreibt.

Wenn wir nach oben gehen, erreichen wir den Anfang unseres Briefes. Dies kann der allererste Text sein, zum Beispiel „Hallo, lieber Abonnent“, oder ein Bild – das Logo Ihrer Website.

Mein Brief beginnt mit dem Logo. Wir suchen also nach dem Code, der mit der Beschreibung aller Elemente des Briefes beginnt: Text und Bilder.

Das Fenster mit dem Code kann horizontal (am unteren Rand des Browserfensters), vertikal (auf der rechten Seite des Browserfensters) oder als separates unabhängiges Fenster angeordnet sein. Wir benötigen jedoch kein separates unabhängiges Fenster, da wir den Code durchgehen und sehen, welches Element des Buchstabens angezeigt wird. Für mich ist es praktischer, wenn sich das zusätzliche Fenster unten im Browserfenster befindet.

So richten Sie ein zusätzliches Fenster ein

Die Auswahl des Standorts des zusätzlichen Fensters ist einfach.

1. Im oberen Menü des Zusatzfensters befindet sich auf der rechten Seite neben dem Kreuz ein Element, das durch drei vertikale Punkte gekennzeichnet ist. Es heißt „DevTools anpassen und steuern“ (der Name wird angezeigt, wenn Sie mit der Maus darüber fahren). Lass es uns öffnen.
2. Wählen Sie den Modus „An Boden andocken“ aus.

Alle. Jetzt befindet sich unten unser Zusatzfenster. In diesem Fall muss im linken Teil des oberen Menüs der Elements-Modus ausgewählt werden.

Kopieren Sie den Buchstabencode aus dem Browser

Nun gehen wir den Code von oben nach unten durch. Sobald wir den Code gefunden haben, der alle Elemente auf der Seite unseres Briefes gleichzeitig abdeckt, rufen wir mit der rechten Maustaste das Menü auf und wählen Als HTML bearbeiten.

Es öffnet sich ein Block: ein Rechteck mit sehr viel Code darin. Kopieren Sie den gesamten Code innerhalb dieses Rechtecks ​​(drücken Sie zuerst die Tastenkombination Strg + A, dann Strg + C).

Das war's, wir haben den HTML-Code in die Zwischenablage, also in den temporären Speicher unseres Computers, kopiert. Jetzt können Sie diesen Code als Vorlage auf SmartResponder speichern.

Es öffnet sich ein leeres Feld für eine neue Vorlage, in dessen Menü Sie auf die Schaltfläche „Quelle“ klicken müssen (erst heute habe ich gesehen, dass diese Schaltfläche jetzt in „HTML-Code“ umbenannt wurde).

Anschließend fügen wir unseren HTML-Code mit der Tastenkombination Strg + V ein. Geben Sie dann den Betreff des Briefes ein (dies ist ein Pflichtfeld) und klicken Sie auf die Schaltfläche „Speichern“. Bereit!

E-Mail-Code korrekt speichern

Okay, das ist geklärt. Jetzt können Sie den Code optional als HTML-Datei auf Ihrem Computer speichern. Öffnen Sie dazu einfach Notepad und speichern Sie den Code darin. Ändern Sie anschließend die Erweiterung *.txt in *.html und öffnen Sie die Datei. Im Browserfenster sehen Sie eine Kopie Ihres Briefes.

Streng genommen ist es besser, Programmcodes zu speichern Laden Sie den NotePad++-Editor herunter. Ich benutze es immer, weil Notepad:

a) visuelle Darstellung der Codestruktur;
b) Syntaxhervorhebung (d. h. Verbindungen zwischen Codeelementen: wo was geöffnet und geschlossen wird und was dazwischen geschrieben wird „wo was“ geschrieben wird).

Stimmt, in Bei der Verarbeitung des Codes eines Briefes, der speziell im SmartResponder-Mailingdienst erstellt wurde, half mir selbst NotePad++ nicht dabei, ein schönes Code-Markup zu erhalten. Hat hier geholfen Adobe Dreamweaver CC.

Nur dank ihm war es möglich, den Code mit dem Befehl „Quellcode formatieren“ zu strukturieren.

Jetzt können Sie den Code in NotePad++ übertragen und speichern. Obwohl, nein. Vor dem Speichern müssen Sie auf „In ANSI konvertieren“ klicken, damit bei der Anzeige kein Gekritzel statt Text erscheint.

Sie können auch „Ansicht“ – „Zeilenumbruch“ auswählen. Dann befindet sich der gesamte Code über die gesamte Breite der Seite und nicht in einer Zeile.

Danach sollte sich alles öffnen und wie in der Briefvorlage im SmartResponder-Dienst angezeigt werden.

Sicherheitsnetz: Speichern Sie den Code in SmartResponder

Da wir den Code aus unserem im neuen Editor erstellten Brief „gefischt“ haben, da wir ihn bereits haben, können wir ihn zur Sicherheit im SmartResponder-Dienst speichern. Wofür? Erstellen Sie darauf basierend neue Briefe, ändern Sie sie und verwenden Sie sie vor allem auf anderen Ressourcen (ich möchte Sie daran erinnern, dass der neue Editor einfach nicht über solche Funktionen verfügt).

Dazu wird der Code von kopiert Google-Browser Chrome müssen Sie es in den alten SmartResponder-Konstruktor einfügen.

Dies ist einfach zu bewerkstelligen.

1. Wählen Sie im Reiter „Mailouts“ den Abschnitt „Liste der Briefvorlagen“.
2. Klicken Sie auf die Schaltfläche „Vorlage erstellen“.
3. Wählen Sie den Typ „Bunter HTML-Brief (alter Editor)“ und klicken Sie auf „Weiter“.
4. Klicken Sie im sich öffnenden Editor im Menü der Tools zum Erstellen eines Briefes auf die Schaltfläche „HTML-Code“.
5. Fügen Sie unseren Code ein (drücken Sie Strg + V). Wir können erneut auf die Schaltfläche „HTML-Code“ klicken, dh den Code-Anzeigemodus deaktivieren und den Ansichtsmodus aktivieren Aussehen Briefe.
6. Füllen Sie unbedingt das Feld „Betreff des Briefes“ aus (auf Russisch: Geben Sie unserer Vorlage einen Namen).
7. Klicken Sie auf die Schaltfläche „Speichern“.

Das ist im Grunde alles, was ich Ihnen über den neuen SmartResponder-Editor erzählen wollte, nachdem ich meinen ersten Brief darin erstellt habe.

Ich möchte sagen, dass ich den SmartResponder-Dienst bisher überhaupt nicht kannte. Das heißt, ich hatte vorher weder Kenntnisse im alten noch im neuen Editor. Aber dann habe ich mich registriert und es herausgefunden. Nun wissen Sie, wie Sie im neuen SmartResponder-Konstruktor arbeiten.

Welche Dienste nutzen Sie bei Ihrer Arbeit zum Erstellen und Versenden von Briefen?

Wir werden oft nach den Möglichkeiten der Bearbeitung von HTML-E-Mails gefragt. In der Regel gibt es dabei keine Probleme, da Mailing-Dienste mit verschiedenen Briefeditoren ausgestattet sind.

Was aber, wenn Sie Briefe an nur wenige Empfänger versenden müssen und jeder von ihnen individuell sein muss? Geld nur für die Möglichkeit bezahlen, den Service-Editor nutzen zu können?

Nicht unbedingt. Heute verraten wir Ihnen am Beispiel des Texteditors Sublime Text, wie Sie den Inhalt eines Buchstabens im Quellcode ersetzen.

Treffen Sie den Herausgeber

Um gleichzeitig den Brief selbst zu sehen und Änderungen darin zu verfolgen, müssen Sie lediglich die HTML-Datei des Briefes in einem Browserfenster öffnen. Nachdem Sie die Änderungen (Strg+S) im Codetext gespeichert haben, aktualisieren Sie einfach die Seite und Sie sehen die vorgenommenen Änderungen.

Wie Sie sehen können, hebt Sublime in unserer Version verschiedene Datenformate in Farben hervor: Rosa – HTML-Tags, Grün – Parameter, Gelb, Lila und Blau – der Wert verschiedener Parameter und Weiß – Text.

Nachrichtentext ersetzen

Dank der oben genannten Funktionen des Editors kann sogar ein Kind den Text eines Briefes ersetzen. Sie müssen lediglich den Text selbst ersetzen, der von Sublime weiß hervorgehoben wird.

Es ist erwähnenswert, dass Sublime wie Notepad die Textformatierung automatisch zurücksetzt. Sie können also jeden Text sicher kopieren und an der gewünschten Stelle einfügen. Er wird im Brief gemäß den im Code angegebenen Parametern angezeigt.

Und noch ein kleiner Tipp: Um den gewünschten Text im gesamten Code-Array zu finden, drücken Sie Strg+F – danach erscheint am unteren Rand des Editors ein Textsuchfeld.

Bei Bedarf können Sie den Schriftstil ändern.

Wir empfehlen die Verwendung einer der folgenden Schriftarten: Arial, Arial Black, Tahoma, Trebuchet MS, Verdana, Courier, Courier New, Georgia, Times, Times New Roman. Dies sind Standardschriftarten, die von jedem System erkannt werden. Andernfalls könnte sich Ihr Text auf einem anderen Computer in Kauderwelsch verwandeln.

Größe- Ersetzen Sie den gewünschten Wert im Parameter „Schriftgröße: 14px;“ . Erhöhen wir die Schriftgröße von 14 Pixel auf 16.

Farbe- Der Farbwert wird im HEX-Parameter angegeben „Farbe: #323232;“ .

Sie können den Farbwert bei Online-Diensten auswählen, zum Beispiel hier – get-color.ru.

Wir machen den Text grau - #4F4F4F.

Zeilenabstand- ähnlich der Schriftgröße, per Parameter einstellbar „Zeilenhöhe: 18px;“

Schriftformat- durch Tags spezifiziert Text - fett, Text - Kursivschrift und Text - Unterstrich.

Es ist erwähnenswert, dass Sublime beim Öffnen eines Tags automatisch einen Befehl zum Schließen des Tags hinzufügt. Seien Sie aufmerksam.

Lassen Sie uns unseren Text kursiv hervorheben.

Zeilenumbruch- spezifiziert durch Tag
. Fügen Sie einfach vorher dieses Tag ein die benötigte Fläche Text.

Wir ersetzen den Text, speichern, aktualisieren und fertig.

Einen Link in einen Text einfügen

target=“_blank“ – Mit diesem Befehl öffnen Sie einen Link in einem neuen Tab. Wenn Sie möchten, dass der Link im aktuellen Tab geöffnet wird, schreiben Sie ihn einfach nicht.

Textdekoration: unterstrichen; - Befehl an den Browser, den Link zu unterstreichen. Wenn keine Unterstreichung erforderlich ist, müssen Sie schreiben Textdekoration: keine;

Schreiben Sie diesen Befehl auf jeden Fall unbedingt, da sonst jeder Browser anders entscheidet, ob er unterstreicht oder nicht.

Dies ist auch ein erforderlicher Befehl, andernfalls zeigen Browser die Farbe so an, wie sie es für richtig halten.

Aufmerksamkeit! Manche E-Mail-Clients sind schlauer, als sie scheinen, und wenn sie im Text einen Link sehen, zum Beispiel „Sie können zur Website gehen, um sich weiter zu informieren ...“, dann können sie ihn selbst und auf ihre eigene Art hervorheben.

Einen Link in ein Bild einfügen/ersetzen

Bilder im Brief werden nicht als Anhänge gespeichert, sondern liegen auf Servern. Dementsprechend ist das Bild im Code ein Link dazu, und der Befehl zum Hinzufügen ähnelt dem oben besprochenen.

www.example.com” target=“_blank“ style=“text-decoration: underline; ”>

Farbe:#234322; - Der Farbeinstellungsbefehl ist für das Bild nicht relevant.

border=“0“ - Befehl zum Einrahmen von Bildern. Ein Wert von 0 entfernt den weißen Rand um das Bild, bei höheren Werten erhält es die entsprechende Dicke in Pixeln.

Stellen Sie sicher, dass Sie diesen Befehl einschließen. Beispielsweise weist Outlook einem Bild automatisch einen Rahmen zu, wenn Sie diesen Befehl nicht angeben.

Es wird einfacher sein, einen Codeabschnitt mit einem Bild im Browser zu finden. Klicken Sie dazu mit der rechten Maustaste auf das gewünschte Bild und wählen Sie „Code anzeigen“ (dies sind die Namen dieser Option in Google Chrome; Name und Pfad dazu können in anderen Browsern abweichen). Der Browser markiert automatisch den benötigten Teil, kopiert den Code und fügt ihn in die Sublime-Suche ein.

Seien Sie beim Ersetzen eines Bildes vorsichtig – wenn die Größe des neuen Bildes von der Größe des vorherigen abweicht, müssen Sie alle Parameter ändern Breite Und Höhe zu den aktuellen.

Nachwort

Wir haben Ihnen die „schmerzlosesten“ Optionen zum Bearbeiten von E-Mail-Code vorgestellt. Wenn Sie größere Änderungen vornehmen müssen, empfehlen wir dringend, diese Aufgabe einem Layout-Spezialisten zu übertragen oder zumindest vor der Bearbeitung eine Kopie des Codes zu erstellen.

Hallo zusammen!

Rustem reiste nach Sotschi, um das warme Meeresklima zu genießen. Und er wies Alina und mich an, die Geschichte über E-Mail-Marketing fortzusetzen. Nun, diese Woche ist mein Beitrag. Ich erzähle Ihnen von OpenRate.

Die Öffnungsrate von E-Mails (Open Rate in Englisch) ist eine der wichtigsten. Sie haben 10.000 Briefe verschickt und nur 10 Leute haben sie gelesen. OpenRate betrug 0,1 %. Traurigkeit! Aber wenn es 2.000 Leute sind, dann ist das nicht schlecht – 20 %. Es stellt sich jedoch die Frage, wie man herausfinden kann, wie viele Personen den Brief gelesen haben. Dienste wie Unisender, Mailchimp usw. stellen diese Informationen in der Schnittstelle bereit. Versuchen wir herauszufinden, wie sie an diese Daten gelangen. Glücklicherweise gibt es nur wenige Möglichkeiten – nur zwei.

Option 1. Einzelpixelbild.

Die Methode ist denkbar einfach! Der Dienst fügt ein transparentes 1x1 Pixel großes Bild in den Brief ein. Wenn der Benutzer den Brief öffnet, wird das Bild in den Browser geladen. Gleichzeitig scheint das Bild auf den Servern des „Mailers“ zu liegen. Wenn eine Anfrage nach einem Bild eingeht (ein Anruf beim Server), kann der Dienst nachverfolgen, welches Bild angefordert wurde. Und ziehen Sie ein Fazit: Welcher Brief wurde von welcher Mailingliste geöffnet?

Übrigens können Sie das Öffnen einzelner Briefe auch verfolgen, indem Sie anstelle der Bildadresse Google Analytics-Code in den Code einfügen. Und dann wird die Anzahl der Öffnungen in der Statistik angezeigt.

Nachteile eines solchen Trackings: Es funktioniert nicht in allen Mailer-Schnittstellen (und Mailprogramme), und die Methode ist auch nur anwendbar, wenn Ihr Brief im HTML-Format vorliegt. Schließlich handelt es sich hierbei um einen bestimmten HTML-Code. Die Methode funktioniert nicht in einer normalen Textnachricht.

Option 2. Folgen Sie den Links.

Die zweite Lösung liegt ebenfalls an der Oberfläche. Wir haben die Links im Brief markiert und der Adresse jedes Links einen speziellen Code hinzugefügt. Wenn ihnen jemand auf unsere Website gefolgt ist, hat er den Brief geöffnet. Anhand des Codes können Sie erkennen, von welchem ​​Newsletter der Nutzer kam. Diese Methode ergänzt die erste Option: Wenn es nicht funktioniert, werden die Statistiken durch Klicks auf die Links aktualisiert.

Übrigens gab es einmal die Idee, die Öffnungsrate von Briefen nicht für den Postversand, sondern für Briefe zu verfolgen, die von Verkäufern mit verschickt wurden kommerzielle Angebote. Es wurden eine Reihe ausländischer Dienste entdeckt, die letztlich nach annähernd den gleichen Prinzipien arbeiten.

Das ist es im Grunde. Ich wünsche Ihnen eine fruchtbare Arbeitswoche!

Während einige Benutzer theoretisches Material zur HTML-Sprache studieren, haben sie eine Frage: Wie Fügen Sie die HTML-Datei in den Webbrowser ein? Wie bereits geschriebener HTML-Code, hineinsehen Browser. Sehen sozusagen das Ergebnis der geleisteten Arbeit.

Wie bereits vereinbart, schreiben wir unseren HTML-Code im Notepad-Programm (aber niemand verbietet die Verwendung anderer Editoren, zum Beispiel Notepad++, was noch bequemer ist).

Öffnen Sie also das Notepad-Programm und schreiben Sie HTML-Code hinein. Nehmen wir den HTML-Code aus der letzten Lektion.

„Beschreibung“ content=" Beschreibung der Seite">

Es stimmt, ein solcher HTML-Code gibt uns im Browser nichts. Erforderlich zwischen Tags Und Schreiben Sie etwas anderes, zum Beispiel einen Titel und ein paar Absätze:

Alles arbeitet

Wir fügen diese drei Zeilen zu unserem HTML-Code hinzu und erhalten Code wie diesen:

„Beschreibung“ content=" Beschreibung der Seite">

Überprüfen des Ergebnisses des Schreibens von HTML-Code

Alles arbeitet

Speichern Sie unsere Datei: Klicken Sie auf Datei → speichern als

Wählen Sie im sich öffnenden Fenster den Ordner aus, in dem wir die Datei speichern möchten, geben Sie den Dateinamen ein (z. B. dokument), ändern Sie die Dateierweiterung .txt in .html und stellen Sie den Dateityp auf „Alle Dateien“ ein.

Um unsere Datei in einem Browser zu öffnen, bewegen Sie den Mauszeiger über die Datei, klicken Sie mit der rechten Maustaste, wählen Sie im sich öffnenden Fenster „Öffnen mit“ und wählen Sie den von uns verwendeten Browser aus.

Nächste Lektion - .