Google AMP-分析

アンプ分析は、ページ上のデータを追跡するために使用されるアンプコンポーネントです。ページ上のすべてのユーザーインタラクションを記録および保存して、データを分析し、さらなる改善やビジネス目的に使用できます。

amp-analyticsコンポーネントを使用するには、ヘッドセクション内に次のスクリプトを追加する必要があります-

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

amp-analyticsで使用されるイベントを記録するには、サードパーティベンダーを使用するか、社内追跡システムを使用することができます。

GoogleAnalyticsベンダーを使用したamp-analyticsの例-

<amp-analytics type = googleanalytics>
   <script type = application/json>{
      "requests": {
         "pageview": "${eventId}"
      },
      "vars": {
         "account": "UA-44450152-1"
      },
      "triggers": {
         "trackPageview" : {
            "on": "visible",
            "request": "pageview",
            "vars": {
               "eventId": "pageview"
            }
         }
      }
   }
   </script>
</amp-analytics>

comscoreベンダーを使用したamp-analyticsの例

<amp-analytics type = comscore>
   <script type = application/json>
      {"vars": {"c2":"7922264"}}
   </script>
</amp-analytics>

chartbeatベンダーを使用したアンプ分析の例

<amp-analytics type = chartbeat>
   <script type = application/json>{
      "vars": {
         "uid": "230",
         "domain": "dummyurl.com",
         "sections": "us",
         "authors": "Hello World"
      }
   }</script>
</amp-analytics>

ベンダーの詳細なリストはhttps://www.ampproject.org/docs/analytics/analytics-vendors [こちら]で入手できます。

社内分析ベンダーの使用方法に関する実例を以下に示します-

例

<!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ネットワークのタブに表示されます。

Amp Pageview

特定の要素がページに表示されているときにamp-analyticsイベントを発生させることもできます。同じための実用的な例はここに示されています-

例

<!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>
      <script async custom-element = "amp-video"
         src = "https://cdn.ampproject.org/v0/amp-video-0.1.js">
      </script>
   </head>
   <body>
      <h1>Google Amp - Analytics</h1>
      <amp-video controls
         id = "videoplayer"
         width = "640"
         height = "360"
         layout = "responsive"
         poster = "images/videoposter.png"
         autoplay>
            <source src = "video/bunny.webm" type = "video/webm"/>
            <source src = "video/samplevideo.mp4" type = "video/mp4"/>
               <div fallback>
                  <p>This browser does not support the video element.</p>
               </div>
      </amp-video>
      <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",
                  "visibilitySpec": {
                     "selector": "#videoplayer",
                     "visiblePercentageMin": 20,
                     "totalTimeMin": 2000,
                     "continuousTimeMin": 200
                  },
                  "vars": {
                     "eventId": "video"
                  }
               }
            }
         }
         </script>
      </amp-analytics>
   </body>
</html>

出力

Amp Analytics

Amp-analyticsコンポーネントでは、jsonオブジェクトをscriptタグに渡す必要があります。 JSONの形式は次のとおりです-

{
   "requests": {
      request-name: request-value,
      ...
   },
   "vars": {
      var-name: var-value,
      ...
   },
   "extraUrlParams": {
      extraurlparam-name: extraurlparam-value,
      ...
   },
   "triggers": {
      trigger-name: trigger-object,
      ...
   },
   "transport": {
      "beacon": *boolean*,
      "xhrpost": *boolean*,
      "image": *boolean*,
   }
}

上記で指定されたすべてのオブジェクトは、必ずしもamp-analyticsに渡される必要はありません。サードパーティベンダーを使用している場合、ベンダーはそのフォーマットを使用しているため、ユーザーはその方法でデータを渡す必要があります。

各オブジェクトを詳細に理解しましょう-

リクエスト

要求オブジェクトには、条件が満たされたときに起動するために使用されるURLがあります。要求オブジェクトの例はここに示されています-

"requests": {
   "request-name": "http://localhost:8080/googleamp/tracking.php?
   user=test&account=localhost&event=${eventId}"
},

request-nameはトリガーオブジェクトで指定され、同じ名前を使用する必要があります。

Vars

要求オブジェクトで使用されるすべての変数は、varsオブジェクトで指定されます。

"requests": {
   "event": "http://localhost:8080/googleamp/tracking.php?
   user=test&account=localhost&event=${eventId}"
},
"vars": {
   "eventId": "video"
}

追加のURLパラメータ

クエリ文字列としてリクエストURLに追加される追加パラメータは、このオブジェクトで定義できます。次の例をご覧ください

"requests": {
   "event": "http://localhost:8080/googleamp/tracking.php?
   user=test&account=localhost&event=${eventId}&x=1&y=2&z=3"
},
"vars": {
   "eventId": "video"
},
"extraUrlParams": {
   "x": "1",
   "y": "2",
   "z": "3"
}

