Bir mektubu tarayıcıda açmak için kullanılan kod. Bir html mektubunun kaynak dosyasını düzenleme. E-posta kodunu doğru şekilde kaydetme

Bize sıklıkla html e-postalarını düzenleme olanakları soruluyor. Kural olarak, posta hizmetleri çeşitli mektup editörleriyle donatıldığından bunda herhangi bir sorun yoktur.

Peki ya yalnızca birkaç alıcıya mektup göndermeniz gerekiyorsa ve bunların her birinin bireysel olması gerekiyorsa? Yalnızca hizmet düzenleyiciyi kullanma fırsatı için para mı ödüyorsunuz?

Gerekli değil. Bugün size bir e-postanın içeriğini nasıl değiştireceğinizi anlatacağız. kaynak koduörnek olarak Sublime Text metin düzenleyicisini kullanma.

Editörle Tanışın

Aynı zamanda mektubun kendisini görmek ve içindeki değişiklikleri takip etmek için mektubun html dosyasını bir tarayıcı penceresinde açmanız yeterlidir. Kod metnindeki değişiklikleri (Ctrl+S) kaydettikten sonra sayfayı yenileyin, yapılan değişiklikleri göreceksiniz.

Gördüğünüz gibi Sublime, versiyonumuzda farklı veri formatlarını renklerle vurgulamaktadır: pembe - html etiketleri, yeşil - parametreler, sarı, mor ve mavi - çeşitli parametrelerin değeri ve beyaz - metin.

Mesaj metnini değiştirme

Düzenleyicinin yukarıda bahsedilen özellikleri sayesinde bir çocuk bile bir mektubun metnini değiştirme işini halledebilir. Tek yapmanız gereken, Sublime tarafından beyazla vurgulanan metnin kendisini değiştirmek.

Sublime'ın Notepad gibi metin biçimlendirmesini otomatik olarak sıfırladığını belirtmekte fayda var. Böylece herhangi bir metni güvenle kopyalayıp istediğiniz yere yapıştırabilirsiniz, kodda belirtilen parametrelere göre harf halinde görüntülenecektir.

Ve bulmak için küçük bir tavsiye daha gerekli metin kod dizisinin tamamında Ctrl+F tuşlarına basın - bundan sonra düzenleyicinin altında bir metin arama alanı görünecektir.

Gerekirse yazı tipi stilini değiştirebilirsiniz.

Aşağıdaki yazı tiplerinden birini kullanmanızı öneririz - Arial, Arial Black, Tahoma, Trebuchet MS, Verdana, Courier, Courier New, Georgia, Times, Times New Roman Bunlar herhangi bir sistem tarafından tanınan standart yazı tipleridir. Aksi takdirde, başka bir bilgisayardaki metniniz saçma sapan bir şeye dönüşebilir.

Boyut- parametrede istenen değeri değiştirin “yazı tipi boyutu: 14 piksel;” . Yazı tipi boyutunu 14 pikselden 16'ya çıkaralım.

Renk- renk değeri HEX parametresinde belirtilir “renk: #323232;” .

Renk değerini çevrimiçi hizmetlerden seçebilirsiniz, örneğin burada - get-color.ru.

Metni gri yapacağız - #4F4F4F.

Satır aralığı- parametreye göre ayarlanan yazı tipi boyutuna benzer “satır yüksekliği: 18 piksel;”

Yazı tipi formatı- etiketlerle belirtilir metin - yağ, metin - italik ve metin - vurgulamak.

Sublime'ın bir etiketi açarken otomatik olarak etiketi kapatmak için bir komut eklediğini belirtmekte fayda var. Dikkat olmak.

Metnimizi italik olarak vurgulayalım.

Satır sonu- etiketle belirtildi
. Bu etiketi metnin istediğiniz bölümünün önüne eklemeniz yeterlidir.

Metni değiştiririz, kaydederiz, güncelleriz ve işlem tamamdır.

Metne bağlantı ekleme

hedef=”_blank” - bu komut yeni bir sekmede bir bağlantı açmak içindir. Bağlantının geçerli sekmede açılmasını istiyorsanız yazmayın.

