Google AMP - Javascript personnalisé

Dans les chapitres précédents, nous avons étudié de nombreux composants d'ampli. Nous avons également vu que pour que chaque composant fonctionne, nous devons ajouter un fichier javascript.

Par exemple, pour amp-iframe, le script ajouté est le suivant -

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

Nous avons asyncajouté à la balise de script. C'est la norme pour amp car ils chargent tous les fichiers javascript de manière asynchrone. Il y a uncustom-element attribut ajouté qui porte le nom du composant pour lequel il est utilisé.

Pour utiliser un composant amp s'il ne fait pas partie du fichier javascript d'ampli principal, le script doit être ajouté comme indiqué ci-dessus.

Nous sommes principalement habitués à écrire, beaucoup de code javascript à l'intérieur des pages et incluons également un fichier javascript en utilisant une balise de script.

Comment faire ça en ampli? Donc, pour cela, AMP ne permet pas d'écrire de code de script ou de charger une balise de script en externe.

Amp a son propre composant pour s'occuper du travail qui est supposé être fait par le script supplémentaire qui est ajouté sur la page. Ceci est essentiellement fait pour des raisons de performances, pour charger le contenu de la page plus rapidement et pour éviter que javascript ne retarde le rendu ou ne modifie le DOM.

Il s'agit de la spécification donnée par AMP selon leur site officiel pour les balises de script -

Interdit sauf si le type est application / ld + json. (D'autres valeurs non exécutables peuvent être ajoutées si nécessaire.) L'exception est la balise de script obligatoire pour charger le moteur d'exécution AMP et les balises de script pour charger les composants étendus.

Un exemple de travail où nous pouvons utiliser application/ld+jsonà l'intérieur de nos pages d'amplis est montré ici. Notez que nous utilisons la balise script avec type = "application / ld + json" pour que le composant amp-analytics déclenche le suivi.

De la même manière, nous pouvons utiliser la balise de script avec type = "application / ld + json" sur d'autres composants d'ampli si nécessaire.

Exemple

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

Lorsque la page est consultée dans le navigateur, le tracker est déclenché pour la page vue. Il peut être vu dans l'onglet Réseau Google comme indiqué ci-dessous.