AMP

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:

Regola Spiegazione
Deve usare o come tag di chiusura. Consente agli strumenti di convalida di distinguere se i contenuti creativi sono documenti AMP generali o documenti di annunci AMPHTML limitati, permettendone la corretta visualizzazione.
Deve includere <script async src="https://cdn.ampproject.org/amp4ads-v0.js"> come script di runtime al posto di https://cdn.ampproject.org/v0.js. Consente comportamenti di runtime personalizzati per gli annunci AMPHTML pubblicati in iframe indipendenti dall'origine.
Non deve includere un tag <link rel="canonical">. I contenuti creativi degli annunci non hanno una "versione canonica non AMP" e non verranno indicizzati per le ricerche in modo indipendente, quindi l'autoreferenzialità sarebbe inutile.
Può includere come identificatori dei tag meta opzionali nell'intestazione HTML, in formato <meta name="amp4ads-id" content="vendor=${vendor},type=${type},id=${id}">. Questi tag meta devono essere collocati prima dello script amp4ads-v0.js. I valori di vendor e id sono stringhe contenenti i soli caratteri [0-9a-zA-Z_-]. Il valore di type può essere creative-id o impression-id. Questi identificatori personalizzati permettono di individuare gli annunci e i contenuti creativi. Possono essere utili a scopo di segnalazione e debugging.

Esempio:

 <meta name="amp4ads-id" content="vendor=adsense,type=creative-id,id=1283474">
<meta name="amp4ads-id" content="vendor=adsense,type=impression-id,id=xIsjdf921S">
Il tracciamento di visibilità <amp-analytics> può individuare il solo selettore di annuncio completo, tramite "visibilitySpec": { "selector": "amp-ad" } come riportato nella Segnalazione #4018 e in PR #4368. In particolare, non permette di individuare selettori di elementi all'interno dei contenuti creativi dell'annuncio. In alcuni casi, gli annunci AMPHTML possono effettuare il rendering di elementi creativi di annunci in un iframe. In tali casi, gli strumenti di analisi della pagina host potranno individuare solo l'intero iframe e non saranno in grado di accedere a selettori di livello più dettagliato.

Esempio:


{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}

Questa configurazione invia una richiesta all'URL https://example.com/nestedAmpAnalytics quando il 50% dell'annuncio che lo racchiude è stato visibile ininterrottamente per 1 secondo sullo schermo.

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.

si applicano le stesse regole sulle variazioni del testo boilerplate applicate agli elementi boilerplate AMP generali.

CSS

Regola Spiegazione
Gli elementi position:fixed e position:stickynon sono ammessi nel codice CSS dei contenuti creativi. Gli elementi position:fixed escono dal DOM shadow da cui gli annunci AMPHTML dipendono. Quindi gli annunci in AMP già non possono usare la posizione fissa.
L'uso di touch-action non è consentito. Gli annunci in grado di manipolare gli elementi touch-action possono interferire con l'opzione dell'utente di scorrere il documento host.
Il codice CSS dei contenuti creativi è limitato a 20.000 byte. Blocchi CSS troppo grandi possono appesantire i contenuti creativi, aumentare la latenza di rete e peggiorare le prestazioni della pagina.
Transizioni e animazioni sono soggette a restrizioni aggiuntive. Il sistema AMP deve essere in grado di controllare tutte le animazioni appartenenti a un annuncio, in modo da poterle interrompere quando l'annuncio non è sullo schermo o se le risorse di sistema sono in esaurimento.
I prefissi specifici di un fornitore sono considerati alias per lo stesso simbolo senza il prefisso ai fini della convalida. Ciò significa che se un simbolo foo non è ammesso dalle regole di convalida CSS, anche il simbolo -vendor-foo non sarà ammesso. Alcune proprietà con prefisso del fornitore forniscono funzionalità equivalenti a proprietà che sono altrimenti vietate o limitate da queste regole.

Esempio: -webkit-transition e -moz-transition sono entrambi considerati alias dell'elemento transition. Saranno consentiti solo in contesti in cui sarebbe consentito l'uso di semplici elementi transition (consultare la successiva sezione Selettori).

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.

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.