Google AMP: JavaScript personalizado

En los capítulos anteriores, hemos estudiado muchos componentes de amplificador. También hemos visto que para que cada componente funcione necesitamos agregar un archivo javascript.

Por ejemplo, para amp-iframe, el script agregado es el siguiente:

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

Tenemos asyncagregado a la etiqueta de secuencia de comandos. Este es el estándar para amp, ya que cargan todos los archivos javascript de forma asincrónica. Hay uncustom-element atributo agregado que tiene el nombre del componente para el que se usa.

Para usar cualquier componente de amplificador si no forma parte del archivo javascript de amplificador principal, el script debe agregarse como se muestra arriba.

Estamos acostumbrados principalmente a escribir mucho código javascript dentro de las páginas y también incluimos archivos javascript usando etiquetas de script.

¿Cómo podemos hacer eso en amp? Por lo tanto, AMP no permite que se escriba ningún código de secuencia de comandos ni que se cargue una etiqueta de secuencia de comandos externamente.

Amp tiene su propio componente para encargarse del trabajo que se supone que debe realizar el script adicional que se agrega en la página. Básicamente, esto se hace por razones de rendimiento, para cargar el contenido de la página más rápido y no tener javascript retrasar el renderizado o hacer cambios en el DOM.

Esta es la especificación proporcionada por AMP según su sitio oficial para etiquetas de script:

Prohibido a menos que el tipo sea application / ld + json. (Se pueden agregar otros valores no ejecutables según sea necesario). La excepción es la etiqueta de secuencia de comandos obligatoria para cargar el tiempo de ejecución de AMP y las etiquetas de secuencia de comandos para cargar componentes extendidos.

Un ejemplo de trabajo donde podemos usar application/ld+jsondentro de nuestras páginas de amplificadores se muestra aquí. Tenga en cuenta que estamos usando la etiqueta de secuencia de comandos con type = ”application / ld + json” para el componente amp-analytics para activar el rastreador.

De manera similar, podemos usar la etiqueta de script con type = ”application / ld + json” en otros componentes de amp donde sea necesario.

Ejemplo

<!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>

Cuando se accede a la página en el navegador, el rastreador se activará para la vista de página. Se puede ver en la pestaña de red de Google como se muestra a continuación.

↰ Previous page Next page ↱