Tworzenie powłoki dla reklamy

Kod HTML wymagany dla reklamy AMPHTML jest wariantem kodu AMPHTML wymaganego dla strony AMP. Zapoznajmy się z wymaganym kodem, tworząc powłokę naszej reklamy AMPHTML.

Za pomocą swojego ulubionego edytora tekstów utwórz plik HTML o nazwie my-amphtml-ad.html. Skopiuj do tego pliku następujący znacznik HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My amphtml ad</title>
    <meta name="viewport" content="width=device-width" />
  </head>
  <body></body>
</html>

Są to znaczniki prostego, prawidłowego pliku HTML. Zauważ, że dołączyliśmy znacznik meta viewport, dzięki czemu mamy responsywne okienko na ekranie.

Zmodyfikujmy teraz kod HTML, aby uczynić z niego reklamę AMPHTML.

W sekcji <html>dodaj atrybut ⚡4ads, który identyfikuje dokument jako reklamę AMPHTML. Można też określić atrybut amp4ads, który jest również prawidłowy.

<!DOCTYPE html>
<html ⚡4ads>
  <head>
    ...
  </head>
</html>

UWAGA — w odróżnieniu od stron AMP, reklamy AMPHTML nie wymagają znacznika <link rel="canonical">.

Reklamy AMPHTML wymagają własnej wersji środowiska uruchomieniowego AMP, więc dodaj następujący znacznik <script> do sekcji <head> dokumentu:

<script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>

Kreacje reklamowe AMPHTML wymagają innej i znacznie prostszej linii stylu boilerplate niż strony AMP. Dodaj następujący kod do swojej sekcji <head>:

<style amp4ads-boilerplate>
  body {
    visibility: hidden;
  }
</style>

Aby nadać styl reklamie AMPHTML, kod CSS musi być osadzony w dokumencie AMPHTML przy użyciu znaczników <style amp-custom</style> w sekcji <head>. Jako że renderujemy prostą reklamę graficzną, nie wymagamy żadnego kodu CSS, więc nie będziemy dodawać tych znaczników.

UWAGA — w przypadku reklam AMPHTML maksymalny rozmiar arkusza stylów inline wynosi 20 kilobajtów. Dowiedz się więcej o wymaganiach dotyczących CSS w specyfikacji reklam AMPHTML.

Oto kompletny kod Twojego pliku HTML:

<!DOCTYPE html>
<html ⚡4ads>
  <head>
    <meta charset="utf-8" />
    <title>My amphtml ad</title>
    <meta name="viewport" content="width=device-width" />
    <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
    <style amp4ads-boilerplate>
      body {
        visibility: hidden;
      }
    </style>
  </head>
  <body></body>
</html>

Masz teraz prawidłową reklamę AMPHTML, choć dość pustą. Utwórzmy reklamę graficzną.

Rozpocznij