使用Google AMP行動網頁加入Adsense廣告及Analytics

發表留言 人氣: 579°c


文章索引

Accelerated Mobile Pages(簡稱:AMP)是Google谷歌推出加速行動網站的網頁技術,官方聲稱可以在智能手機或平板電腦的數碼裝置,開啟AMP網頁比傳統的Mobile移動網頁快4倍速度,大大降低頁面加載的時間,提供給訪客一個快速的瀏覽體驗。

其實說白了『Google AMP HTML Pages』 與『Facebook Instant Articles』技術上是非常相似的,只是一個在Google網站,另一個是Facebook所使用的移動網頁技術,但是AMP除了可以加速文章頁面外,還可以加入Google Adsense廣告及Analytics分析統計代碼,使博客也可以收取廣告費用和查看網站的AMP頁面帶來的人流及瀏覽量。

WordPress 如要使用AMP及想在AMP頁面加入Adsense廣告與Analytics統計代碼,需要安裝兩個外掛,方可以完美整合程序,你可以按照以下的方法做。

OK!…Action ^.^

使用 AMP

1. 在控制台(後台)安裝AMP外掛(插件),使用搜尋功能找「AMP」外掛,然後安裝並啟用。 請看圖片▼

2. 前往Google 網站管理工具(Google Search Console)請按此處去,來到AMP「加速行動版網頁」管理行動網頁,這裡可以修正 Accelerated Mobile Pages (AMP) 中的適當問題,才能明確為行動裝置使用者提供 AMP 網頁。

注意: 當安裝AMP外掛後,可能需要等待「1-3」天的時間,才能夠在Google 網站管理工具看到相關數據。 請看圖片▼

AMP 建立Adsense廣告

1. 在控制台(後台)安裝「Facebook Instant Articles & Google AMP Pages by PageFrog」外掛(插件),加入廣告及統計代碼。 請看圖片▼

2. 安裝並開啟外掛成功,在左側欄的「Mobile Formats」–>「setup」位置檢查Google AMP HTML是否已經「Ready」準備好了。 請看圖片▼

3. 新增Adsense廣告代碼,在側欄「Ads」的頁面,拉到下方的「Google AMP HTML」位置,按一下「Sign in with Google」登入Google的Adsense帳號,並彈出「Choose AdSense Ad Unit」頁面加入不同尺寸的廣告。 請看圖片▼

4. 當創建廣告代碼成功後,請記得必須勾選Enable Google AdSense for AMP HTML Pages」廣告顯示在AMP頁面,以及「Ad Placement」可以調整廣告顯示在文章的第N個字節,然後按「Save All Settings」儲存變更。

特別說明Show an ad every — words欄位,建議輸入「0-10」數字,因為經本人測試,外掛是以英文字母作計算,如果中文就不是那麼友好了,所以字節愈少顯示廣告的數量,也可以控制在「3」個以內。 請看圖片▼

AMP 放上Analytics統計

1. 按一下左邊欄的「Mobile Formats」–>「Analytics」統計頁,選擇「GOOGLE ANALYTICS」彈出頁面,並點擊「Sign in with Google」按鈕,登入Google的Analytics帳號。 請看圖片▼

2. 登入Google Analytics帳號成功,在頁面篩選統計的網站,然後按「Choose Site」按鈕,並點擊上方綠色的「Enable Integrabion」按鈕,整合分析統計。 請看圖片▼

檢查AMP頁面

經過以上的步驟後,已經開啟AMP頁面和加入廣告及Analytics統計代碼了,接下來我們檢查一下是否成功。

如何打開AMP頁面,只要在網址(連結)後加上「/amp」尾巴即可。
例如: https://www.moonlol.com/google-amp-adsense-analytics-6003.html/amp

成功打開AMP頁面,文章的Ads廣告已經出現了,並利用瀏覽器的「檢視網頁原始碼」功能,查看網站源碼,可以看到Analytics統計代碼也有了。 請看圖片▼
<amp-analytics type="googleanalytics">
<script type="application/json">
....
</script>
</amp-analytics>

特別介紹
1. 外掛有一個相當體貼的功能,在「Styling」的PageFrog頁面,可以在控制台設置AMP主題,例如:加入Logo、調整文字及背景色等,以及可以即時預覽AMP的變化,只要複製下方的「Mobile Preview Link 」短連結,在瀏覽器打開,能夠即時看到AMP預覽頁。 請看圖片▼

2. 這個外掛還有一個功能,可以管理「Facebook Instant Articles」臉書的即時文章,不過,筆者對FB這個移動技術沒有多大的興趣,你可以自行研究一下。 請看圖片▼

功能更強大的AMP管理外掛(插件)
AMP「AMP for WP – Accelerated Mobile Pages」外掛,如果想在AMP頁面,加入分享按鈕、自定義廣告、AdSense廣告或相關文章等,或者在控制台查看即時流量報表,可以安裝此插件。
附註:這個外掛的功能上雖然很強大,但是,比較占用數據庫資源,增加伺服器負載。你可以按此處了解。

Q&A
可以自行安裝廣告代碼!?
答:可以的,請按此處手動建立AMP廣告,及查看相關說明。

可以自行安裝統計代碼!?
答:可以的,請按此處手動創建AMP頁面,獨有的Analytics分析代碼。

筆者有話兒:

廣告及統計代碼,暫時不建議手動自行加上,因為AMP外掛(插件)日後升級新版本,原文件會被覆蓋,那以前修改的就白費了,所以筆者選擇安裝外掛來解決。

Google已經針對導入AMP技術的網頁,提高其被檢索優先排序,同時也曾預告未來將會朝向針對行動裝置優化內容提供優先排序的作法,那些有選擇困難症或是無法接受牠的頁面樣式及簡易風格的網主,你還在猶疑嘛﹗

相關文章:
1. AMP頁面錯誤修正
2. AMP新增分享按鈕及相關文章
3. AMP上方頭部及下方底部加上代碼
標籤: , | 短網址