'[OPTIONAL] Scenario 2: Diagnosing and Fixing Issues with the Weekly Deals Email Template'

title: ‘[可选] 场景 2: 诊断和修复"每周优惠"电子邮件模板的问题’ weight: 72

场景

在为两个业务单位配置了跟踪信息后，旅游贴士集团的营销主管修改了我们在场景 1 中提供的模板，包括了HTML和CSS格式化以使其更加美观。然而，他们提到订阅者抱怨在某些电子邮件客户端上电子邮件无法正常渲染。他们还希望修改模板，以便不必一一列出所有旅游优惠。该模板应从模板数据中提取并根据用户动态填充旅游优惠。最后，作为电子邮件环境的IT经理，营销部门要求我们

任务:我们获得了AWSomeNewsletter的每周优惠活动的以下电子邮件模板。我们的目标是排查渲染失败的原因，并提供一种替代方案使电子邮件在所有电子邮件客户端上渲染相同。我们还应修改模板，以便无需重复提及旅游优惠。


```html
<!DOCTYPE html>
<html>
  <head>
    <title>旅游贴士每周优惠</title>
    <style>
      body {
        font-family: "Helvetica Neue"， Helvetica， Arial， sans-serif;
        font-size: 16px;
        line-height: 1.5;
        color: #333;
        margin: 0;
        padding: 20px;
        background-color: #f5f5f5;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
      }
      .content {
        background-color: #fff;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 2px 4px rgba(0， 0， 0， 0.1);
        max-width: 600px;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
      }
      .header {
        background-color: #3498db;
        padding: 20px;
        text-align: center;
        border-radius: 5px;
        margin-bottom: 20px;
        position: relative;
      }
      .header::after {
        content: "Exclusive Deals";
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
        background-color: #e74c3c;
        color: #fff;
        padding: 5px 10px;
        font-size: 12px;
        border-radius: 5px;
      }
      h1 {
        font-size: 24px;
        font-weight: bold;
        color: #fff;
        margin: 0;
        animation: 2s blink infinite;
      }
      p {
        margin-bottom: 10px;
      }
      ul {
        list-style: none;
        padding: 0;
        margin-bottom: 20px;
      }
      li {
        margin-bottom: 10px;
      }
      a {
        text-decoration: none;
        color: #fff;
        font-weight: bold;
        background-color: #3498db;
        display: inline-block;
        padding: 10px 20px;
        border-radius: 5px;
        transition: background-color 0.3s ease;
      }
      a:hover {
        background-color: #2c3e50;
      }
      @media only screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
        body {
          font-family: "Roboto"， sans-serif;
        }
      }
      @keyframes blink {
        0% {
          opacity: 1;
        }
        50% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="header">
        <h1>欢迎来到旅游贴士每周优惠!</h1>
      </div>
      <p>查看我们合作伙伴提供的这些令人惊叹的旅游优惠:</p>
      <ul>
        <li>
          <a href="{{traveldeal1}}" ses:tags="partner:PartnerA"
            >旅游优惠 1</a
          >
        </li>
        <li>
          <a href="{{traveldeal2}}" ses:tags="partner:PartnerB"
            >旅游优惠 2</a
          >
        </li>
        <li>
          <a href="{{traveldeal3}}" ses:tags="partner:PartnerC"
            >旅游优惠 3</a
          >
        </li>
      </ul>
    </div>
  </body>
</html>


将电子邮件模板添加到Amazon SES并尝试向我们的邮箱发送电子邮件模板，最好其中一个是Gmail，另一个是其他邮箱(Microsoft Exchange)。我们应该会看到以下结果:

1. 良好渲染(例如Microsoft Exchange邮箱)
   ![](https://static.us-east-1.prod.workshops.aws/public/faaf3fab-d2df-4e5f-bd95-aaec606af23d/static/RenderedTemplate.gif)
2. 渲染不佳(例如浏览器上的Gmail)
   ![](https://static.us-east-1.prod.workshops.aws/public/faaf3fab-d2df-4e5f-bd95-aaec606af23d/static/RenderedEmailGmail.png)



市场上有免费(和付费)的电子邮件渲染预览工具，可帮助我们测试电子邮件在不同客户端上的渲染效果。





**步骤**:

1. 分析提供的"每周优惠"活动的电子邮件模板，并确定导致渲染失败的问题。



搜索Gmail不支持哪些css元素，并删除有问题的元素，以便电子邮件在各种电子邮件客户端上统一渲染。一个不错的网站是https://www.caniemail.com/





2. 找出如何根据传递的旅游优惠数据动态填充旅游优惠。请记住，我们还需要保留我们在[实验6.1](/lab-6/lab-6-1/)中配置的链接跟踪标记。



查看高级电子邮件个性化文档
。





3. 将更新后的电子邮件模板重新添加到Amazon SES。
4. 测试更正后的电子邮件模板，确保解决了渲染问题，并且旅游优惠根据当周旅游优惠的数量动态填充。我们在下面提供了2个命令供我们测试，使用第一个命令，我们应该会收到一封包含3个旅游优惠的电子邮件，使用第二个命令，我们应该会收到另一封包含5个旅游优惠的电子邮件。


**命令**

```shell
aws sesv2 send-email \
--from-email-address "sender@example.com" \
--destination '{
  "ToAddresses": [
    "recipient@example.com"
  ]
}' \
--content '{
  "Template": {
    "TemplateName": "TravelTipsWeeklyDeals"，
    "TemplateData": "{ \"travel_deals\": [ { \"name\": \"旅游优惠 1\"， \"url\": \"https://examplepartnerA.com/deal1\"， \"sestag\": \"partner:PartnerA\" }，{ \"name\": \"旅游优惠 2\"， \"url\": \"https://examplepartnerB.com/deal2\"， \"sestag\": \"partner:PartnerB\" }，{ \"name\": \"旅游优惠 3\"， \"url\": \"https://examplepartnerC.com/deal3\"， \"sestag\": \"partner:PartnerC\" } ] }"
  }
}'

