AMP
PL
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Tiếng việt

Specyfikacja AMP dla reklam

Jeśli chcesz zaproponować zmiany w standardzie, umieść komentarz na stronie Intent to Implement.

Reklamy AMPHTML to mechanizm służący do renderowania szybkich, wydajnych reklam na stronach AMP. Aby umożliwić szybkie i płynne renderowanie dokumentów reklamowych AMPHTML („kreacji AMP”) w przeglądarce i nie pogarszać komfortu użytkowania, kreacje AMP muszą być zgodne z zestawem reguł walidacji. Podobnie, w duchu reguł formatu AMP reklamy AMPHTML mają dostęp do ograniczonego zestawu dozwolonych znaczników, możliwości i rozszerzeń.

Reguły formatu reklam AMPHTML

O ile poniżej nie określono inaczej, kreacja musi przestrzegać wszystkich zasad podanych w regułach formatu AMP, zawartych tutaj poprzez odniesienie. Na przykład reklama AMPHTML Boilerplate odbiega od standardowego kodu AMP.

Ponadto kreacje muszą być zgodne z następującymi regułami:

Reguła Uzasadnienie
Musi być ujęta w znaczniki <html ⚡4ads> lub <html amp4ads>. Pozwala walidatorom zidentyfikować dokument kreacji jako ogólny dokument AMP lub ograniczony dokument reklamy AMPHTML i odpowiednio go wysłać.
Musi zawierać <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script> jako skrypt uruchomieniowy, zamiast https://cdn.ampproject.org/v0.js. Umożliwia dostosowane do serwowanych w ramkach iframe reklam AMPHTML o różnym pochodzeniu sposoby działania środowiska uruchomieniowego.
Nie może zawierać znacznika <link rel="canonical">. Kreacje reklamowe nie mają „wersji kanonicznej bez AMP” i nie będą niezależnie indeksowane przez wyszukiwarkę, więc odwołania do samej siebie byłyby bezużyteczne.
Może zawierać w sekcji head kodu HTML opcjonalne tagi meta jako identyfikatory, w formacie <meta name="amp4ads-id" content="vendor=${vendor},type=${type},id=${id}">. Te tagi meta muszą być umieszczone przed skryptem amp4ads-v0.js. Wartości vendor i id to ciągi zawierające jedynie znaki [0-9a-zA-Z_-]. Wartość type to albo creative-id, albo impression-id. Za pomocą tych niestandardowych identyfikatorów można zidentyfikować wyświetlenie lub kreację. Mogą być pomocne przy zgłaszaniu i debugowaniu.

Przykład:

<meta name="amp4ads-id"
  content="vendor=adsense,type=creative-id,id=1283474">
<meta name="amp4ads-id"
  content="vendor=adsense,type=impression-id,id=xIsjdf921S">
Śledzenie widoczności za pomocą składnika <amp-analytics></amp-analytics> może dotyczyć jedynie selektora całej reklamy, "visibilitySpec": { "selector": "amp-ad" } zgodnie z definicją w Issue #4018 i PR #4368. W szczególności nie może ono być skierowane na żadne selektory elementów w kreacji reklamowej. W niektórych przypadkach reklamy AMPHTML mogą decydować się na wyrenderowanie reklamy w ramce iframe. W tych przypadkach analiza strony hosta może być ukierunkowana tylko na całą ramkę iframe i nie będzie miała dostępu do żadnych precyzyjniejszych selektorów.

Przykład:

<amp-analytics id="nestedAnalytics">
  <script type="application/json">
  {
    "requests": {
      "visibility": "https://example.com/nestedAmpAnalytics"
    },
    "triggers": {
      "visibilitySpec": {
      "selector": "amp-ad",
      "visiblePercentageMin": 50,
      "continuousTimeMin": 1000
      }
    }
  }
  </script>
</amp-analytics>

