I'm attempting to send out an HTML email from Thunderbird (latest versions), and I have an issue where when attempting to add a background-image, the url() is replaced with what looks like the beginning of a hyperlink...
An example would be:
#logo {
height: 427px;
width: 640px;
background: url("myimage.jpg");
}
...
<div id="logo"></div>
and when viewing the actual sent output I get:
background: url(<a class="moz-txt-link-rfc2396E" href="myimage.jpg">"myimage.jpg"</a>);
How can I do what I want? (I can't use an image tag in the email)
Tia!!
S.
EDIT:
It seems that adding a BASE solves my issue, like:
<base href="http://www.myurl.com" />
...
background: url("./myimage.jpg")
That method will not work across all major email clients. There are 2 ways to put backgrounds in html emails that are widely supported (Mostly due to Outlook limitations):
VML (add to an element):
http://backgrounds.cm/
Previous Body-tag Method (only works on whole email body):
How make background image on newsletter in outlook?
Related
Situation:
I am a HTML newbie who gets by through Google-fu and I am in charge of a tool which sends HTML email to customers.
I have been asked by our customers (Because pressing reply and typing a single word is really difficult) if I can create buttons on the emails I send which allows them a 1-click reply.
Conditions:
The reply has to come from their own email address
It needs to go back to the email address that sent the email (We have one template email which can be sent from several addresses)
It needs to maintain the same subject line (It contains a reference number to ensure the email is processed correctly when received)
Must be created using inline HTML(4 or 5) only (Restrictions of the system that generates the email)
Ideally will send the reply immediately (And show them as much in some manner), but opening up a new email already pre-populated is an acceptable alternative
I have struggled to find much at all on this, which leads me to think that it is not possible.
If using tiny bit of pure javascript, that does not need any external library on your website.
This code goes to your website where you want your check to be made.
<script>
function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [null, ''])[1].replace(/\+/g, '%20')) || null;
}
document.addEventListener("DOMContentLoaded", function(event) {
if(getURLParameter('answ') == 0) document.getElementById('answered_yes').remove();
else if(getURLParameter('answ') == 1) document.getElementById('answered_no').remove();
else {
document.getElementById('answered_yes').remove(); document.getElementById('answered_no').remove();
}
});
</script>
<div id="answered_yes">
THIS IS HOLDER FOR YES ANSWERER //Put your wanted info hare if he answered yes
</div>
<div id="answered_no">
THIS IS HOLDER FOR NO ANSWERER //Put your wanted info hare if he answered no
</div>
Now on email links put these type of links.
<a href="yourwebsite.com/index.php?answ=0" target="_blank" >ANSWER NO</a>
<a href="yourwebsite.com/index.php?answ=1" target="_blank" >ANSWER YES</a>
What this does is simply puts a parameter on a link called answ that has 0 or 1 by my setting and once your website gets a request it checks which parameter is it 0 or 1. If its 0 that means we remove the div that says yes, otherwise do the same with no div.
with only html it is not possible unless you would give him different links as in.
<a href="yoursite.com/he_answered_no.html" >No</a>
<a href="yoursite.com/he_answered_yes.html" >Yes</a>
And put your contents inside there.
However if you are going to use this script in your website, put that code somewhere in the body, its not perfect, but it will do the job. Then put your information on yes div and on no div, its going to remove whatever div he answers too.
But like I mentioned, with purely HTML it is not possible only adding some bits with other languages, pure javascript should work on any HTML site, unless you are trying to add the code to some kind of platform that blocks any ongoing scripts.
You can just use a "mailto:" link similar to this:
Email Us
Here's the link with more info: https://css-tricks.com/snippets/html/mailto-links/
It will open up a prepopulated email with the "to" address, subject line, and body text already inserted. People will be able to modify the text if they want or just click send. You would need to some way to dynamically change the subject line to the one the customer received, but your email tool probably has that capability.
I have some email message with pixel
<img src="http://www.google-analytics.com/collect?v=1&tid=UA-50173334-3&t=event&cn=test_campaign&cs=email&ec=hellga&ea=open" width=1 height=1 >
This pixel working in browser and sending event data to google analytics correct.
But if i put code to my email template in Mailchimp and send to any email accounts(gmail,outlook,yandex), pixel didn't sent events data .
I tried another way for:
<style>
* [summary=pixel-gmail]:not(.pixel-gmail){
background-image: url(http://www.google-analytics.com/collect?v=1&tid=UA-50173334-3&t=event&cn=test_campaign&cs=email&ec=hellga&ea=open);}
</style>
<div class="pixel-gmail" summary="pixel-gmail"></div>
But it too did not work
Maybe who know how it really work in email?
If you're using 3rd-party services like SendGrid, AmazonAWS, etc. they may cut your HTML so it wouldn't work properly.
Try to send few test messages to your own mailbox and look on the email-letter content. If there would be still any problems with that - change service or talk to support so they can help you to fix your problem.
The Litmus' tracking code has a div with id #_t, as code bellow.
<style data-ignore-inlining=3D"" type=3D"text/css">
#media print {
#_t { background-image: url('https://ekpz8q6s.emltrk.com/ekpz8q6s?p&d=3Dcarlosfatureto#gmail.com');
}}
div.OutlookMessageHeader {
backgroun=
d-image: url('https://ekpz8q6s.emltrk.com/ekpz8q6sf&d=3Dcarlosfatureto#gmail.com');
}
table.moz-email-headers-table {
background-image: url('https://ekpz8q6s.emltrk.com/ekpz8q6s?f&d=3Dcarlosfatureto#gmail.com');
}
blockquote #_t {
background-image: url('https://ekpz8q6s.emltrk.com/ekpz8q6s?f&d=3Dcarlosfatureto#gmail.com');
}
#MailContainerBody #_t {
background-image: url('https://ekpz8q6s.emltrk.com/ekpz8q6s?f&d=3Dcarlosfatureto#gmail.com');
}
</style>
<div id="_t"> </div>
<img border="0" height="1" src="https://ekpz8q6s.emltrk.com/ekpz8q6s=?d=carlosfatureto#gmail.com" width="1" style="border: 0;height: auto !important;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;">
The "print rate" and "forwards rate" uses this div to identify if the email was printed or forwarded. But, Gmail, Outlook and everyone of the "biggest companies" removes all ids and classes from email's elements.
So, without the id there is no tracking.
The "engagement rate (glanced, deleted, read, skim)" probably use a slow-load image. The time to load is the time that user spent. Once again, Gmail, Outlook and everyone of the "biggest companies" use proxy and cache. In this case, the image is always loaded until the end.
I made some tests and both methods (slow-load image and div with custom id) failed in Gmail and Outlook, but it works in roundcube webmail.
So, my question is. In 2016, someone uses Litmus and it works for you? I know that back in 2010 the Litmus probably worked fine, but now, in 2016, it still works?
Disclaimer - I work for Litmus.
Litmus' Email Analytics definitely does work. This answer is mostly accurate: How does Litmus track their email analytics?
There are two things in your question that are not accurate:
Gmail, Outlook and everyone of the "biggest companies" removes all ids
That is not accurate. You can see from Campaign Monitor's excellent CSS Support Guide for Email that the E#id selector is valid in most major email providers.
The "engagement rate (glanced, deleted, read, skim)" probably use a
slow-load image.
This is not how our analytics works. For ip purposes I'd rather not get into the specifics of how this works here but if you'd like to contact us via support channels we can discuss.
You are correct that Gmail and any other providers that use proxies to cache images will cause issues with the engagement metrics. This is addressed in this support article here: https://litmus.com/help/analytics/understanding-gmail-opens/
Problem :
In Gmail the email template is not viewed like
http://zurb.com/ink/downloads/templates/basic.html
it looks like a simple plain text mail with html tags, without color formatting
What I Tried :
Template Code Used : http://zurb.com/ink/downloads/templates/basic.html
Copy Pasted in Views\Layouts\Emails\html\default.ctp for a quick check & sent a test mail.
Their Test's says it should work on all major email emails
Test Result : https://litmus.com/pub/85a1b19
That is a nice layout - just not for emails.
For templates HTML emails all style must be inline - style tags are not allowed across many email clients.
Thus, you need to use something like I do to transform the style css into inline css upon sending:
https://github.com/dereuromark/tools/blob/master/Lib/InlineCssLib.php
Basically, upon generating the final template, an afterLayout() hook of a helper can trigger this.
See this discussion for details on the implementation.
Maybe the parameter ->emailFormat('text')?
ensure that you use ->emailFormat('html')
I've used ColdFusion for sending text emails for years. I'm now interested in learning how to send those pretty emails you see from companies like Mint.
Anyone know of a good ColdFusion tutorial to teach me how to make this work and not get hit by bugs or spam filters?
As Ray said, ColdFusion supports HTML email, which is how you make an email "pretty". A quick down and dirty sample looks like this:
<cfmail from="bob#bob.com" to="someguy#email.com" subject="Check this out!" type="HTML">
<HTML>
<head><title>My Email</title>
</head>
<body>
<!--- Style Tag in the Body, not Head, for Email --->
<style type="text/css">
body { font-size: 14px; }
</style>
This is the text of my email.
</body>
</HTML>
</cfmail>
That's it, you've just sent an email. Notice how there is nothing preventing you from sticking in any old from email address you like? That leads me to my next point, in which you're wondering how to avoid getting hit by Spam filters:
The short answer is: You can't.
Oh sure, you can do intelligent things, like not including the word "VIAGRA" in your email (unless you're trying to send out penile enlargement emails and want to know how to get past spam filters, in which case I'm disinclined to help), but let's assume you just want to avoid obvious pitfalls.
I can think of two things that might help:
Send out email from a domain registered to the from email address. I didn't make the rules, but this one can be a pain. Ie., If you try to send out proxy emails for myorg.com, and your server does not host myorg.com, some spam filters are going to block it. What is usually done is to apply some branding to the from email, like this:
<cfmail from="MyOrg.Com <DONOTREPLY#registeredsite.com>" replyto="bob#myorg.com" to="someguy#email.com" subject="Test" type="HTML">
</cfmail>
In this case the email is sent from your server at registeredsite.com, with a replyto being the proxy email address. Spam filters will probably be okay with this, since the from email address of *#registeredsite.com resolves to your server. Try to send out with bob#myorg.com in the from, and you'll definitely run into some places that will block you.
Use a physical server, not a cloud site. I'm running into this very issue right now, but if you don't use a physical server that is located at a dedicated IP to send out your email, and if this server is not the originator of the email, some places are going to block it. This means no EC2 or Rackspace cloud site--sorry, some sysadmins are inclined to put down the banhammer on anything that originates from one of these providers, seeing as it is so easy to churn up your own little spam factory using EC2 or Rackspace for very little cost.
Even if you take these precautions, however, you'll run into a situation where someone gets a hold of your domain name and drags it through the mud. They'll send out thousands of emails to the internet in your name--or rather, in your domain's name--and because of the insecurity of email, your domain will get added to someone's blacklist after a thousand occurrences of hotlove4u#registeredsite.com hit the sysadmin's inbox. There's nothing you can do about it, either.
Or you can decide to run a cloud app and use a remote mail server. But some jokers will get one look at the originator being EC2 and will say, "Nope, sorry. Denied." They don't care about the legitimacy of your organization, only the origin of the email.
Email is an antiquated technology that has been rushed into mass usage before we really were able to think of a better protocol. As a protocol, it's terrible....and yet we're stuck with it, for backwards compatibility reasons. You cannot possibly avoid the spam filter. 95% of the email on the internet is junk mail, and never even reaches the intended recipient. Just absorb the enormity of that statistic for a moment, and pull your ideas back to reality. Many of the spam-prevention techniques being used today are unnecessarily aggressive, and create a great many 'false positives'. You can shoot for, say 80% of your email being sent, but what it really comes down to is this: As soon as the email has been fired off, it's completely out of your control. You can only take responsibility for so much.
What do you mean by "pretty" - HTML based? CF supports html email. Just use type="html". You can also use cfmailpart to send both text and html versions of the same content.
Here's a good article on making HTML email using CSS:
http://articles.sitepoint.com/article/code-html-email-newsletters
Ray's answer is right on the money about the CF part, but most of making this work is about HTML, CSS and testing testing testing.
And I would add to this all that you can check whether a mail will be displayed correctly and whether it will get hit by a spamfilter or not by going to a website that is called litmusapp. You can send your test newsletter to one of their emailaddresses and then they will give you screenshots of how each newsletter will look like in each type of emailclient. Also it checks the newsletter against a few popular spamblockers and gives you advice on what to change.
I would start by finding an HTML template email that you like. Then you put it in the tags with the type set to html as mentioned above. You might want to consider doing the multipart email to handle plaintext (and blackberry) users.
I subscribe to the Campaign Monitor Newsletter & they also have a list of very useful articles here: http://www.campaignmonitor.com/resources/
Might want to check out this ebook from MailChimp. Email apps render HTML in some unusual ways, so be prepared to use tables for layout.
Remember when you try to change the color of the font or background when you writing a cfmail, before you add #F0000, you need to ad extra # at the front of it, like ##F0000. Otherwise, it will cause an error.