Google AMP - Javascript personalizzato

Nei capitoli precedenti abbiamo studiato molti componenti dell'amplificatore. Abbiamo anche visto che per far funzionare ogni componente è necessario aggiungere un file javascript.

Ad esempio, per amp-iframe lo script aggiunto è il seguente:

<script async custom-element="amp-iframe"
   src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js">
</script>

abbiamo asyncaggiunto al tag script. Questo è lo standard per amp poiché caricano tutti i file javascript in modo asincrono. C'è uncustom-element attributo aggiunto che ha il nome del componente per cui è utilizzato.

Per utilizzare qualsiasi componente amp se non fa parte del file javascript core amp, lo script deve essere aggiunto come mostrato sopra.

Siamo per lo più abituati a scrivere, molto codice javascript all'interno delle pagine e includiamo anche file javascript usando tag script.

Come possiamo farlo in amp? Quindi per questo AMP non consente la scrittura di alcun codice di script o il caricamento di tag di script esternamente.

Amp ha i suoi componenti per prendersi cura del lavoro che si suppone venga svolto dallo script aggiuntivo che viene aggiunto nella pagina. Questo è fondamentalmente fatto per motivi di prestazioni, per caricare il contenuto della pagina più velocemente e non fare in modo che javascript ritardi il rendering o apporti modifiche al DOM.

Questa è la specifica fornita da AMP come da sito ufficiale per i tag di script -

Vietato a meno che il tipo non sia application / ld + json. (È possibile aggiungere altri valori non eseguibili, se necessario). L'eccezione è rappresentata dal tag script obbligatorio per caricare il runtime AMP e dai tag script per caricare i componenti estesi.

Un esempio funzionante dove possiamo usare application/ld+jsonall'interno delle nostre pagine amp è mostrato qui. Tieni presente che stiamo utilizzando il tag script con type = "application / ld + json" per il componente amp-analytics per attivare il tracker.

Allo stesso modo, possiamo usare il tag script con type = "application / ld + json" su altri componenti amp, ove richiesto.

Esempio

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>amp-analytics</title>
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <script async custom-element = "amp-analytics" 
         src = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
      </script>
      <link rel = "canonical" href = "ampanalytics.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>
   </head>
   <body>
      <h1>Google Amp - Analytics</h1>
      <amp-analytics>
         <script type = "application/json">
            {
            "requests": {
               "event": "http://localhost:8080/googleamp/tracking.php?
               user=test&account=localhost&event=${eventId}"
            },
            "triggers": {
               "trackPageview": {
                  "on": "visible",
                  "request": "event",
                  "vars": {
                     "eventId": "pageview"
                  }
               }
            }
         }
         </script>
      </amp-analytics>
   </body>
</html>

Quando la pagina viene visualizzata nel browser, il tracker verrà attivato per la visualizzazione di pagina. Può essere visualizzato nella scheda Rete di Google come mostrato di seguito.