Google AMP - 分析

Amp Analytics 是一个用于跟踪页面数据的 amp 组件。页面上的所有用户交互都可以记录并保存，以分析数据以实现进一步改进或实现业务目的。

要使用 amp-analytics 组件，我们需要在 head 部分添加以下脚本 -

<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 示例

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

当在浏览器中点击该页面时，将触发跟踪器以进行综合浏览。可以在谷歌网络选项卡中看到，如下所示。

放大器页面浏览量

当特定元素在页面上可见时，您还可以触发 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 = "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>
      <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 组件需要将 json 对象传递给脚本标记。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。如果您使用第三方供应商，供应商将有其格式，用户将需要以这种方式传递数据。

让我们详细了解每个对象 -

要求

requests 对象有一个 url，用于在满足条件时触发。这里显示了请求对象的示例 -

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

请求名称将在触发器对象中指定，并且必须使用相同的名称。

瓦尔斯

请求对象中使用的所有变量都在 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 - 这是请求的名称。这必须与请求对象中的请求名称匹配。

vars - 这是带有键值变量的对象，定义为在触发器对象内部使用或用于覆盖定义的 vars 键值。

选择器- 这显示了设置触发器的元素的详细信息。

scrollSpec - 这将包含滚动触发器的详细信息。

timerSpec - 这将包含给定时间的详细信息。

videoSpec - 这将包含视频调用的详细信息。

这是我们添加了 amp-video 的示例。当视频元素在页面上可用、页面上至少有 20% 可见、视频必须播放至少 2 秒、并且连续观看 200 毫秒时，Amp-analytics 将触发跟踪器。当满足所有这些条件时，只有跟踪器会被解雇。详细信息如下所示 -

放大器分析前

要添加有关元素可见性的条件和其他条件，例如元素必须至少可见 20%、视频应播放 2s ，所有这些条件都必须在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。

报告时间

此属性用于可见性触发器在触发之前等待特定情况。支持的值是 documentExit。您不能在visibilitySpec中同时使用reportWhen和repeat属性

ContinuousTimeMin 和 ContinuousTimeMax

此属性指示要触发的可见性跟踪器需要元素必须在ContinuousTimeMin和ContinuousTimeMax之间连续位于视口中。如果未指定 continousTimeMin，则默认设置为 0。该值以毫秒为单位指定。

总时间最小值和总时间最小值

此属性指示要触发的可见性跟踪器需要元素在视口中的总时间在TotalTimeMin和TotalTimeMin之间。如果未指定totalTimeMin，则默认为0。该值以毫秒为单位指定。

可见百分比最小和可见百分比最大

此属性指示要触发其的可见性跟踪器需要元素在分配给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 = "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>
      <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>

输出

放大器可见性

单击链接时，该事件将被触发，如下所示 -

放大器可见性链接