Ta konfiguracja wysyła żądanie do adresu URL https://example.com/nestedAmpAnalytics, gdy 50% załączonej reklamy było stale widoczne na ekranie przez 1 sekundę.

Boilerplate

Kreacje reklamowe AMPHTML wymagają innej i znacznie prostszej linii stylu boilerplate niż ogólne dokumenty AMP:

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

Uzasadnienie: styl amp-boilerplate ukrywa zawartość sekcji body aż do momentu, gdy środowisko uruchomieniowe AMP jest gotowe i może ją pokazać. Jeśli obsługa JavaScript jest wyłączona lub załadowanie środowiska uruchomieniowego AMP nie powiodło się, domyślny gotowy kod zapewnia, że mimo to zawartość zostanie ostatecznie wyświetlona. Jeśli jednak JavaScript jest całkowicie wyłączony, reklamy AMPHTML nie będą uruchamiane i nigdy nie zostanie wyświetlona żadna reklama, więc nie ma potrzeby stosowania sekcji <noscript>. W przypadku braku środowiska uruchomieniowego AMP większość maszynerii, na której opierają się reklamy AMPHTML (jak analityka śledzenia widoczności lub składnik amp-img do wyświetlania treści) nie będzie dostępna, więc lepiej jest nie wyświetlać żadnej reklamy niż reklamę działającą wadliwie.

Wreszcie, w standardowym kodzie AMPHTML reklamy używany jest składnik amp-a4a-boilerplate, zamiast amp-boilerplate, aby walidatory mogły go z łatwością zidentyfikować i wygenerować dokładniejsze komunikaty o błędach, pomocne dla programistów.

Należy pamiętać, że obowiązują te same zasady dotyczące modyfikacji tekstu standardowego, co w przypadku ogólnego kodu standardowego AMP .

CSS

Reguła Uzasadnienie
Właściwości position:fixed i position:sticky są zabronione w CSS kreacji. Właściwość position:fixed wyłamuje się z modelu DOM z hierarchią towarzyszącą, od którego zależą reklamy AMPHTML. Reklamy w AMP nie mogą już używać stałej pozycji.
Właściwość touch-action jest zabroniona. Reklama, która może manipulować właściwością touch-action może zakłócać możliwość przewijania dokumentu hosta przez użytkownika.
Kod CSS kreacji jest ograniczony do 20 000 bajtów. Duże bloki CSS rozdymają kreację, zwiększają opóźnienie sieci i obniżają wydajność strony.
Przejścia i animacje podlegają dodatkowym ograniczeniom. AMP musi być w stanie kontrolować wszystkie animacje należące do reklamy, tak aby mógł je zatrzymać, gdy reklama nie znajduje się na ekranie lub zasoby systemowe są bardzo małe.
Prefiksy zależne od dostawcy są do celów walidacji uznawane za aliasy tego samego symbolu bez prefiksu. To znaczy, że jeśli symbol foo jest zabroniony przez reguły walidacji CSS, symbol -vendor-foo będzie również zabroniony. Niektóre właściwości poprzedzone prefiksami dostawcy zapewniają funkcjonalność równoważną z właściwościami, które są w inny sposób zakazane lub ograniczone przez te reguły.

Przykład: zarówno -webkit-transition i -moz-transition są uznawane za aliasy symbolu transition. Będą one dozwolone tylko w kontekstach, w których dozwolony będzie sam element transition (patrz sekcja Selektory poniżej).

Animacje i przejścia CSS

Selektory

Właściwości transition i animation są dozwolone tylko w selektorach, które:

  • Zawierają tylko właściwości transition, animation, transform, visibility lub opacity.

Uzasadnienie: pozwala to na usunięcie tej klasy z kontekstu w celu dezaktywowania animacji, gdy jest to konieczne do działania strony.

Dobrze

.box {
transform: rotate(180deg);
transition: transform 2s;
}

Źle

Właściwość niedozwolona w klasie CSS.

