在 AMP 頁面中添加 Vpon Analytics

English

Example

1. 首先在 AMP 頁面中使用amp-analytics 組件，需將其所需要的腳本添加到 AMP 頁面的 head 標籤下：

Example code 
<head>
...
<!-- AMP 頁面必需 ↓ -->
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- AMP 頁面必需 ↑ -->
<!-- AMP analytics必需 ↓ -->
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<!-- AMP analytics必需 ↑ -->
...
</head>

2. 指定Analytics Provider :

將amp-analytics 標籤插入到頁面 body 中。amp-analytics 標籤上添加屬性 type="vponanalytics"，另建議同時添加id。 並配置參數"licence_key"(by case提供);

Example code 

<body>
...
<amp-analytics type="vponanalytics" id="vponanalytics">
 <script type="application/json">
 {
  "vars": {
   "licence_key": "XXXXXXXXXXXX",
   "category": "web"
  },
  ...
 }
 </script>
</amp-analytics>
...
</body>

Pageview (已放置於預設trigger):

Example code 

<body>
...
<amp-analytics type="vponanalytics" id="vponanalytics">
 <script type="application/json">
 {
  "vars": {
   ...
  },
  "triggers": {
   "trackPageview": {
      "on": "visible",
      "request": "event",
      "vars": {
         "ev_name": "page_view",
         "payload": "{\"title\":\"${title}\",\"current\":\"${canonicalUrl}\",\"previous\":\"${documentReferrer}\"}"
      }
   }
 }
}
 </script>
</amp-analytics>
...
</body>

Page scrolling :

  • ${verticalScrollBoundary} : 依照垂直滾動的％回傳變量數值
  • verticalBoundaries : 在網頁垂直滾動 5%、30%、50%、70%、和 95%時將 scroll 事件發送到指定網址
  • 可更動欄位值 : "verticalBoundaries"
  • 固定欄位值 : "on","selector","request"
Example code 

<body>
...
<amp-analytics type="vponanalytics" id="vponanalytics">
 <script type="application/json">
 {
  "vars": {
   ...
  },
  "triggers": {
    "scroll": {
      "on": "scroll",
      "selector": "body",
      "request": "scroll",
      "vars": {
        "action": "scroll_${verticalScrollBoundary}"
      },
      "scrollSpec": {
        "verticalBoundaries": [5,30,50,70,95]
      }
    }
 }
}
 </script>
</amp-analytics>
...
</body>

Custom_event :

  • 可更動欄位值 : "on","selector","ev_name","payload"
  • 固定欄位值 : "request"
Example code 

<body>
...
<amp-analytics type="vponanalytics" id="vponanalytics">
 <script type="application/json">
 {
  "vars": {
   ...
  },
  "triggers": {
    "custom_event": {
      "on": "click",
      "selector": ".vp_search",
      "request": "event",
      "vars": {
        "ev_name": "element_interact",
        "payload": "{\"name\":\"${category}\",\"action\":\"search\",\"value\":\"{\"keyword\": \"搜尋關鍵字\",\"first_id\": \"會員id\"}\"}"
      }
    }
 }
}
 </script>
</amp-analytics>
...
</body>

Element_Interact :

  • 可更動欄位值 : "on","selector","action","label"
  • 固定欄位值 : "request"
Example code 

<body>
...
<amp-analytics type="vponanalytics" id="vponanalytics">
 <script type="application/json">
 {
  "vars": {
   ...
  },
  "triggers": {
    "element_Interact": {
      "on": "click",
      "selector": ".vp_track_0",
      "request": "elementInteract",
      "vars": {
        "action": "click",
        "label": "ev_0_search-flight"
      }
    }
 }
}
 </script>
</amp-analytics>
...
</body>