metin dekorasyonu: altı çizili; - tarayıcıya bağlantının altını çizme komutu. Altı çizili gerekmiyorsa yazmanız gerekir metin dekorasyonu: yok;

Her durumda, bu komutu yazdığınızdan emin olun, aksi takdirde her tarayıcı altı çizilip çizilmeyeceğine farklı şekilde karar verecektir.

Bu aynı zamanda gerekli bir komuttur, aksi takdirde tarayıcılar rengi uygun gördükleri şekilde görüntüler.

Dikkat! Bazı e-posta istemcileri göründüklerinden daha akıllıdır ve eğer metinde bir bağlantı görürlerse, örneğin, "Daha fazla çalışmak için web sitesine gidebilirsiniz...", o zaman bunu kendileri ve kendi yöntemleriyle vurgulayabilirler.

Görüntüye bağlantı ekleme/değiştirme

Mektuptaki resimler ek olarak saklanmaz, sunucularda bulunur. Buna göre, kodda resim ona bir bağlantıdır ve onu ekleme komutu yukarıda tartışılana benzer.

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

renk:#234322; - renk ayarı komutunun resimle ilgisi yoktur.

sınır=”0” - resim çerçeveleme komutu. 0 değeri görüntünün etrafındaki beyaz kenarlığı kaldırır, daha büyük değerler onu piksel cinsinden karşılık gelen kalınlığa dönüştürür.

Bu komutu eklediğinizden emin olun. Örneğin, bu komutu belirtmezseniz Outlook otomatik olarak bir resme bir çerçeve atar.