.box {
color: red; // non-animation property not allowed in animation selector
transform: rotate(180deg);
transition: transform 2s;
}
Właściwości podlegające przejściu i i animacji

Jedynymi właściwościami, które podlegają przejściu są opacity i transform. (Uzasadnienie)

Dobrze

transition: transform 2s;

Źle

transition: background-color 2s;

Dobrze

@keyframes turn {
from {
transform: rotate(180deg);
}

to {
transform: rotate(90deg);
}
}

Źle

@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}

to {
margin-left: 0%;
width: 100%;
}
}

Dozwolone rozszerzenia i wbudowane obiekty AMP

Poniżej widnieją dozwolone moduły rozszerzeń AMP i znaczniki AMP wbudowywane w reklamę AMPHTML. Rozszerzenia lub wbudowane znaczniki, których nie ma na liście, są zabronione.

Większość pominięć wynika z kwestii wydajności albo uproszczenia analizy reklam AMPHTML.

Przykład: <amp-ad> pominięto na tej liście. Jest jednoznacznie niedozwolony, ponieważ zezwalanie na <amp-ad> w <amp-ad> może doprowadzić do ładowania nieograniczonych kaskad reklam, które nie spełniają celów wydajnościowych reklam AMPHTML.

Przykład: <amp-iframe> pominięto na tej liście. Jest niedozwolony, ponieważ reklamy mogą go użyć do wykonania dowolnego kodu JavaScript i załadowania dowolnej zawartości. Reklamy chcące korzystać z takich możliwości powinny zwracać wartość false ze swojego wpisu a4aRegistry i używać istniejącego mechanizmu renderowania reklam „3p iframe”.

Przykład: <amp-facebook>, <amp-instagram>, <amp-twitter> i <amp-youtube> pominięto z tego samego powodu, co <amp-iframe>: wszystkie one tworzą ramki iframe i mogą w nich używać nieograniczonych zasobów.

Przykład: <amp-ad-network-*-impl> pominięto na tej liście. Znacznik <amp-ad> obsługuje delegację do tych znaczników implementacji; kreacje nie powinny próbować dołączać ich bezpośrednio.

Przykład: <amp-lightbox> nie jest jeszcze uwzględniony, ponieważ nawet niektóre kreacje reklam AMPHTML mogą być renderowane w ramce iframe i obecnie nie ma mechanizmu, który umożliwiałby rozszerzenie reklamy poza ramkę iframe. Obsługa może zostać dodana w przyszłości, jeśli zostanie wykazane zapotrzebowanie na nią.

Znaczniki HTML

Poniżej znajdują się znaczniki dozwolone w kreacji reklamowej AMPHTML. Znaczniki, które nie są jawnie dozwolone, są zabronione. Ta lista jest podzbiorem ogólnej listy dozwolonych znaczników AMPHTML. Podobnie jak ta lista, są uporządkowane zgodnie ze specyfikacją HTML5 w sekcji 4 Elementy HTML.

Większość pominięć wynika z kwestii wydajności albo tego, że znaczniki nie są w standardzie HTML5. Na przykład <noscript> pominięto, ponieważ reklamy AMPHTML zależą od włączenia obsługi JavaScript, więc blok <noscript> nigdy nie jest wykonywany, zatem jedynie zaśmieca kreację, obciąża łącze i zwiększa latencję. Podobnie znaczniki <acronym>, <big> itd. są zabronione, ponieważ nie są zgodne z HTML5.

4.1 Element główny

4.1.1 <html>

  • Musi mieć typ <html ⚡4ads> albo <html amp4ads>

4.2 Metadane dokumentu

4.2.1 <head>

4.2.2 <title>

4.2.4 <link>

  • Znaczniki <link rel=...> są niedozwolone, z wyjątkiem <link rel=stylesheet>.

  • Uwaga: w odróżnieniu od ogólnego AMP, znaczniki <link rel="canonical"> są zabronione.

