利用GeneratePress佈景主題,建立桌機【Google Adsense錨定廣告】提升桌機網頁點擊率
這一篇文章筆者將介紹WP網站如何利用GeneratePress佈景主題的元素來製作一個桌機Google Adsense錨定廣告
藉此提升桌機用戶的Adsense網頁點閱率
開始建立Google Adsense錨定廣告
首先你必須購買付費板的GeneratePress佈景主題(加入會員將提供免費下載付費板主題)
安裝GeneratePress並啟用Elements
安裝主題後>外觀>GeneratePress>啟用Elements
創建Google Adsense廣告單元
打開進入Google Adsense後台>廣告>按廣告單元>建立多媒體廣告>廣告大小選擇固定寬728,高90
建立GeneratePress-Elements
外觀>Elements>add newElements>Hook>複製下面這串
(一)桌機錨定廣告代碼:
<div class=”grid-container custom-ad-container”>
輸入Google Adsense廣告碼
</div>
(二)手機錨定廣告代碼:
<div class=”hide-on-mobile hide-on-tablet”>
<div class=”grid-container custom-ad-container”>
輸入Google Adsense廣告碼
</div>
</div>
然後貼上編輯器中
settings>hook>generate_after_footer
Display Rules>Location>Entire Site(可以選擇你要顯示的位置)>發佈
自訂附加的CSS
外觀>自訂>附加的CSS>輸入以下這串
(一)如果是設定錨定桌面廣告,複製下面這串到 CSS
/* CSS For the sticky ad on Desktop */ .custom-ad-container { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: fit-content; height: fit-content; } .custom-ad-container ins.adsbygoogle { display: block !important; }
(二)如果是設定錨定移動廣告,複製下面這串到 CSS
/* CSS For the sticky ad on Mobile */ .mobile-ad-container { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: fit-content; height: fit-content; } .mobile-ad-container ins.adsbygoogle { display: block !important; }
最後效果如下圖
原本Google Adsense本身提供的錨定廣告,在桌機畫面就會跑到上面去
這樣等於有機會同一個畫面會有上下兩個錨定廣告
下載付費升級版GeneratePress主題方式:請加入玄合網站免費會員