Tarayıcıda resim içeren bir kod bölümünü bulmak daha kolay olacaktır. Bunu yapmak için gerekli görsele sağ tıklayın ve “Kodu görüntüle” seçeneğini seçin (bunlar Google Chrome'daki bu seçeneğin adlarıdır; adı ve yolu diğer tarayıcılarda farklı olabilir). Tarayıcı ihtiyacınız olan kısmı otomatik olarak vurgulayacak, kodu kopyalayacak ve Sublime aramaya yapıştıracaktır.

Bir resmi değiştirirken dikkatli olun; boyutu Yeni fotoğrafönceki boyuttan farklı olarak tüm parametreleri değiştirmeniz gerekir Genişlik Ve yükseklik mevcut olanlara.

Sonsöz

Size e-posta kodunu düzenlemek için en "acısız" seçeneklerden bahsettik. Daha fazla para yatırmanız gerekiyorsa önemli değişiklikler, böyle bir görevi bir düzen uzmanına vermenizi veya en azından düzenlemeden önce kodun bir kopyasını oluşturmanızı önemle tavsiye ederiz.

Herkese selam!

Rüstem sıcak deniz ikliminin tadını çıkarmak için Soçi'ye gitti. Alina ve bana E-postayla pazarlama hakkındaki hikayeye devam etmemiz talimatını verdi. Neyse bu haftaki yazım. Size OpenRate'ten bahsedeceğim.

E-postaların açılma oranı (İngilizce Açık Oran) en önemlilerinden biridir. 10.000 mektup gönderdiniz ve bunları yalnızca 10 kişi okudu. Açık Oran %0,1 idi. Üzüntü! Ama eğer 2000 kişi varsa o zaman bu hiç de kötü değil; %20. Ancak şu soru ortaya çıkıyor: Mektubu kaç kişinin okuduğunu nasıl öğrenebilirim? Unisender, Mailchimp vb. hizmetler bu bilgiyi arayüzde sağlar. Bu verileri nasıl elde ettiklerini anlamaya çalışalım. Neyse ki birkaç yol var; yalnızca iki.

Seçenek 1. Tek pikselli görüntü.

Yöntem son derece basit! Hizmet, mektuba 1x1 piksellik şeffaf bir görüntü ekler. Kullanıcı mektubu açtığında resim tarayıcıya yüklenir. Aynı zamanda resim “posta gönderenin” sunucularında görünüyor. Bir resim isteği geldiğinde (sunucuya bir çağrı), hizmet hangi resmin istendiğini takip edebilir. Ve bir sonuç çıkarın - hangi mektubun hangi posta listesinden açıldığı.

Bu arada, görsel adresi yerine Google Analytics kodunu koda ekleyerek tek tek harflerin açılışını da takip edebilirsiniz. Daha sonra açılış sayısı istatistiklerinde gösterilecektir.

Bu tür izlemenin dezavantajları: tüm posta arayüzlerinde (ve e-posta programlarında) çalışmaz ve yöntem yalnızca mektubunuz HTML biçimindeyse uygulanabilir. Sonuçta bu belirli bir html kodudur. Yöntem normal bir kısa mesajda çalışmayacaktır.

Seçenek 2. Bağlantıları takip edin.

İkinci çözüm de yüzeyde. Mektuptaki bağlantıları işaretleyip her bağlantının adresine ekledim özel kod. Birisi onları web sitemize kadar takip ederse mektubu açmıştır. Kodla kullanıcının hangi haber bülteninden geldiğini belirleyebilirsiniz. Bu method ilk seçeneği tamamlar: işe yaramazsa, istatistikler bağlantılara tıklanarak güncellenecektir.

Bu arada, bir zamanlar posta için değil, satıcılar tarafından gönderilen mektupların açık oranını takip etme fikri vardı. ticari teklifler. Sonuçta yaklaşık olarak aynı prensiplerle çalışan bir dizi yabancı hizmet keşfedildi.

Temelde bu kadar. Verimli bir çalışma haftası geçirin!

Önceki iki bölümü okuyun, üçüncüsünde uzmanlaşın ve yeni düzenleyicide tam olarak çalışmak için tüm teknik bilgilerle donanmış olacaksınız!

Yeni düzenleyiciden harf kodu nasıl çıkarılır?

Ben de çalıştım Yeni sürüm tasarımcı. Genel olarak beğendim. Ancak dezavantajı, oluşturulan mektubu metin ve resimlerle birlikte HTML koduna dönüştürmenize izin vermemesidir. Bu üzücü. Ama bir çıkış yolu var. Kodu kendiniz çıkarmanız gerekir. Nasıl yapılır?

Şimdi sana anlatacağım. Genel olarak bir mektubunuz var. Veya bir mektup şablonu. Değilse, bir şablon (veya buna dayalı hazır bir mektup) oluşturduktan sonra bu bölümü okumaya geri dönün.

Başından beri

Öyleyse tüm prosedürü tamamen gözden geçirelim. Başından beri. Her şeyi dört adımda yapıyoruz.

İkinci adım. Kaydedilen şablonu seçin.

Adım üç.“Önizleme” düğmesine tıklayın. Daha sonra tarayıcıdaki prosedürü açıklayacağım Google Chrome. “Önizleme” butonuna tıkladığınızda mektup abonenin göreceği biçimde açılır.

Adım dört.“Kodu görüntüle” seçeneğini seçtiğimiz menüyü açmak için sağ tıklayın. İÇİNDE Chrome tarayıcı bundan sonra, mektubun HTML kodunu içeren ek bir pencere (“pencere içinde pencere”) açılır.

Daha açık hale getirmek için aşağıda tüm adımların ekran görüntüleri bulunmaktadır.

Bir mektubun HTML kodunu nasıl alabilirim?

Farenizi herhangi bir kod satırının üzerine getirirseniz, e-posta önizleme penceresinde (bizim açık, hala orada) bu satırın tanımladığı alan işaretlenecektir.

Yukarıya doğru ilerleyerek mektubumuzun en başına ulaşıyoruz. Bu, örneğin "Merhaba sevgili abone" gibi ilk metin veya bir resim (sitenizin logosu) olabilir.

Mektubum logoyla başlıyor. Bu yüzden mektubun tüm öğelerinin açıklamasını başlatan kodu arayacağız: metin ve resimler.

Kodun bulunduğu pencere yatay olarak (tarayıcı penceresinin altında), dikey olarak (tarayıcı penceresinin sağ tarafında) veya ayrı bir bağımsız pencere olarak yerleştirilebilir. Ancak ayrı bir bağımsız pencereye ihtiyacımız yok çünkü kodun içinde dolaşıp harfin hangi öğesini gösterdiğini göreceğiz. Ek pencerenin tarayıcı penceresinin alt kısmında bulunması benim için daha uygundur.

Ek bir pencere nasıl kurulur

Ek pencerenin konumunu seçmek basittir.

Ek pencerenin üst menüsünde, sağ tarafta çarpı işaretinin yanında üç dikey noktayla gösterilen bir öğe vardır. Buna DevTools'u Özelleştir ve Denetle denir (farenizi üzerine getirdiğinizde ad görüntülenir). Onu açalım.

Alt tarafa sabitle modunu seçin.

Tüm. Artık ek penceremiz altta bulunuyor. Bu durumda üst menünün sol kısmında Elementler modunun seçilmesi gerekir.

Harf kodunu tarayıcıdan kopyalayın

Şimdi kodu yukarıdan aşağıya doğru hareket ettiriyoruz. Mektubumuzun sayfasındaki tüm öğeleri aynı anda kapsayan kodu bulduğumuzda, farenin sağ tuşuyla menüyü çağırıp HTML Olarak Düzenle'yi seçiyoruz.

Bir blok açılır: içinde çok sayıda kod bulunan bir dikdörtgen. Bu dikdörtgenin içindeki tüm kodu kopyalayın (önce Ctrl + A, ardından Ctrl + C tuş kombinasyonuna basın).

İşte bu kadar, HTML kodunu panoya yani bilgisayarımızın geçici belleğine kopyaladık. Artık bu kodu SmartResponder'da şablon olarak kaydedebilirsiniz.

Menüde "Kaynak" düğmesini tıklamanız gereken yeni bir şablon için boş bir alan açılır (bugün bu düğmenin artık "HTML kodu" olarak yeniden adlandırıldığını gördüm).

Daha sonra Ctrl + V klavye kısayolunu kullanarak HTML kodumuzu yapıştırıyoruz. Daha sonra mektubun konusunu belirtin (bu zorunlu bir alandır) ve “Kaydet” butonuna basın. Hazır!

E-posta kodunu doğru şekilde kaydetme

Tamam, sorun çözüldü. Artık isteğe bağlı olarak kodu bilgisayarınıza HTML dosyası olarak kaydedebilirsiniz. Bunu yapmak için Not Defteri'ni açın ve kodu içine kaydedin. Daha sonra *.txt uzantısını *.html olarak değiştirip dosyayı açın. Mektubunuzun bir kopyasını tarayıcı penceresinde göreceksiniz.

Açıkçası, program kodlarını kaydetmek daha iyidir NotePad++ düzenleyicisini indir. Her zaman kullanıyorum çünkü Not Defteri:

a) kod yapısının görsel gösterimi;
b) sözdizimi vurgulaması (yani kod öğeleri arasındaki bağlantılar: neyin açılıp kapandığı ve bunların arasına ne yazıldığı “nerede” yazıldığı).

