Google AMP - 自定義 Javascript

在前面的章節中，我們學習了許多 amp 元件。我們還了解到，每個元件要工作都需要新增一個 javascript 檔案。

例如，對於 amp-iframe，新增的指令碼如下：

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

我們在 script 標籤中添加了 async。這是 amp 的標準，因為它們非同步載入所有 javascript 檔案。還添加了一個 custom-element 屬性，其中包含它所用元件的名稱。

如果要使用任何 amp 元件，並且它不是核心 amp javascript 檔案的一部分，則必須如上所示新增指令碼。

我們大多習慣於在頁面內編寫大量 javascript 程式碼，以及使用 script 標籤包含 javascript 檔案。

如何在 amp 中做到這一點？因此，AMP 不允許編寫任何指令碼程式碼或從外部載入 script 標籤。

Amp 有自己的元件來處理本應由頁面上新增的額外指令碼完成的任務。這主要是出於效能方面的考慮，以便更快地載入頁面內容，並且不會讓 javascript 延遲渲染或對 DOM 進行任何更改。

這是 AMP 根據其官方網站為 script 標籤提供的規範：

除非型別為 application/ld+json，否則禁止使用。（根據需要可以新增其他非可執行值。）例外情況是載入 AMP 執行時的必需 script 標籤和載入擴充套件元件的 script 標籤。

這裡顯示了一個工作示例，我們可以在其中在 amp 頁面內使用 application/ld+json。請注意，我們正在使用型別為“application/ld+json”的 script 標籤，以便 amp-analytics 元件觸發跟蹤器。

類似地，我們可以在需要時在其他 amp 元件上使用型別為“application/ld+json”的 script 標籤。

示例

<!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": "https://:8080/googleamp/tracking.php?
               user=test&account=localhost&event=${eventId}"
            },
            "triggers": {
               "trackPageview": {
                  "on": "visible",
                  "request": "event",
                  "vars": {
                     "eventId": "pageview"
                  }
               }
            }
         }
         </script>
      </amp-analytics>
   </body>
</html>

當瀏覽器中訪問頁面時，將觸發頁面瀏覽量的跟蹤器。可以在 Google 的網路選項卡中看到，如下所示。

列印頁面