color: # 234322; - the color setting command is not relevant for the picture.

border \u003d "0" - command picture framing. A value of 0 removes the white border around the picture, values \u200b\u200blarger will set its corresponding width in pixels.

Be sure to write 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 picture 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 part you want for you, copy the code and paste into 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 widthand heighton topical.

Afterword

We have told you about the most “painless” possibilities of editing the letter code. If you need to make more significant changes, we strongly recommend that you entrust this task to a layout specialist, or at least create a copy of the code before editing.

Hello everyone!

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

The 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 already 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. One-pixel picture.

The method is extremely simple! The service inserts a 1 × 1 pixel transparent picture 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 (an appeal to the server), the service can track which picture was requested. And make a conclusion - which letter, from which mailing list was opened.

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

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

Option 2. Clicking on 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 code, you can identify - from which mailing list the user came. This method complements the first option: if it did not work, then the statistics will be clarified by clicks on the 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 work week!

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

How to get the email code out of the new editor?

So, I was working in the new version of the constructor. Overall, I liked it. However, the disadvantage 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 pull 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 order of actions in the browser. Google chrome... Clicking on the "Preview" button opens the letter in the form in which the subscriber will see it.

Step four. Call the menu with the right mouse button, where we select the "View code" option. After that, in the Chrome browser, an additional window (“window in window”) with the HTML code of the letter opens from below.

To make it clearer for you, screenshots of all steps are presented below.

How to get the HTML code of an email

If you hover the mouse cursor over any line of code, the field that describes this line will be marked in the letter preview window (it is still open for us, it has not gone anywhere).

Moving up, we reach the very beginning of our letter. This can 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 with which the description of all elements of the letter begins: text and pictures.

The window with the code can be positioned 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 what 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

Choosing the location of the additional window is easy.

1. In the upper menu of the additional window, on the right side, next to the cross, there is an element indicated by three vertical dots. It is called Customize and control DevTools (the name is displayed when you hover the mouse cursor). We 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 should be selected on the left side of the top menu.

Copying the email code from the browser

Now we move through the code from top to bottom. As soon as we have found the code, which 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 with a lot of code inside. Copy all the code inside this rectangle (first press the keyboard shortcut 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 it is necessary to press the "Source" button (just today I saw that this button has now been renamed to "HTML-code").

Then we paste our HTML code with the keyboard shortcut Ctrl + V. Then we indicate the subject of the letter (this is a required field) and press the "Save" button. Done!

We save the email code correctly

So, we figured it out. Now you can optionally save the code as an HTML file on your computer. All you have to do is open Notepad and save the code in it. After that, change the extension * .txt to * .html and open the file. You will see a copy of your letter in the browser window.

Strictly speaking, it is better to save program codes 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 is what opens and closes and what is written between these "where what").

True, in sl while studying the processing of the email code created in the SmartResponder mailing service, even NotePad ++ did not help me to get a beautiful code markup. I 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 your code to NotePad ++ and save. No, though. Before saving, you need to click "Convert to ANSI" so that there is no scribble instead of text when viewing.

You can also choose "View" - "Line Wrapping". Then all the code will be located in the width of the page, and not in a line.

After that, everything should open and display as in the email template on the SmartResponder service.

Safety net: saving the code in SmartResponder

Since we “fished out” the code from our letter, created in the new editor, since we have it, we can save it in the SmartResponder service for safety reasons. What for? In order to create new letters on its basis, modify them, and, most importantly, use them on other resources (let me 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 not difficult to do.

1. In the "Mailings" 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 opened editor, in the menu of tools for creating a letter, click on the button "HTML code".
5. Paste in our code (press Ctrl + V). We can once again click on the "HTML code" button, that is, turn off the code display mode and turn on the view mode appearance letters.
6. Be sure to fill in the "Email subject" field (in Russian: we give a name to our template).
7. Press the button "Save".

That is, in fact, 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 previously familiar with the SmartResponder service. That is, I did not have the skills to work in either the old or the new editor before. But I registered and figured it out. Well, now you also know how to work in the new SmartResponder constructor.

What services do you use to create and send letters in your work?

In the course of studying theoretical material on the HTML language, some users have a question: how insert html file to 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 the use of 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 tutorial.

"Description" content \u003d " Page Description">

However, such html-code will not give us anything in the browser. Needed 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 get the code like this:

"Description" content \u003d " 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 where we will save the file, write the file name (for example, dokument), change the extension of the .txt file to .html, and set the file type to "All files".

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

The next lesson is.