预期结果

命令

aws sesv2 send-email \
--from-email-address "sender@example.com" \
--destination '{
  "ToAddresses": [
    "recipient@example.com"
  ]
}' \
--content '{
  "Template": {
    "TemplateName": "TravelTipsWeeklyDeals"，
    "TemplateData": "{ \"travel_deals\": [ { \"name\": \"旅游优惠 1\"， \"url\": \"https://examplepartnerA.com/deal1\"， \"sestag\": \"partner:PartnerA\" }，{ \"name\": \"旅游优惠 2\"， \"url\": \"https://examplepartnerB.com/deal2\"， \"sestag\": \"partner:PartnerB\" }，{ \"name\": \"旅游优惠 3\"， \"url\": \"https://examplepartnerC.com/deal3\"， \"sestag\": \"partner:PartnerC\" }，{ \"name\": \"旅游优惠 4\"， \"url\": \"https://examplepartnerD.com/deal4\"， \"sestag\": \"partner:PartnerD\" }，{ \"name\": \"旅游优惠 5\"， \"url\": \"https://examplepartnerE.com/deal5\"， \"sestag\": \"partner:PartnerE\" } ] }"
  }
}'

预期结果

优化我们的电子邮件内容

作为最后一步，请确保我们发送的电子邮件内容符合以下最佳实践。

  • 确保我们的电子邮件有主题和正文。

  • 避免发送过于简短的电子邮件，尤其是包含图像的电子邮件。

  • 使用完整链接，而不是缩短的链接。

  • 确保电子邮件中的所有链接都有效并重定向到功能网站。(为了本实验的目的，我们在上面给出了一些示例链接。将它们更改为可访问的其他网站。)

  • 添加List-Unsubscribe标头以提高我们的声誉，尤其是对于促销电子邮件。(参考实验4.4 进行回顾。)

  • 为我们的电子邮件包含HTML和纯文本部分。

在此场景中，我们已成功诊断并修复了"每周优惠"电子邮件模板的问题。我们确定了导致Gmail渲染问题的CSS元素并将其删除，以确保在各种电子邮件客户端上统一渲染。请记住，最好在多个电子邮件客户端上测试我们的电子邮件渲染效果，以确保我们的整个受众群都可以访问我们的电子邮件。此外，我们修改了模板以根据提供的数据动态填充旅游优惠，使其更加灵活和高效。最后，我们根据最佳实践检查了电子邮件的内容，以确保电子邮件的可交付性。

在下一个场景中，我们将专注于提高电子邮件的可交付性。我们将学习各种最佳实践、技术和配置，以帮助提高我们的电子邮件到达订阅者收件箱的机会。