Диаграмма чистого HTML не будет отображаться в Gmail при отправке через Zapier
Я использую Zapier, чтобы планировать ежемесячные электронные письма, которые заполнены данными из GoogleSheets. Данные очень просты; у него есть компоненты - рейтинг (то есть 4,5/5) и% времени (то есть 89%).
В Zapier вы можете отправлять электронные письма только через gmail, для чего требуется, чтобы любой код, который вы пишете, был в HTML.
Я хотел найти способ визуально представить мои данные. Я хочу, чтобы представление было динамичным и автоматически обновлялось, поэтому создание изображений диаграмм не вариант (эти электронные письма собираются для ~40 человек).
Таким образом, я решил закодировать чистый HTML-график. Однако, когда я использую код (найденный в Интернете и не измененный вообще), круговая диаграмма не отображается в моем Gmail на Chrome или Safari на моем компьютере. Однако он отображается на моем iPhone в приложении Mail, но не в приложении Gmail.
Вот код для круговой диаграммы, в частности:
<head>
<title> Pie </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<style>
.pieContainer {
height: 100px;
}
.pieBackground {
background-color: grey;
position: absolute;
width: 100px;
height: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: -1px 1px 3px #000;
-webkit-box-shadow: -1px 1px 3px #000;
-o-box-shadow: -1px 1px 3px #000;
box-shadow: -1px 1px 3px #000;
}
.pie {
position: absolute;
width: 100px;
height: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
clip: rect(0px, 50px, 100px, 0px);
}
.hold {
position: absolute;
width: 100px;
height: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
clip: rect(0px, 100px, 100px, 50px);
}
#pieSlice1 .pie {
background-color: #1b458b;
-webkit-transform:rotate(150deg);
-moz-transform:rotate(150deg);
-o-transform:rotate(150deg);
transform:rotate(150deg);
}
#pieSlice2 {
-webkit-transform:rotate(150deg);
-moz-transform:rotate(150deg);
-o-transform:rotate(150deg);
transform:rotate(150deg);
}
#pieSlice2 .pie {
background-color: #ccbb87;
-webkit-transform:rotate(40deg);
-moz-transform:rotate(40deg);
-o-transform:rotate(40deg);
transform:rotate(40deg);
}
#pieSlice3 {
-webkit-transform:rotate(190deg);
-moz-transform:rotate(190deg);
-o-transform:rotate(190deg);
transform:rotate(190deg);
}
#pieSlice3 .pie {
background-color: #cc0000;
-webkit-transform:rotate(70deg);
-moz-transform:rotate(70deg);
-o-transform:rotate(70deg);
transform:rotate(70deg);
}
#pieSlice4 {
-webkit-transform:rotate(260deg);
-moz-transform:rotate(260deg);
-o-transform:rotate(260deg);
transform:rotate(260deg);
}
#pieSlice4 .pie {
background-color: #cc00ff;
-webkit-transform:rotate(100deg);
-moz-transform:rotate(100deg);
-o-transform:rotate(100deg);
transform:rotate(100deg);
}
</style>
<div class="pieContainer">
<div class="pieBackground"></div>
<div id="pieSlice1" class="hold"><div class="pie"></div></div>
<div id="pieSlice2" class="hold"><div class="pie"></div></div>
<div id="pieSlice3" class="hold"><div class="pie"></div></div>
<div id="pieSlice4" class="hold"><div class="pie"></div></div>
</div>
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
Может кто-нибудь помочь мне понять, как заставить эту диаграмму появляться в Gmail, а не только в Почтовом приложении? Все люди, просматривающие это письмо, будут делать это со своих учетных записей Gmail.
Любые предложения очень ценятся.
1 ответ
Похоже, вы используете некоторые новые свойства CSS, которые не поддерживаются в самых популярных почтовых клиентах. Хотя ваш CSS будет хорошо отображаться при просмотре в браузере, он не обязательно будет хорошо отображаться в электронной почте.
Электронная почта имеет тенденцию отставать от браузеров, когда дело доходит до принятия поддержки новых, причудливых свойств CSS. Campaign Monitor собрал эту удобную разбивку поддержки CSS в нескольких популярных почтовых клиентах. Вы увидите, что GMail не поддерживает box-shadow, clip, или же position все, что вы используете в своем коде. Хотя это не указано в этом руководстве, transform собственность все еще находится в экспериментальной стадии. Это означает, что он, вероятно, не будет поддерживаться ни в каких почтовых клиентах в течение как минимум еще нескольких лет, если вообще когда-либо.
При написании HTML для электронной почты, я предлагаю запустить его через инструмент тестирования электронной почты. Мой личный фаворит - PutsMail (бесплатно): https://putsmail.com/tests/new.