This question already has answers here:
Gmail's new image caching is breaking image links in newsletter
(15 answers)
Closed 3 years ago.
I have created the following email template and send email to clients from my website (ASP.NET MVC, C#) using SendGrid. Note that there is an envelope icon at the end of the email.
<!DOCTYPE html>
<html>
<head></head>
<body>
<p>Some email content</p>
<hr/>
<p>reply info: </p>
<p>
<img src='https://prod-shopless-cdn.s3-ap-southeast-2.amazonaws.com/icons/email-icon.svg' alt='email' height='20' style='vertical-align: middle; padding-right: 5px;'>
<a rel='nofollow' ymailto='mailto:john#some-domain.com' href='mailto:john#some-domain.com'>john#some-domain.com</a>
</p>
</body>
</html>
When I send the email to a yahoo address, I see the following is prepended to the image url: https://ecp.yusercontent.com/mail? but the image still shows fine:
<p>
<img src="https://ecp.yusercontent.com/mail?url=https%3A%2F%2Fprod-shopless-cdn.s3-ap-southeast-2.amazonaws.com%2Ficons%2Femail-icon.svg&t=1577343946&ymreqid=eab30077-9a08-b7e9-1c70-820001015100&sig=idgsn8ycGFqhWibk5cnXTQ--~C" alt="email" height="20" style="vertical-align:middle;padding-right:5px;">
<a rel="nofollow" ymailto="mailto:john#some-domain.com" target="_blank" href="mailto:john#some-domain.com">john#some-domain.com</a>
</p>
When I send the email to a Gmail account, I see the following is prepended to the image url: https://ci5.googleusercontent.com/proxy/fMePoJvSwECei02DF_cx9SKczcRDRDa9XeJs263AGBRUysoCNxeZhErF834cSHBLcBGkDR-JWdfqhZkW878P9A3gM7nh8dRfdNxjVpBrGiNBBJCoRnNmBrkSAoF-TBu3IQ=s0-d-e1-ft# and the image no longer shows.
<p>
<img src="https://ci5.googleusercontent.com/proxy/fMePoJvSwECei02DF_cx9SKczcRDRDa9XeJs263AGBRUysoCNxeZhErF834cSHBLcBGkDR-JWdfqhZkW878P9A3gM7nh8dRfdNxjVpBrGiNBBJCoRnNmBrkSAoF-TBu3IQ=s0-d-e1-ft#https://prod-shopless-cdn.s3-ap-southeast-2.amazonaws.com/icons/email-icon.svg"
alt="email" height="20" style="vertical-align:middle;padding-right:5px" class="CToWUd">
<a rel="nofollow" href="mailto:john#some-domain.com" target="_blank">john#some-domain.com</a>
</p>
How can I resolve this issue?
The change of image URL on both Yahoo and Gmail is because they use their image caching, more info about Gmail Image Proxy
I found the answer to my problem here, it appears that Google Image Proxy works with standard image types (.jpg, .png and .gif)... my image type was .svg, I changed the template to use .png and it works fine now.
Related
I have made an email signature in Outlook (2016) by pasting HTML in the window where one can type a new signature (File>Options>Email>Signatures>New).
It looks good when sending a mail, it shows all images. The receiver of the mail (on any other mail client but Outlook, e.g. on Apple Mail or Gmail) can see the images too, but when this receiver using Apple Mail or so is going to reply to this mail, the images in the signature of the originally sent email have disappeared and have been replaced by
<image001.png> (referring to images saved locally within C:\Users\[name]\AppData\Roaming\Microsoft\Signatures, in the respective [signature name]_files folder, while the src of the original <img/>s in the signature are URLs to actual accessible files on the web). These images can be displayed anyway by clicking a button to 'include attachments of the original mail', which is, let's say, weird. It apparently turns the images in Outlook-signatures into attachments, which are being blocked or so, as it seems.
Has anyone had a comparable problem, and/or is kind to share a solution for this issue?
Thank you in advance.
Try adding ? and then a random number at the end of your image URL. Also, make sure you are using a CDN to deliver the image. I use cloudinary.com...
Here is an example of what I did...
<table cellPadding="0" cellSpacing="0">
<tbody>
<tr>
<td style="vertical-align:top"></td>
<td>
<div><font size="4">Name</font></div>
<div>Title</div>
<div><span style="margin-right:8px">phone</span></div>
<div><span style="margin-right:8px"><a style="color:blue" href="mailto:email">email</a></span></div>
<div><span style="margin-right:8px">address</span></div>
<div style="padding: 0 0em 2em 0;">
<img src="http://CDN/Facebook.jpg?7" alt="Facebook" />
<img src="http://CDN/Twitter.jpg?5" alt="Twitter" />
<img src="http://CDN/Instagram.jpg?3" alt="Instagram" />
<img src="http://CDN/Linkedin.jpg?2" alt="LinkedIn" />
</div>
</td>
</tr>
</tbody>
I open this HTML in my web browser, copy and paste it into the signature section of Outlook. One caveat.. I am using the Outlook Web Browser for my email, not the Application.
I have been testing:
Outlook -> Gmail -> Outlook, and my signature stays intact.
So far this has been working for 2 days. I am going to keep testing but give it a shot and let me know if you see the same good results.
There is a domain address and from this domain we send emails to users. The problem is that Gmail users don't receive any email, not even to spam (except a case, when an email arrived to spam). The users who have Yahoo email addresses receive emails into inbox.
So I suppose that Gmail has put the domain in blacklist for some reason.
I tried to find out the cause of the problem. So I have tried MXtoolbox. Here is a screenshot:
So I saw that the domain is on 2 blacklists, and dmarc Missing or Invalid Record.
The error:
AES128-SHA:128 CV=yes DN="/C=US/ST=California/L=Mountain View/O=Google
Inc/CN=mx.google.com": SMTP error from remote mail server after end of
data: 550-5.7.1 [Server Ip address] The IP address sending this
message does not have a\n550-5.7.1 P...
This is a generic template used for any emails:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<title><!--{$domain_name}--></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0" bgcolor="#ffffff" style="background-color: #FFFFFF; text-align: center;">
<div style="width: 701px;margin-left: auto;margin-right: auto;text-align:left;">
<img style="margin:0;" src="<!--{$main_site_address}-->/images/email/<!--{$domain_name}-->.png" alt=""><div style="border-left: 2px solid #8fd5fe;border-right: 2px solid #8fd5fe;color:#044269;font:15px 'Times New Roman', Times, serif;">
<div style="padding: 6px;">
<!--{$messageBody}-->
</div>
</div>
<img src="<!--{$main_site_address}-->/images/email/bottom-img.gif" alt="" width="701" height="23">
</div>
</body>
</html>
$messageBody is filled with some custom templates. These are:
register:
Thank you for registering at <!--{$domain_name}-->,
<br/>
<br/>
In order to finish the registration process, please click on the following link
<br/>
<!--{$domain_name}-->/activate.php to validate your email.
<br/>
<br/>
If you have questions please do not reply to this email, please send your questions to <!--{$help_email}-->
Forgot password:
Hello, <!--{$firstName}--> <!--{$lastName}-->. <br/>
<br/>
A new password request has been made for your account, if this is your request, use the following link to get a new password:
<br>
<!--{$site_address}-->register.php?a=reset_password&code=<!--{$code}--><br/><br/>
Thank you for using <!--{$domain_name}-->, <br/><br/>
If you ever need support or have comments for us contact our Customer Service Team <!--{$domain_name}-->
New Password:
Hello <!--{$firstName}--> <!--{$lastName}-->, <br/>
<br/>
here is your new password: <!--{$password}-->
<br>
Thank you for using <!--{$domain_name}-->, <br/><br/>
If you ever need support or have comments for us contact our Customer Service Team <a href="#" style="color:#119fd7;"><!--{$domain_name}--></a
Ad:
<!--{$label.ad_posted_email_text_part1}--> '<!--{$ad_title}-->' <!--{$label.ad_posted_email_text_part2}--> <!--{$address}-->ad_view.php?id=<!--{$ad_id}-->
What is common approach leading to the solution?
Guluke,
You have to discover the reason why you are blacklisted and google uses it's own private blacklists. Even if you get removed from the public ones in your screenshot. It most likely won't solve your issue with gmail, which can be totally un-related. Also you would want to use a more complete: Blacklist checker
I think it checks over a 100 more than the one you are using. Next you'll want to test your email for everything, try using this Mail Tester it's the best one available.
You just have to peel back the different layers and start ruling things out one by one. I don't see anything wrong with the content you are sending out.
I'd like to send both text and html versions of emails, but have Outlook users always only see the text version. Is this possible?
Trying to target a client through MIME is impossible as far as I can tell. You can however wrap everything inside your HTML <body> (including your style tag if you have one) in:
<body>
<!--[if !mso]><!-->
HTML CONTENT GOES HERE
<!--<![endif]-->
and then right before your closing </body> put the plain text version you want Outlook users to see inside this:
<!--[if gte mso 9]>
PLAIN TEXT GOES HERE
<![endif]-->
</body>
I've been trying to incorporate google webfonts in MailChimp and can't get any solutions to work.
I've tried the approach listed on Campaign Monitor's site using #import:
http://www.campaignmonitor.com/blog/post/3897/using-web-fonts-in-email
but I get this error when trying to preview:
An error occurred parsing your template CSS:
Cannot find a CSS file at: http://fonts.googleapis.com/css?family=Montserrat
Has anyone been able to use custom fonts within MailChimp?
It turns out it's not possible through the #import syntax. It does work using tag:
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
I use custom fonts in all of my emails but not through google. If your having trouble using Google's webfonts I recommend you host the file on your own server and try to use that instead.
For me, I import my webfonts stylesheet like so:
#import url('https://www.mydomain.com/en/img/cms/mail/_a/fonts/fonts.css');
I also add a conditional-comments below my style declarations to enhance webfont fallbacks in outlook. Without this, Outlook will likely substitute your webfont for whatever it feels like, and not respect your fallback font. But if you declare this conditional comment and then wrap your text with an additional span with the class, Outlook will respect your fallback and use the font you decide.
<!--[if gte mso 9]>
<style>
.flowerpwr { font-family:Arial,sans-serif; }
.proxima { font-family:Arial,sans-serif;font-weight:normal; }
.proxima_novasemibold { font-family:Arial,sans-serif;font-weight:normal; }
</style>
<![endif]-->
The html markup looks like this:
<td align="center" style="font-family:'proxima_novaregular',Arial,sans-serif;font-size:16px;letter-spacing:0.04em;color:#333333;">
<span class="proxima">Text here</span>
</td>
This even works for styling image alt text like so:
<td>
<a href="https://www.mylink.com/" target="_blank" style="display:block;font-family:'proxima_novaregular',Arial,sans-serif;color:#666666;font-size:16px;text-align:center;letter-spacing:0.04em;text-decoration:none;outline:none;">
<span class="proxima">
<img src="a3.jpg" alt="STYLED ALT TEXT WITH WEBFONT AND OUTLOOK MAINTAINED FALLBACK" border="0" style="display:block;">
</span>
</a>
</td>
I have been building emails a lot using mailchimp recently and I had been scratching my head over this for a while. These are my findings:
works for google fonts.
#import works for fonts hosted through other sites then google (for ex. your personal site)
using something like:
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
using #import for google fonts gives you an error in mailchimp (like the one horizens posted).
base64 works as well. But the code can get way to long and cause other problems.
Firefox blocks the fonts in Mailchimp preview (because it's https).
PS: different but related topic: Making responsive emails is not as terrible as the people of the internet claim.
Ok, so I've looked around a number of different websites but seem to get mixed information. Does anyone have any advice for implementing a Facebook Like button in an HTML email campaign?
I have already tried this article but for some reason, clicking the like opens a blank page with another like button. http://emailexpert.org/adding-a-facebook-like-button-to-your-email-template/
Any help would be appreciated.
Here is how you can add a Facebook Like button, Share Button, and Tweet Buttons. Please Note: Where it says my-campaign-url.com is the webpage of the email newsletter. Replace img src with your own image for the button. Also I am not sure you need everything in the Facebook button but you can clean it up with some testing =>
Facebook Like
<a title="Like this on Facebook" href="http://www.facebook.com/plugins/like.
php?href=http://my-campaign-url.com&layout=standard&show_faces=
false&width=450&action=like&colorscheme=light&height=427%20">
<img src="/Images/network_icons/fblike-button-small.png" style="border:
0 none;" alt="Like This on Facebook"></a>
Facebook Share
<a title="Share this on Facebook" href='http://www.facebook.com/share.php?u=http://my-campaign-url.com'><img src='/Images/network_icons/fb-share.png' alt='Share my campaign' /></a>
Tweet Button
<a title="Share Via Twitter" href="http://twitter.com/intent/tweet?
url=http://my-campaign-url&text=My%20Text%20-%20&via=My Name&">
<img src="/Images/network_icons/tweet-button-small.png"
style="border:0 none;" alt="Share Via Twitter"></a>
Another (possibly easier) option.
Use the AddThis Service for E-Mail Marketing. See AddThis site for more info. Example Code Follows:
<!-- AddThis Button BEGIN -->
<!-- Facebook -->
<a href="http://api.addthis.com/oexchange/0.8/forward/facebook/offer?pco=tbx32nj-1.0&url=http%3A%2F%2Fmy-site.com%2Fnewsletter&pubid=ra-[Your AddThis ID for Analytics]" target="_blank" ><img src="http://cache.addthiscdn.com/icons/v1/thumbs/32x32/facebook.png" border="0" alt="Facebook" /></a>
<!-- Twitter -->
<a href="http://api.addthis.com/oexchange/0.8/forward/twitter/offer?pco=tbx32nj-1.0&url=http%3A%2F%2Fmy-site.com%2Fnewsletter&pubid=ra-[Your AddThis ID for Analytics]" target="_blank" ><img src="http://cache.addthiscdn.com/icons/v1/thumbs/32x32/twitter.png" border="0" alt="Twitter" /></a>
<!-- Rest of AddThis Services-->
<a href="http://www.addthis.com/bookmark.php?source=tbx32nj-1.0&=250&pubid=ra-[Your AddThis ID for Analytics]&url=http%3A%2F%2Fmy-site.com%2Fnewsletter " target="_blank" ><img src="http://cache.addthiscdn.com/icons/v1/thumbs/32x32/more.png" border="0" alt="More..." /></a>
I had this problem also. But the answers above, and elsewhere, didn't help me too much.
It seemed like often the solution being offered was creating a way to allow people to like the EMAIL CAMPAIGN itself. That's definitely not what I want... I want it to make it so that people can click to like MY ORGANIZATION'S FACEBOOK PAGE.
Fortunately, I am a mailChimp user, and for those of you that use MailChimp, this is the article that explains it very easily: http://kb.mailchimp.com/article/how-can-i-add-a-become-a-fan-on-facebook-button-to-my-campaigns
this allows you to simply put a special tag and to specify the URL of your FB page... awesome. And it works. Sure, you do have to confirm with a second click, but that is OK.