首頁 繪圖設計 工作閒聊 比賽活動 美術討論 標籤 圖片
Google AMP 加速行動版網頁設計相關作法 / 程式碼 / 資源 (update 2016)




Type(Type) 2016/9/12 12:49 (Since 2016/9/12 00:30)

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
個人感想: 大手公司山頭亂立、競而不合,使用者各種被操。
Type(Type) 2016/9/12 01:25

AMP 網頁範例

AMP page For example:

//vovo2000.com/amp/http://vovo2000.com/amp/?t=375775http://vovo2000.com/amp/?t=375781http://vovo2000.com/amp/?t=375784


(2,567 views)
[更多討論] 討論區 Windows, Linux, Perl, PHP, C/C++, Driver, Web 理論、應用、硬體、軟體


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

首頁 繪圖設計 工作閒聊 比賽活動 美術討論 標籤 圖片
傳統桌面版
© Vovo2000.com Mobile Version 小哈手機版 2021