Google AMP - Classes CSS dynamiques

L'amp-dynamic-css-classes ajoute des classes dynamiques à la balise body. Dans ce chapitre, apprenons les détails de cette balise.

Pour travailler avec amp-dynamic-css-classes, nous devons ajouter le script suivant -

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

Il existe deux classes importantes prises en charge par amp-dynamic-css-classes -

  • amp-referrer-*
  • amp-viewer

Laissez-nous discuter de chacun d'eux en détail.

amp-referrer- *

Ces classes sont définies en fonction de l'arrivée des utilisateurs. Cela signifie que si l'utilisateur vient de Google, la classe de référence liée à Google sera définie. Il en va de même pour Twitter et Pinterest.

Les classes sont disponibles en fonction du type de référent.

Par exemple, pour Google, les classes suivantes seront ajoutées si l'utilisateur clique sur les pages amp du moteur de recherche Google.

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

De même, il existe des classes disponibles pour Twitter, Pinterest, Linkedin, etc.

amp-viewer

Le visualiseur d'ampli va essentiellement changer l'URL de l'ampli pour obtenir les détails du cache Google. Si vous recherchez quelque chose dans la recherche Google, le carrousel qui s'affiche aura toutes les pages amp.

Lorsque vous cliquez dessus, ils sont redirigés vers l'url avec l'url Google comme préfixe. La classe amp-viewer sera définie lorsque la page est visualisée par l'utilisateur dans amp-viewer et en utilisant des classes dynamiques.

Lorsque vous cliquez sur la page amp, l'URL que vous obtenez dans la barre d'adresse est la suivante -

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

Exemple

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

Production