Doğru, içinde SmartResponder posta hizmetinde özel olarak oluşturulan bir mektubun kodunu işlerken NotePad++ bile güzel bir kod işaretlemesi elde etmeme yardımcı olmadı. Burada yardımcı oldu Adobe Dreamweaver CC.

"Kaynak Kodunu Biçimlendir" komutunu kullanarak kodu yapılandırmak ancak onun sayesinde mümkün oldu.

Artık kodu NotePad++'a aktarıp kaydedebilirsiniz. Yine de hayır. Kaydetmeden önce, görüntülerken metin yerine karalama olmaması için "ANSI'ye Dönüştür" seçeneğine tıklamanız gerekir.

Ayrıca “Görüntüle” - “Satır Sonu”nu da seçebilirsiniz. Daha sonra tüm kod bir satırda değil, sayfanın genişliği boyunca yer alacaktır.

Bundan sonra her şey SmartResponder hizmetindeki mektup şablonundaki gibi açılmalı ve görüntülenmelidir.

Güvenlik ağı: kodu SmartResponder'a kaydedin

Yeni düzenleyicide oluşturduğumuz mektubumuzdaki kodu "avladığımız" için, zaten elimizde olduğundan, güvenlik amacıyla onu SmartResponder hizmetine kaydedebiliriz. Ne için? Buna göre yeni harfler oluşturmak, onları değiştirmek ve en önemlisi bunları diğer kaynaklarda kullanmak için (yeni düzenleyicinin bu tür yeteneklere sahip olmadığını hatırlatmama izin verin).

