Installing Vpon Analytics on a site with AMP

中文

Example

1. Tracking user actions on sites with AMP uses the additional amp-analytics component. Add it to the code of pages on your site, inside the head element:

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

2. Specify the Analytics Provider :

Insert amp-analytics tag to the body. Add attribute type="vponanalytics" to the amp-analytics tag, and recommended to add "id" attribute. And configure the parameters "licence_key" (by case provided);

Example code 

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

Pageview (default 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} : Return the variable value according to the % of vertical scrolling
  • verticalBoundaries : Send a scroll event to the specified URL when the page scrolls vertically by 5%, 30%, 50%, 70%, and 95%
  • Variable field : "verticalBoundaries"
  • Fixed field : "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 :

  • Variable field : "on","selector","ev_name","payload"
  • Fixed field : "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 :

  • Variable field : "on","selector","action","label"
  • Fixed field : "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>