# AMP - amp analytics & conversion Use google analytics must use amp-analytics component
It can use PHP print template function to view
First include
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script> ## ga click event Refer - Adding Analytics to your AMP pages
function amp_ga_event_click_template($ga_id, $selector, $cate, $action, $label, $non_interaction = "0") { $template = <<<EOF <amp-analytics type="googleanalytics"> <script type="application/json"> { "vars": { "account": "%s" }, "triggers": { "trackClickOnHeader" : { "on": "click", "selector": "%s", "request": "event", "vars": { "eventCategory": "%s", "eventAction": "%s", "eventLabel": "%s" }, "extraUrlParams": { "ni": "%s" } } } } </script> </amp-analytics> EOF; return printf($template, $ga_id, $selector, $cate, $action, $label, $non_interaction); } ## google adwords conversion Refer - Using AMP for your AdWords Landing Pages
...
Category: Amp
# Intro Provide some key point & something we need notice
## 1. meta In normal page
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html"> In AMP page
<link rel="canonical" href="https://www.example.com/url/to/full/document.html"> ## 2. Default style(Handle render) <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> Format
<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> ## 3.
...
# AMP - develop log ## Intro 這是針對對 AMP 有基本概念的筆記, 基本概念請去 amp project 看就好
知道 AMP 是啥的再來看這文章會較有用
– 我是分隔線 —
會被 cache 在 Google domain 下
更新分主動 / 被動
主動(跟 Google 說該頁面有更新)
被動(當有任何人開啟該 AMP 頁面, Google 會在背後重新跟該頁面 AMP url 重新拉來 cache,但 15s 內不重新拉)
## 限制 廣告問題(需第三方有支援的廣告商, amp-ad 中有支援的)
AJAX cross domain 問題(需 server side allow)
Cookie 讀不到
user login 問題(需使用 AMP 的元件)
App Indexing on Google Search & AMP 衝突(Google 正在解這問題)
...