Google AMP 加速行動版網頁設計相關作法 / 程式碼 / 資源 (update 2016)

0. 如何開始寫 AMP Page

AMP html 最前面的 document type 寫成這樣
代碼:


<!doctype html>
<html amp>

AMP html-head tag 部分加入此 script
代碼:


<script async src="https://cdn.ampproject.org/v0.js"></script>
<link rel="canonical" href="/" />

(0.1) 目前可用 Google Chrome v52 以後，和下 Ctrl + Shift + I，就可看到「是否有錯誤！」
(0.2) 或者用此 AMP 驗證工具 https://validator.ampproject.org/

1. AMP 頁面如何加入 Google AdSense

AMP html-head tag 部分加入此 script
代碼:


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

AMP html-body 部分加入此 AMP-AD,
(1.1) ad-client "CA-PUB" 部分請換成自的 Publisher ID#
(1.2) ad-slot 就是一般廣告的 Adsense ID#
代碼:


<amp-ad width="300" height="250"
   type="adsense"
   data-ad-client="ca-pub-XXXXXXXXX"
   data-ad-slot="YYYYYYYY">
   <div placeholder></div>
   <div fallback></div>
</amp-ad>

參考: https://github.com/ampproject/amphtml/blob/master/examples/adsense.amp.html

2. AMP 頁面如何加入 Google Analytics

AMP html-head tag 部分加入此 script
代碼:


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

AMP html-body tag 部分加入此段，UA-XXXXX-Y 就是你的 Analytics Tracking ID#
代碼:


<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>