Bunu yapmak için Google Chrome tarayıcısından kopyalanan kodun eski SmartResponder yapıcısına yapıştırılması gerekir.

Bunu yapmak kolaydır.

“Postalar” sekmesinde “Mektup Şablonlarının Listesi” bölümünü seçin.

“Şablon Oluştur” butonuna tıklayın.

“Renkli HTML harfi (eski düzenleyici)” türünü seçin ve “İleri”ye tıklayın.

Açılan düzenleyicide, harf oluşturma araçları menüsünde “HTML kodu” butonuna tıklayın.

Kodumuzu yapıştırın (Ctrl + V tuşlarına basın). Tekrar “HTML code” butonuna tıklayabiliriz yani kod görüntüleme modunu kapatıp görüntüleme modunu açabiliriz dış görünüş edebiyat.

“Mektup Konusu” alanını doldurduğunuzdan emin olun (Rusça: şablonumuza bir ad verin).

“Kaydet” düğmesine tıklayın.

Temelde size yeni SmartResponder editörü hakkında ilk mektubumu oluşturduktan sonra anlatmak istediğim tek şey bu.

SmartResponder hizmetine daha önce hiç aşina olmadığımı söylemek istiyorum. Yani daha önce ne eski ne de yeni editörde çalışacak becerim yoktu. Ama sonra kayıt oldum ve anladım. Artık yeni SmartResponder yapıcısında nasıl çalışacağınızı biliyorsunuz.

İşinizde mektup oluşturmak ve göndermek için hangi hizmetleri kullanıyorsunuz?

HTML dili üzerine teorik materyal çalışırken bazı kullanıcıların bir sorusu var: nasıl html dosyasını web tarayıcısına yapıştırın? Zaten yazılmış html kodu gibi, görüntüle tarayıcı. Görmek tabiri caizse yapılan işin sonucu.

Daha önce de anlaştığımız gibi, html kodumuzu Notepad programına yazıyoruz (ancak kimse diğer editörlerin, örneğin Notepad++'ın kullanılmasını yasaklamaz, bu daha da kullanışlıdır).

Ve böylece, Notepad programını açın ve içine bir miktar html kodu yazın. Geçen dersteki html kodunu alalım.



"Açıklama" içeriği = " Sayfanın açıklaması">

Doğru, böyle bir html kodu bize tarayıcıda hiçbir şey vermeyecektir. Etiketler arasında gerekli Ve Başka bir şey yazın, örneğin bir başlık ve birkaç paragraf:

Her şey çalışıyor

Bu üç satırı html kodumuza ekliyoruz ve şu şekilde kod elde ediyoruz:

belgenin başlığı (web sayfası)

"Açıklama" içeriği = " Sayfanın açıklaması">

Html kodu yazmanın sonucunu kontrol etme

Her şey çalışıyor

Dosyamızı kaydedin: dosyaya tıklayın → farklı kaydet

Açılan pencerede dosyayı kaydedeceğimiz klasörü seçin, dosya adını girin (örneğin dokument), .txt dosya uzantısını .html olarak değiştirin ve dosya türünü “Tüm dosyalar” olarak ayarlayın.

Dosyamızı tarayıcıda açmak için fare imlecini dosyanın üzerine getirin, sağ tıklayın, açılan pencerede “Birlikte aç” seçeneğini seçin ve kullandığımız tarayıcıyı seçin.

Gelecek ders - .