Неожиданный результат в Gmail с использованием AMP - PullRequest
0 голосов
/ 05 февраля 2020

Я только что узнал об этом новом расширении HTML и хотел кое-что узнать о нем.

Я отправил на мой аккаунт Gmail тест с их Playground на мой аккаунт Gmail. и он работал нормально.

Теперь я делаю то же самое, используя свою действующую почтовую систему с SPF , DKIM и DMAR C ( следуя требованиям их документации) и когда он прибывает, он выглядит сломанным. Усилитель - html даже не близко к тому, который я построил на детской площадке.

Чего мне не хватает?

  • У меня есть белый список почта
  • Я разрешаю получать динамическую c почту от отправителя (мой ESP)

Вот шаблон, который я использовал для теста

<!--
  ## Introduction

  The [amp-carousel](/content/amp-dev/documentation/components/reference/amp-carousel-v0.2.md) component allows displaying multiple similar pieces of content along a horizontal axis.
--><!-- -->
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
  <title>amp-carousel</title>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <!-- ## Setup -->
  <!-- Import the carousel component in the header. -->
  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
  <link rel="canonical" href="https://amp.dev/documentation/examples/components/amp-carousel/index.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <style amp-custom>
    .blue-box, .red-box, .green-box {
      width: 100%;
      height: 280px;
    }
    .blue-box {
      background: blue;
    }
    .green-box {
      background: green;
    }
    .red-box {
      background: red;
    }
    #custom-button .amp-carousel-button-prev {
      left: 5%;
      background-image: url('https://amp.dev/static/samples/img/carousel-arrow-left.png');
    }
    #custom-button .amp-carousel-button-next {
      right: 5%;
      background-image: url('https://amp.dev/static/samples/img/carousel-arrow-right.png');
    }
  </style>
</head>
<body>

  <!-- ## Basic Usage -->
  <!-- Use `type="carousel"` to display a list of images as a continuous strip. -->
  <amp-carousel height="300" layout="fixed-height" type="carousel">
    <amp-img src="https://preview.amp.dev/static/samples/img/image1.jpg" width="400" height="300" alt="a sample image"></amp-img>
    <amp-img src="https://preview.amp.dev/static/samples/img/image2.jpg" width="400" height="300" alt="another sample image"></amp-img>
    <amp-img src="https://preview.amp.dev/static/samples/img/image3.jpg" width="400" height="300" alt="and another sample image"></amp-img>
  </amp-carousel>

  <!-- ## Slides -->
  <!-- Use `type="slides"` to display a list of images as slides. -->
  <amp-carousel width="400" height="300" layout="responsive" type="slides">
    <amp-img src="https://preview.amp.dev/static/samples/img/image1.jpg" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
    <amp-img src="https://preview.amp.dev/static/samples/img/image2.jpg" width="400" height="300" layout="responsive" alt="another sample image"></amp-img>
    <amp-img src="https://preview.amp.dev/static/samples/img/image3.jpg" width="400" height="300" layout="responsive" alt="and another sample image"></amp-img>
  </amp-carousel>

  <!-- ## Autoplay -->
  <!-- The `autoplay` attribute (type=slides only) advances the slide to the next slide without user interaction, by default it will advance a slide in 5000 millisecond intervals (5 seconds) and can be overridden by the `delay` attribute.  -->
  <amp-carousel width="400" height="300" layout="responsive" type="slides" autoplay delay="2000">
    <amp-img src="https://preview.amp.dev/static/samples/img/image1.jpg" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
    <amp-img src="https://preview.amp.dev/static/samples/img/image2.jpg" width="400" height="300" layout="responsive" alt="another sample image"></amp-img>
    <amp-img src="https://preview.amp.dev/static/samples/img/image3.jpg" width="400" height="300" layout="responsive" alt="and another sample image"></amp-img>
  </amp-carousel>

  <!-- ## Buttons -->
  <!-- By default, carousel buttons use inlined SVGs as background-images.
    You may override these with your own SVGs or images by using `.amp-carousel-button-prev` and `.amp-carousel-button-next` classes. -->
  <amp-carousel id="custom-button" width="400" height="300" layout="responsive" type="slides" autoplay delay="2000">
    <amp-img src="https://preview.amp.dev/static/samples/img/image1.jpg" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
    <amp-img src="https://preview.amp.dev/static/samples/img/image2.jpg" width="400" height="300" layout="responsive" alt="another sample image"></amp-img>
    <amp-img src="https://preview.amp.dev/static/samples/img/image3.jpg" width="400" height="300" layout="responsive" alt="and another sample image"></amp-img>
  </amp-carousel>

  <!-- ## Supported Contents  -->
  <!-- Each of these nodes may also have arbitrary HTML children.  -->
  <amp-carousel height="300" layout="fixed-height" type="slides">
    <div>
      <div class="blue-box">
        This is a blue box.
      </div>
    </div>
    <div>
      <div class="red-box">
        This is a red box.
      </div>
    </div>
    <div>
      <div class="green-box">
        This is a green box.
      </div>
    </div>
  </amp-carousel>
  <!-- A good use case for `amp-carousel` are image galleries, [here](/documentation/examples/multimedia-animations/image_galleries_with_amp-carousel/) are some examples. -->
</body></html>

Я читал другие решения, но они используют. NET, C#, Python и другие решения, касающиеся заказного программного обеспечения для отправки такого рода писем, но как насчет крупных служб массовой рассылки, таких как XCampaign, SalesForce, Selligent, et c?

Требуется ли обновление для разрешения отправки электронной почты AMP?

...