时间戳

首页 > 解决方案 > 如何在 amp 电子邮件中收集和存储动态数据？

amp-html - 如何在 amp 电子邮件中收集和存储动态数据？

问题描述

我对放大器很陌生。我无法理解用户响应数据如何对 amp 电子邮件发件人可见。例如，如果有一个表单，发件人将如何收集 amp 邮件收件人在表单中输入的数据

标签： amp-htmlamp-email

解决方案

AMP for Email 与 HTML 电子邮件非常相似，只是它让电子邮件发件人支持许多新功能。它可以包含您在问题中提到的表单提交等功能，除了交互式元素等......

AMP 的发件人需要有自己的后端系统来收集 AMP 电子邮件中提交的表单。例如，请参见以下实现：

<!doctype html>
<html ⚡4email>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
  <style amp4email-boilerplate>body{visibility:hidden}</style>
  <style amp-custom>
    h1 {
      margin: 1rem;
    }
  </style>
</head>
<body>
 <form method="post"
    action-xhr="https://example.com/subscribe" target="_top">
    <fieldset>      
      <label>
        <span>Email:</span>
        <input type="email"
          name="email"
          required>
      </label>
      <br>
      <input type="submit"
        value="Subscribe">
    </fieldset>
    <div submit-success>
      <template type="amp-mustache">
        Subscription successful!
      </template>
    </div>
    <div submit-error>
      <template type="amp-mustache">
        Subscription failed!
      </template>
    </div>
  </form>
</body>
</html>

上面的代码包含一个基本的 AMP 电子邮件，其表单允许用户使用他们的电子邮件进行订阅。当用户提交表单时，电子邮件 id使用该方法发送到标签action-xhr属性中给定的 URL。formPOST

如果操作成功，submit-success则显示该块。否则submit-error显示块。实现非常简单直接。您可以查看此链接以更好地理解这一点。

推荐阅读