4.2.5 <style> 4.2.6 <meta>

4.3 Sekcje

4.3.1 <body> 4.3.2 <article> 4.3.3 <section> 4.3.4 <nav> 4.3.5 <aside> 4.3.6 <h1>, <h2>, <h3>, <h4>, <h5> i <h6> 4.3.7 <header> 4.3.8 <footer> 4.3.9 <address>

4.4 Grupowanie zawartości

4.4.1 <p> 4.4.2 <hr> 4.4.3 <pre> 4.4.4 <blockquote> 4.4.5 <ol> 4.4.6 <ul> 4.4.7 <li> 4.4.8 <dl> 4.4.9 <dt> 4.4.10 <dd> 4.4.11 <figure> 4.4.12 <figcaption> 4.4.13 <div> 4.4.14 <main>

4.5 Semantyka na poziomie tekstu

4.5.1 <a> 4.5.2 <em> 4.5.3 <strong> 4.5.4 <small> 4.5.5 <s> 4.5.6 <cite> 4.5.7 <q> 4.5.8 <dfn> 4.5.9 <abbr> 4.5.10 <data> 4.5.11 <time> 4.5.12 <code> 4.5.13 <var> 4.5.14 <samp> 4.5.15 <kbd > 4.5.16 <sub> and <sup> 4.5.17 <i> 4.5.18 <b> 4.5.19 <u> 4.5.20 <mark> 4.5.21 <ruby> 4.5.22 <rb> 4.5.23 <rt> 4.5.24 <rtc> 4.5.25 <rp> 4.5.26 <bdi> 4.5.27 <bdo> 4.5.28 <span> 4.5.29 <br> 4.5.30 <wbr>

4.6 Edycje

4.6.1 <ins> 4.6.2 <del>

4.7 Zawartość osadzona

  • Zawartość osadzona jest obsługiwana tylko za pomocą znaczników AMP, takich jak <amp-img> lub <amp-video>.

4.7.4 <source>

4.7.18 SVG

Tagi SVG nie znajdują się w przestrzeni nazw HTML5. Są one wymienione poniżej bez identyfikatorów sekcji.

<svg>``<g>``<path>``<glyph>``<glyphref>``<marker>``<view>``<circle>``<line>``<polygon>``<polyline>``<rect>``<text>``<textpath>``<tref>``<tspan>``<clippath>``<filter>``<lineargradient>``<radialgradient>``<mask>``<pattern>``<vkern>``<hkern>``<defs>``<use>``<symbol>``<desc>``<title>

4.9 Dane tabelaryczne

4.9.1 <table> 4.9.2 <caption> 4.9.3 <colgroup> 4.9.4 <col> 4.9.5 <tbody> 4.9.6 <thead> 4.9.7 <tfoot> 4.9.8 <tr> 4.9.9 <td> 4.9.10 <th>

4.10 Formularze

4.10.8 <button>

4.11 Obsługa skryptów

  • Podobnie jak ogólny dokument AMP, znacznik <head> kreacji musi zawierać znacznik <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>.
  • W odróżnieniu od ogólnego AMP, znacznik <noscript> jest zabroniony.
  • Uzasadnienie: reklamy AMPHTML wymagają do działania włączenia obsługi JavaScript, więc bloki <noscript> są bezcelowe w reklamach AMPHTML i jedynie obciążają sieć.
  • W odróżnieniu od ogólnego AMP, właściwość <script type="application/ld+json"> jest zabroniona.
  • Uzasadnienie: JSON LD jest używany do strukturalnego oznaczania danych na stronach hosta, ale kreacje reklamowe nie są samodzielnymi dokumentami i nie zawierają danych strukturalnych. Bloki JSON LD w nich tylko obciążałyby sieć.
  • Wszystkie inne reguły obsługi skryptów i wykluczenia są przeniesione z ogólnego AMP.