Hi all!

Rustem went to Sochi to enjoy the warm maritime climate. And he instructed Alina and me to continue the story about Email marketing. Well, this week is my post. I'll tell you about OpenRate.

The open rate of emails (Open Rate in English) is one of the most important. You sent 10,000 letters, and only 10 people read them. OpenRate was 0.1%. Sadness! But if there are 2,000 people, then that’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 1x1 pixel image into the letter. When the user opens the letter, the image is loaded in the browser. At the same time, the picture seems to be on the servers of the “mailer”. When a request for a picture comes (a call to the server), the service can track which picture was requested. And draw a conclusion - which letter was opened from which mailing list.

By the way, you can also track the opening of single letters by inserting Google Analytics code into the code instead of the image address. And then the number of openings will be shown in its statistics.

Disadvantages of such tracking: it does not work in all mailer interfaces (and email programs), and the method is only applicable if your letter is in HTML format. After all, this is a certain html code. The method will not work in a regular text message.

Option 2. Follow links.

The second solution is also on the surface. We marked the links in the letter and added a special code to the address of each link. If someone followed them to our website, then he opened the letter. By the code you can identify which newsletter the user came from. This method complements the first option: if it does not work, then the statistics will be clarified by clicks on links.

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 have been discovered that ultimately work on approximately the same principles.

That's basically it. Have a fruitful working week!

Read the two previous parts, master the third, and you will be armed with all the technical knowledge to fully work in the new editor!

How to extract the letter code from the new editor?

So I worked in new version designer. Overall I liked it. However, the downside is that it does not allow you to convert the created letter along with text and images into HTML code. It is sad. But there is a way out. You need to extract the code yourself. How to do it?

I'll tell you now. 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 the 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 opens in the form in which the subscriber will see it.

Step four. Right-click to open a menu where we select the “View code” option. In the Chrome browser, an additional window (“window within a window”) with the HTML code of the letter opens below.

To make it clearer, below are screenshots of all the steps.

How to get the HTML code of a letter

If you hover your mouse over any line of code, then in the email preview window (we have it open, it’s still there) the field that this line describes will be marked.

Moving upward, we reach the very beginning of our letter. This could be the very first text, for example, “Hello, dear subscriber,” or a picture – the logo of your site.

My letter begins with the logo. So we will look for the code that begins the description of all elements of the letter: text and pictures.

The window with the code can be located 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 don’t need a separate independent window, because we will wander through the code and see what element of the letter it displays. It is more convenient for me to have the additional window located at the bottom of the browser window.

How to set up an additional window

Selecting the location of the additional window is simple.

1. In the top menu of the additional window, on the right side, 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 your mouse over it). Let's open it.
2. Select the Dock to bottom mode.

All. 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.

Copy the letter code from the browser

Now we 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 up the menu with the right mouse button and select Edit as HTML.

A block opens: a rectangle with lots and lots of code inside. 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 for a new template opens, in the menu of which you must click the “Source” button (just today I saw that this button has now been renamed “HTML code”).

Then we paste our HTML code using 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

Okay, that's sorted out. Now you can optionally save the code as an HTML file on your computer. To do this, just open Notepad and save the code in it. After that, change the *.txt extension to *.html and open the file. You will see a copy of your letter in the browser window.

Strictly speaking, to save 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, connections between code elements: where what opens and closes and what is written between these “where what” is written).

True, in When processing 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 was it 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 scribble instead of text when viewing.

You can also select “View” - “Line Break”. Then all the code will be located across the width of the page, and not in a line.

After this, everything should open and be displayed as in the letter template on the SmartResponder service.

Safety net: save the code in SmartResponder

Since we “fished” 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. For what? To create new letters based on it, change them, and, most importantly, use them on other resources (let me remind you that the new editor simply does not have such capabilities).

To do this, the code copied from the Google Chrome browser must be pasted into the old SmartResponder constructor.

This is easy to do.

1. In the “Mailouts” tab, select the “List of Letter Templates” section.
2. Click on the “Create Template” button.
3. Select the type “Colorful HTML letter (old editor)” and click “Next”.
4. In the editor that opens, in the menu of tools for creating a letter, click on the “HTML code” button.
5. 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.
6. Be sure to fill out the “Letter Subject” field (in Russian: give a name to our template).
7. Click the “Save” button.

That's basically all 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 previously familiar with the SmartResponder service at all. That is, I had no skills to work in either the old or the new editor before. But then I registered and figured it out. Well, now you know how to work in the new SmartResponder constructor.

What services do you use in your work for creating and sending letters?

While studying theoretical material on the HTML language, some users have a question: how paste html file into web browser? Like, 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, Notepad++, for example, 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=" Description of the page">

True, such html code will not give us anything in the browser. Required between tags And write something else, for example a title and a couple of paragraphs:

Everything is working

We add these three lines to our html code and get code like this:

"Description" content=" Description of the page">

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, enter the file name (for example, dokument), change the file extension .txt to .html, and set the file type to “All files”.

To open our file in a browser, hover the mouse pointer over the file, right-click, in the window that opens, select “Open with” and select the browser we are using.

Next lesson - .

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 just a few recipients and each of them must be individual? Pay money just for the opportunity to use the service editor?

Not necessary. Today we will tell you how to replace the content of a letter in the source code using an example text editor Sublime Text.

Meet 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 in colors, in our version: pink - html tags, green - parameters, yellow, purple and blue - the value of various parameters and white - text.

Replacing message text

Thanks to the features of the editor mentioned above, even a child can cope with replacing the text of a letter. All you need to do is simply replace the text itself, highlighted in white by Sublime.

It is worth noting that Sublime, like Notepad, automatically resets text formatting. So, you can safely copy any text and paste it into the desired 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 the desired text in the entire code array, press Ctrl+F - after this, 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 gobbledygook.

Size- substitute the desired value in the parameter “font-size: 14px;” . Let's increase the font size from 14 pixels to 16.

Color- the color value is specified in the HEX parameter “color: #323232;” .

You can select the color value from online services, for example here - get-color.ru.

We will make the text gray - #4F4F4F.

Line spacing- similar to font size, set by parameter “line-height: 18px;”

Font format- specified by tags text - fat, text - italics and text - underscore.

It is worth noting that Sublime, when opening a tag, automatically adds a command to close the tag. Be careful.

Let's highlight our text in italics.

Line break- specified by tag
. Just insert this tag before the desired section of text.

We replace the text, save, update and you're done.

Inserting a link into text

target=”_blank” - this command is to open a link in a new tab. If you want the link to open in the current tab, just don't write it.

text-decoration: underline; - 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 differently 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 seem and if they see a link in the text, for example, “You can go to the website for further study...”, then they can highlight it themselves 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 servers. Accordingly, in the code, the picture is a link to it, and the command for adding it is similar to that discussed above.

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