Google AMP: clases CSS dinámicas

Amp-dynamic-css-classes agrega clases dinámicas a la etiqueta del cuerpo. En este capítulo, aprendamos los detalles de esta etiqueta.

Para trabajar con amp-dynamic-css-classes, necesitamos agregar el siguiente script:

<script asynccustom-element="amp-dynamic-css-classes" 
   src = "https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js">
</script>

Hay dos clases importantes de las que se ocupa amp-dynamic-css-classes:

amp-referrer-*
amp-viewer

Analicemos cada uno de ellos en detalle.

amp-referrer- *

Estas clases se establecen en función de cómo vengan los usuarios. Significa que si el usuario proviene de Google, se establecerá la clase de referencia relacionada con Google. Lo mismo se aplica a Twitter y Pinterest.

Las clases están disponibles según el tipo de referente.

Por ejemplo, para Google, se agregarán las siguientes clases si el usuario hace clic en páginas de amplificación desde el motor de búsqueda de Google.

amp-referrer-www-google-com
amp-referrer-google-com
amp-referrer-com

Del mismo modo hay clases disponibles para Twitter, Pinterest, Linkedin, etc.

visor de amplificador

El visor de amplificador básicamente cambiará la URL del amplificador para obtener los detalles de la caché de Google. Si busca algo en la búsqueda de Google, el carrusel que se muestra tendrá todas las páginas de amplificador.

Cuando hace clic en ellos, se les redirige a la URL con la URL de Google como prefijo. La clase amp-viewer se establecerá cuando el usuario vea la página en amp-viewer y utilice clases dinámicas.

Cuando hace clic en la página del amplificador, la URL que aparece en la barra de direcciones es la siguiente:

https://www.google.co.in/amp/s/m.timesofindia.com/sports/cricket/india-in-australia/to-hell-with-the-nets-boys-need-rest-ravi-shastri/amp_articleshow/67022458.cms

Ejemplo

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset =  "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Dynamic Css Classes</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.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>

      <script async custom-element = "amp-bind" 
         src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
      </script>
      <script async custom-element = "amp-dynamic-css-classes" 
         src = "https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js">
      </script>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
      
      <style amp-custom>
         body:not(.amp-referrer-pinterest-com) .if-pinterest,
         body:not(.amp-referrer-ampbyexample-com) .if-ampbyexample,
         body:not(.amp-referrer-google-com) .if-google,
         body:not(.amp-referrer-twitter-com) .if-twitter,
         body:not(.amp-referrer-linkedin-com) .if-linkedin,
         body:not(.amp-referrer-localhost) .if-localhost {
            display: none;
         }
         body:not(.amp-viewer) .if-viewer,
            body.amp-viewer .if-not-viewer {
            display: none;
         }
         p {
            padding: 1rem;
            font-size:25px;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Dynamic Css Classes</h3>
      <div>
      
         <p class = "if-pinterest">You were referred here or embedded by Pinterest!</p>
         <p class = "if-twitter">You were referred here or embedded by Twitter!</p>
         <p class = "if-google">You were referred here or embedded by Google!</p>
         <p class = "if-ampbyexample">You came here directly! Cool :)</p>
         < class = "if-localhost">You came here directly! Cool :)</p>
      </div>
      &ltdiv>
         <p class = "if-not-viewer">Hey! You are not coming from amp viewer</p>
         <p class = "if-viewer">Hey! From amp viewer.</p>
      <div>
   </body>
</html>

Salida

↰ Previous page Next page ↱