Google AMP-カスタムJavascript

前の章では、多くのアンプコンポーネントを研究しました。また、各コンポーネントが機能するにはjavascriptファイルを追加する必要があることも確認しました。

たとえば、amp-iframeの場合、追加されるスクリプトは次のとおりです-

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

スクリプトタグに async を追加しました。これは、すべてのjavascriptファイルを非同期にロードするampの標準です。使用されるコンポーネントの名前を持つ custom-element 属性が追加されています。

コアamp javascriptファイルの一部でない場合にampコンポーネントを使用するには、上記のようにスクリプトを追加する必要があります。

私たちは、ページ内に多くのJavaScriptコードを記述し、スクリプトタグを使用したjavascriptファイルも含めることに主に慣れています。

ampでどのようにできますか？そのため、AMPでは、スクリプトコードを記述したり、スクリプトタグを外部から読み込んだりすることはできません。

Ampには、ページに追加される追加のスクリプトによって実行されると想定されるジョブを処理するための独自のコンポーネントがあります。これは基本的にパフォーマンス上の理由で行われます。ページコンテンツをより速くロードし、JavaScriptによるレンダリングの遅延やDOMの変更を行わないようにします。

これは、スクリプトタグのhttps://www.ampproject.org/docs/fundamentals/spec [公式サイト]に従ってAMPによって指定された仕様です-

タイプがapplication/ld + jsonでない限り、禁止されています。（必要に応じて、その他の非実行可能値を追加できます。）例外は、AMPランタイムをロードする必須のスクリプトタグと、拡張コンポーネントをロードするスクリプトタグです。

ampページ内で application/ld + json を使用できる実用的な例を次に示します。 amp-analyticsコンポーネントにtype =” application/ld + json”を指定したscriptタグを使用してトラッカーを起動していることに注意してください。

同様に、必要に応じて他のampコンポーネントでtype =” 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 = "ampanalyticsl">
      <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>

ブラウザでページがヒットすると、トラッカーはページビューのために起動されます。以下に示すように、Googleネットワークのタブで確認できます。

Googleネットワークタブ

Google-amp-custom-javascript

Google AMP-カスタムJavascript

例