Hi all!
Rustem left us for Sochi, to enjoy the warm maritime climate. Alina and I were instructed to continue the story about Email marketing. Well, this week is my post. I'll tell you about OpenRate.
The open rate of letters (Open Rate in English) is one of the most important. You sent 10,000 letters and only 10 people read it. OpenRate was 0.1%. Sadness! But if there are 2,000 people, then it’s not bad - 20%. But the question arises, how to find out how many people have read the letter? Services such as Unisender, Mailchimp, etc. provide this information in the interface. Let's try to figure out how they get this data. Fortunately, there are few ways - only two.
Option 1. Single pixel image.
The method is extremely simple! The service inserts a transparent 1×1 pixel image into the email. When the user opens the email, the image is loaded in the browser. At the same time, the picture seems to be located on the servers of the “mailer”. When an image request comes in (a request to the server), the service can track which image was requested. And to draw a conclusion - which letter, from which mailing list was opened.
By the way, you can track the opening of single letters in this way by inserting the GoogleAnalytics code into the code instead of the image address. And then the number of openings will be shown in his statistics.
The disadvantages of such tracking: it does not work in all interfaces of mailers (and mail programs), and the method is also applicable only if your letter is in HTML format. After all, this is a certain html-code. In a regular text message, the method will not work.
Option 2. Follow links.
The second solution is also on the surface. We marked the links in the letter, added a special code to the address of each link. If someone followed them to our site, then he opened the letter. By the code, you can identify which mailing list the user came from. This method complements the first option: if it didn’t work, then the statistics will be clarified by link clicks.
By the way, there was once an idea to track the open rate of letters not for mailing, but for those sent by sellers with commercial offers. A number of foreign services were discovered, which ultimately work on approximately the same principles.
That's basically it. Have a fruitful working week!
We are often asked about the possibilities of editing html emails. As a rule, there are no problems with this, since mailing services are equipped with various letter editors.
But what if you need to send letters to only a few recipients and each of them must be individual? Pay money only for the opportunity to use the service editor?
Not necessary. Today we will tell you how to replace the content of the letter in the source code using the Sublime Text text editor as an example.
Getting to know the editor
At the same time, in order to see the letter itself and track changes in it, you just need to open the html-file of the letter in a browser window. After saving the changes (Ctrl + S) in the code text, just refresh the page and you will see the changes made.
As you can see, Sublime highlights different data formats with colors, in our version: pink for html tags, green for options, yellow, purple and blue for value of various options, and white for text.
Replacing the text of the letter
Thanks to the features of the editor voiced above, a child can also cope with replacing the text of a letter. All that is required of you is to simply replace the text itself, highlighted in white by Sublime.
It is worth noting that Sublime, as well as Notepad, automatically resets text formatting. So, you can safely copy any text and paste it in the right place, it will be displayed in the letter according to the parameters specified in the code.
And one more little tip, in order to find desired text in the entire code array, press Ctrl+F - after that, a text search field will appear at the bottom of the editor.
If necessary, you can change the font style.
We recommend using one of the following fonts - Arial, Arial Black, Tahoma, Trebuchet MS, Verdana, Courier, Courier New, Georgia, Times, Times New Roman. These are standard fonts that are recognized by any system. Otherwise, your text on another computer may turn into gibberish.
The size- substitute the desired value in the parameter “font-size: 14px;” . Let's increase the font size from 14px to 16px.
Color- color value is set in HEX parameter “color: #323232;” .
You can choose the color value using one of the online services, for example here - get-color.ru.
We will make the text gray - #4F4F4F.
Line spacing- by analogy with the font size, set by the parameter line-height: 18px;
Font format- set by tags text - fat, text - italics and text - underlining.
It is worth noting that Sublime, when opening a tag, automatically adds a command to close the tag. Be careful.
Let's make our text italic.
Line break- set by tag
. Just insert this tag before the desired section of text.
Replace the text, save, update and you're done.
Inserting a link in text
target=”_blank” - this command to open the link in a new tab. If you want the link to open in the current tab, just leave it out.
text-decoration: underline; - a command to the browser to underline the link. If underlining is not required, you need to write text-decoration: none;
In any case, be sure to write this command, otherwise each browser will decide in its own way whether to underline or not.
This is also a required command, otherwise browsers will display the color as they see fit.
Attention! Some email clients are smarter than they look, and if they see a link in the text, for example, “You can go to the website to further study…”, then they can highlight it independently and in their own way.
Inserting/replacing a link in an image
Pictures in the letter are not stored as attachments, but are located on the servers. Accordingly, in the code, the picture is a link to it, and the command for adding it is similar to the one discussed above.
www.example.com”target=”_blank” style=”text-decoration: underline; ”>
color:#234322; - the color setting command is not relevant for the picture.
border="0" - picture framing command. A value of 0 removes the white border around the image, values larger than that will blow out its corresponding pixel width.
Be sure to enter this command. For example, Outlook automatically assigns a frame to a picture if you do not register this command.
Finding a piece of code with a picture will be easier in the browser. To do this, right-click on the required image and select “View Code” (these are the names of this option in Google Chrome, the name and path to it in other browsers may differ). The browser will automatically highlight the right part for you, copy the code and paste it into the Sublime search.
When replacing a picture, be careful - if its size of the new picture differs from the size of the previous one, you need to change all the parameters width and height to the current ones.
Afterword
We told you about the most “painless” options for editing the email code. If you need to make more significant changes, we strongly recommend entrusting such a task to a layout specialist, or at least create a copy of the code before editing.
Read the previous two parts, master the third, and you will be armed with all the technical knowledge to fully work in the new editor!
How to pull the email code from the new editor?
So I worked in new version constructor. In general, I liked him. However, the downside is that it does not allow you to convert the created letter, along with text and pictures, into HTML code. It is sad. But there is a way out. You need to extract the code yourself. How to do it?
Now I'll tell you. In general, you have a letter. Or a letter template. If not, then return to reading this part after you create a template (or a ready-made letter based on it).
From the very beginning
So, let's go through the whole procedure completely. From the very beginning. We do everything in four steps.
Step two. Select a saved template.
Step three. Click on the "Preview" button. Next, I will describe the procedure in the browser Google Chrome. By clicking on the "Preview" button, the letter is opened in the form in which the subscriber will see it.
Step four. Right-click to bring up the menu, where we select the "View Code" option. In the Chrome browser, after that, an additional window (“window in a window”) opens from the bottom with the HTML code of the letter.
To make it clearer, below are screenshots of all the steps.
How to get email HTML code
If you move the mouse cursor over any line of code, then in the message preview window (we have it open, it hasn't gone anywhere) the field that this line describes will be marked.
Moving up, we reach the very beginning of our letter. This may be the very first text, for example, "Hello, dear subscriber", or a picture - the logo of your site.
My letter begins with a logo. So we will look for the code from which the description of all elements of the letter begins: text and pictures.
The window with the code can be placed horizontally (at the bottom of the browser window), vertically (on the right side of the browser window), or as a separate independent window. But we do not need a separate independent window, because we will wander through the code and see which element of the letter it displays. It is more convenient for me that the additional window is located at the bottom of the browser window.
How to set up an additional window
Selecting the location of the additional window is simple.
- In the upper menu of the additional window, in the right part, next to the cross, there is an element indicated by three vertical dots. It's called Customize and control DevTools (the name is displayed when you hover over the mouse). We open it.
- Select Dock to bottom mode.
Everything. Now our additional window is located at the bottom. In this case, the Elements mode must be selected in the left part of the top menu.
Copying the email code from the browser
Now let's move through the code from top to bottom. Once we have found the code that simultaneously covers all the elements on the page of our letter, we call the menu with the right mouse button and select Edit as HTML.
A block opens: a rectangle, inside of which there is a lot of code. Copy all the code inside this rectangle (first press the key combination Ctrl + A, then Ctrl + C).
That's it, we copied the HTML code to the clipboard, that is, to the temporary memory of our computer. Now you can save this code as a template on SmartResponder.
A blank field of a new template opens, in the menu of which you must definitely click the "Source" button (just today I saw that now this button has been renamed to "HTML code").
Then we paste our HTML code with the keyboard shortcut Ctrl + V . Then indicate the subject of the letter (this is a required field) and press the "Save" button. Ready!
Correctly saving the email code
Yes, that's sorted out. Now you can additionally save the code as an HTML file on your computer. To do this, just open Notepad and save the code in it. Then change the *.txt extension to *.html and open the file. You will see a copy of your letter in the browser window.
Strictly speaking, for saving program codes, it is better download NotePad++ editor. I always use it because Notepad is:
a) visual display of the code structure;
b) syntax highlighting (that is, links between code elements: where what opens and closes and what is written between these “where what” is written).
True, in 
learning how to process the code of a letter created specifically in the SmartResponder mailing service, even NotePad ++ did not help me get a beautiful code markup. Helped out here Adobe Dreamweaver CC.
Only thanks to him it was possible to structure the code using the "Format source code" command.
Now you can transfer the code to NotePad++ and save it. Although, no. Before saving, you need to click "Convert to ANSI" so that there is no scrawl instead of text when viewing.
You can also select "View" - "Wrap lines". Then all the code will be located on the width of the page, and not in a line.
After that, everything should open and display as in the letter template on the SmartResponder service.
Safety net: save the code in SmartResponder
Since we “fished out” the code from our letter created in the new editor, since we already have it, we can save it in the SmartResponder service for safety. What for? To create new letters based on it, change them, and, most importantly, use them on other resources (I remind you that there are simply no such features in the new editor).
To do this, the code copied from the Google Chrome browser must be pasted into the old SmartResponder constructor.
This is done easily.
- In the "Mailouts" tab, select the "List of letter templates" section.
- Click on the "Create Template" button.
- Select the type "Colorful HTML email (old editor)" and click "Next".
- In the editor that opens, in the menu of tools for creating a letter, click on the "HTML code" button.
- Paste our code (press Ctrl + V). We can click on the “HTML code” button again, that is, turn off the code display mode and turn on the view mode appearance letters.
- Be sure to fill in the “Subject of the letter” field (in Russian: we give the name to our template).
- I press the "Save" button.
That, in fact, is all that I wanted to tell you about the new SmartResponder editor after I created my first letter in it.
I want to say that I was not familiar with the SmartResponder service at all before. That is, I had no skills in working either in the old or in the new editor. But I signed up and figured it out. Well, now you know how to work in the new SmartResponder constructor.
And what services for creating and sending letters do you use in your work?
In the course of studying the theoretical material on the HTML language, some users have a question: how paste html file into web browser? Like the already written html code, view in browser. See so to speak, the result of the work done.
As we have already agreed, we write our html code in the Notepad program (but no one forbids using other editors, for example, Notepad ++, which is even more convenient).
And so, open the Notepad program and write some html code in it. Let's take the html code from the last lesson.
"Description" content=" Page description">
True, such an html code will not give us anything in the browser. Required between tags
and
write something else, for example, a heading and a couple of paragraphs:
Everything is working
We add these three lines to our html code and we get code like this:
"Description" content=" Page description">
Checking the result of writing html code
Everything is working
Save our file: click file → save as
In the window that opens, select the folder in which we will save the file, write the file name (for example, dokument), change the .txt file extension to .html, and set the file type to "All Files".
To open our file in the browser, hover over the file, right-click, select "Open with" in the window that opens, and select the browser we use.
The next lesson is .