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>
參考: https://developers.google.com/analytics/devguides/collection/amp-analytics/
#amp
#google
個人感想:
大手公司山頭亂立、競而不合，使用者各種被操。
AMP-page-驗證器.jpg
________________
美術插畫設計案子報價系統 v0.1 Beta
爪哇禾雀
|
