Specifica per annunci AMP

Se desideri proporre modifiche allo standard, inserisci un commento alla Dichiarazione di Implementazione.

Gli annunci AMPHTML sono uno strumento che permette il rendering veloce ed efficace delle pagine AMP. Per garantire un rendering rapido e senza problemi dei documenti di annunci AMPHTML (i cosiddetti contenuti "creativi AMP") nel browser senza impatti negativi sull'esperienza di utilizzo, i contenuti creativi AMP devono rispettare una serie di regole di convalida. Analogamente alle regole del formato AMP, gli annunci AMPHTML possono accedere a un set limitato di tag, funzioni ed estensioni consentiti.

Regole di formato per gli annunci AMPHTML

Salvo diversa indicazione, i contenuti creativi devono obbedire a tutte le norme previste dalle regole del formato AMP, qui riportate per riferimento. Ad esempio, l'annuncio AMPHTML Boilerplate presenta differenze dal formato del codice boilerplate AMP standard.

Inoltre, i contenuti creativi devono rispettare le seguenti regole:

 <meta name="amp4ads-id" content="vendor=adsense,type=creative-id,id=1283474">
<meta name="amp4ads-id" content="vendor=adsense,type=impression-id,id=xIsjdf921S">

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

Boilerplate

Gli elementi creativi di annunci AMPHTML richiedono una linea di stile boilerplate diversa e notevolmente più semplice rispetto a quella dei documenti AMP generali:

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

Spiegazione: lo stile amp-boilerplate nasconde i contenuti del corpo fino a quando il sistema di runtime AMP non è pronto a visualizzarlo. Se Javascript è disabilitato o il runtime AMP non viene caricato, il boilerplate predefinito garantisce che il contenuto venga visualizzato comunque. Tuttavia se Javascript è completamente disattivato negli annunci AMPHTML, il loro codice non sarà eseguito e nessun annuncio verrà mai mostrato, per cui la sezione <noscript> non è necessaria. In assenza del sistema di runtime AMP, la maggior parte dei meccanismi su cui si basano gli annunci AMPHTML (ad esempio, analisi di monitoraggio della visibilità o elementi amp-img per la visualizzazione dei contenuti) non saranno disponibili, quindi è preferibile non visualizzare alcun annuncio che rischiare di mostrarne uno che non funziona correttamente.

Infine, il boilerplate degli annunci AMPHTML utilizza l'elemento amp-a4a-boilerplate al posto di amp-boilerplate in modo che gli strumenti di convalida possano identificarlo facilmente e produrre messaggi di errore più accurati a beneficio degli sviluppatori.

CSS

Animazioni e transizioni CSS

Selettori

Le proprietà transition e animation sono consentite solo nei selettori che:

• Contengono solo proprietà transition, animation, transform, visibility o opacity.

  Spiegazione: questo permette al sistema runtime AMP di rimuovere questa classe dal contesto per disattivare le animazioni, se necessario per garantire le migliori prestazioni della pagina.

Vantaggi

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

Svantaggi