トリガー

このオブジェクトは、リクエストURLをいつ実行する必要があるかを通知します。トリガーオブジェクト内で利用可能なキーと値のペアは以下のとおりです-

*on* -リスニングするイベントに言及する必要があります。 *_on_* に使用できる値は、_render-start、ini-load、click、scroll、timer、visible、hidden、user-error、access- *、およびvideo-* _です。

*request* -これはリクエストの名前です。 これは、_requests_オブジェクトのrequest-nameと一致する必要があります。

*vars* -これは、トリガーオブジェクト内で使用されるように定義された、または定義されたvarsキー値をオーバーライドするために使用されるキー値変数を持つオブジェクトです。

*selector* -これは、トリガーが設定されている要素の詳細を表示します。

*scrollSpec* -これにはスクロールトリガーの詳細が含まれます。

*timerSpec* -これには、指定する時間の詳細が含まれます。

*videoSpec* -これには、ビデオに対して呼び出される詳細が含まれます。

amp-videoを追加した例を次に示します。 Amp-analyticsは、ページ上でビデオ要素が使用可能で、ページ上で少なくとも20％表示され、ビデオが少なくとも2秒間再生され、200ミリ秒間連続して表示されると、トラッカーを起動します。これらの条件がすべて満たされると、トラッカーだけが解雇されます。詳細を以下に示します-

Amp Analytics Ex

要素の可視性に関する条件や、要素などのその他の条件を少なくとも20％表示できるようにするには、ビデオを2秒間再生する必要があります。これらの条件はすべて、以下に示すように visibilitySpec 内で指定する必要があります-

<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",
               "visibilitySpec": {
                  "selector": "#videoplayer",
                  "visiblePercentageMin": 20,
                  "totalTimeMin": 2000,
                  "continuousTimeMin": 200
               },
               "vars": {
                  "eventId": "video"
               }
         }
      }
   }
   </script>
</amp-analytics>

*videoSpec* を使用すると、トラッカーの起動をトリガーする条件に基づいて条件を定義できます。 条件はここにリストされています-

を待つ

このプロパティは、特定のケースを待機してから発火する可視性トリガーに使用されます。 waitForで利用可能なオプションは、 none、ini-load 、および render-start です。デフォルトでは、waitForの値はini-loadです。

*reportWhen*

このプロパティは、特定のケースを待機してから発火する可視性トリガーに使用されます。サポートされている値はdocumentExitです。 visibilitySpec 内で reportWhen および repeat プロパティを一緒に使用することはできません。

*continuousTimeMinおよびContinuousTimeMax*

このプロパティは、 continuousTimeMin と continuousTimeMax の間で連続してビューポートに存在する必要のある要素を必要とする可視性トラッカーを示します。 continousTimeMinが指定されていない場合、デフォルトで0に設定されます。値はミリ秒単位で指定されます。

*totalTimeMinおよびtotalTimeMin*

このプロパティは、 totalTimeMin と totalTimeMin の間の合計時間の間、要素がビューポートに存在する必要があることを起動する可視性トラッカーを示します。 totalTimeMinが指定されていない場合、デフォルトの0になります。値はミリ秒単位で指定されます。

*visiblePercentageMinおよびvisiblePercentageMax*

このプロパティは、それを起動する可視性トラッカーが、visiblePercetageMinとvisiblePercentageMaxに割り当てられた割合の間のビューポート内で要素を表示する必要があることを示します。 visiblePercentageMin のデフォルト値は0および visibilePercentageMax の100です。どちらも値が0で、要素が表示されていないときに可視性トリガーが起動し、要素が完全に表示されたときに両方が100である場合に起動します。

繰り返す

trueに設定すると、visibilitySpec条件が満たされるたびにトリガーが起動します。デフォルトでは、repeatの値はfalseです。 reportWhenプロパティと一緒に使用することはできません。

クリックトリガーの例はここに示されています-

<!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>
      <script async custom-element = "amp-video"
         src = "https://cdn.ampproject.org/v0/amp-video-0.1.js">
      </script>
      <style amp-custom>
         a {
            color: blue;
         }
      </style>
   </head>
   <body>
      <h1>Google Amp - Analytics</h1>
      <a>Click Here</a>
      <amp-analytics>
         <script type = "application/json">
            {
               "requests": {
                  "event": "http://localhost:8080/googleamp/tracking.php?
                  user=test&account=localhost&event=${eventId}"
               },
               "triggers": {
                  "trackAnchorClicks": {
                  "on": "click",
                  "selector": "a",
                  "request": "event",
                     "vars": {
                        "eventId": "clickonlink"
                     }
                  }
               }
            }
         </script>
      </amp-analytics>
   </body>
</html>

出力

Amp Visibility

リンクをクリックすると、イベントは以下のように発生します-

Amp Visibility Link

Google-amp-analytics

目次