Proprietà non consentita nella classe CSS.

 .box { color: red; // proprietà di animazione non consentita nel selettore di animazione transform: rotate(180deg); transition: transform 2s; } 

Proprietà che consentono animazioni e transizioni

Le uniche proprietà che possono essere sottoposte a transizione sono opacità e trasformazione. (Spiegazione)

Vantaggi

 transition: transform 2s; 

Svantaggi

 transition: background-color 2s; 

Vantaggi

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

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

Svantaggi

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

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

Estensioni ed elementi integrati AMP consentiti

I seguenti sono moduli di estensione e tag integrati AMP consentiti nei contenuti creativi di annunci AMPHTML Le estensioni e i tag integrati non elencati esplicitamente non sono ammessi.

• amp-accordion
• amp-ad-exit
• amp-analytics
• amp-anim
• amp-animation
• amp-audio
• amp-bind
• amp-carousel
• amp-fit-text
• amp-font
• amp-form
• amp-img
• amp-layout
• amp-lightbox
• amp-mraid, ancora su base sperimentale. Se stai pensando di utilizzare questo elemento, fai una segnalazione su wg-ads.
• amp-mustache
• amp-pixel
• amp-position-observer
• amp-selector
• amp-social-share
• amp-video

La maggior parte delle esclusioni riguardano elementi non inclusi per garantire le migliori prestazioni o per semplificare l'analisi degli annunci AMPHTML.

Esempio: l'elemento <amp-ad> è escluso da questo elenco. È esplicitamente vietato perché la presenza di elementi <amp-ad> all'interno di altri <amp-ad> potrebbe causare sequenze potenzialmente illimitate di caricamento in cascata degli annunci, in contrasto con gli obiettivi di elevato rendimento perseguiti dagli annunci AMPHTML.

Esempio: l'elemento <amp-iframe> è escluso da questo elenco. Non è consentito perché gli annunci potrebbero utilizzarlo per eseguire codice Javascript arbitrario o caricare contenuti arbitrari. Gli annunci che devono utilizzare tali funzionalità devono restituire false dal loro attributo a4aRegistry e utilizzare il meccanismo di rendering degli annunci "3p iframe" esistente.

Esempio: gli elementi <amp-facebook>, <amp-instagram>, <amp-twitter> e <amp-youtube> sono tutti esclusi per lo stesso motivo di <amp-iframe>: tutti creano iframe che possono potenzialmente consumare risorse illimitate.

Esempio: gli elementi <amp-ad-network-*-impl> sono omessi da questo elenco. <amp-ad> gestisce la delega a questi tag di implementazione; i contenuti creativi non possono includerli direttamente.

Esempio: l'elemento <amp-lightbox> non è ancora incluso perché anche alcuni contenuti creativi di annunci AMPHTML possono essere visualizzati in un iframe e attualmente non esiste alcun meccanismo per l'espansione di annunci oltre un iframe. In futuro, in caso se ne dimostri la necessità, il sistema potrà aggiungere il supporto di tale elemento.

Tag HTML

I seguenti tag sono consentiti nei contenuti creativi degli annunci AMPHTML. I tag non esplicitamente indicati non sono consentiti. Questo elenco è un sottoinsieme della lista di tag AMP aggiuntivi consentiti. Anche questo elenco è coerente con le specifiche HTML5 riportate nella sezione 4 Elementi di HTML.

La maggior parte delle esclusioni riguardano elementi che compromettono le prestazioni o tag che non sono standard HTML5. Ad esempio, <noscript> viene escluso perché gli annunci AMPHTML dipendono dall'attivazione di JavaScript, quindi un blocco <noscript> non verrà mai eseguito e, di conseguenza, aumenterà solo la dimensione dei contenuti creativi, oltre ai consumi di banda e ai tempi di latenza. Analogamente, gli elementi <acronym>, <big> e altri non sono consentiti perché incompatibili con HTML5.

4.1 Elemento radice

4.1.1 <html>

• Deve utilizzare i tipi <html ⚡4ads> o <html amp4ads>

4.2 Metadati del documento

4.2.1 <head>

4.2.2 <title>

4.2.4 <link>

• i tag <link rel=...> non sono consentiti, ad eccezione di <link rel=stylesheet>.

• Nota: a differenza dell'AMP generale, i tag <link rel="canonical"> non sono ammessi.

  4.2.5 <style> 4.2.6 <meta>

4.3 Sezioni

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> e <h6> 4.3.7 <header> 4.3.8 <footer> 4.3.9 <address>

4.4 Raggruppamento di contenuti

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 Semantica a livello di testo

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> e <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 Modifiche

4.6.1 <ins> 4.6.2 <del>

4.7 Contenuti incorporati

• I contenuti incorporati sono supportati solo tramite tag AMP, quali <amp-img> e <amp-video>.

4.7.4 <source>

4.7.18 SVG

I tag SVG non si trovano nello spazio dei nomi HTML5. Sono elencati di seguito senza id di sezione.

<svg> <g> <percorso> <glifo> <glyphref> <marker> <view> <circolo> <line> <poligono> <polyline> <rect> <testo> <textpath> <tref> <tspan> <clippath> <filter> <lineargradient> <radialgradient> <mask> <modello> <vkern> <hkern> <defs> <use> <simbolo> <desc> <title>

4.9 Dati tabulari

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 Moduli

4.10.8 <button>

4.11 Script

• Come nel caso di documenti AMP generali, il tag <head> dei contenuti creativi deve contenere un tag <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>.
• A differenza dei documenti AMP generali, l'uso di <noscript> non è consentito.
  • Spiegazione: poiché gli annunci AMPHTML richiedono che Javascript sia abilitato per funzionare, i blocchi <noscript> non hanno alcuno scopo negli annunci AMPHTML e causano solo maggiori consumi di risorse di rete.
• A differenza dei documenti AMP generali, l'uso di <script type="application/ld+json"> non è consentito.
  • Spiegazione: I blocchi JSON LD sono utilizzati per il markup dei dati strutturati sulle pagine host, ma gli elementi creativi degli annunci non sono documenti autonomi e non contengono dati strutturati. I blocchi JSON LD al loro interno causerebbero solo maggiori consumi di risorse di rete.
• Tutte le altre regole ed esclusioni relative agli script sono quelle applicate nei documenti AMP generali.