Hugo靜態站點接入Adsense廣告

Hugo 生成的靜態站點要接入 Google Adsense 廣告,方法如下:

接入全站自動廣告

Adsense 廣告分爲全站廣告(By site)和單元廣告(By ad unit)。

如果想簡單接入,不定製廣告的類型,建議接入全站自動廣告,不操心,完全信任 Google

Adsense by site

  • 先去 Adsense 後臺,把自動展示廣告的代碼複製到

    /xxx/layouts/partials/google/ads.html

xxx 是你網站的根目錄,ads.html 是定義的文件名,裏面粘貼上自動廣告代碼。 放在這個路徑下,好處是:萬一某一天你需要換個 theme,文件還在,完全不受影響。 形如:

1<script
2  async
3  src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxx"
4  crossorigin="anonymous"
5></script>

根據 Google 要求,廣告代碼是要放到 <head></head> 標籤間的。

所以需要放在 themes 的相關地方,比如我使用的這個皮膚(每種皮膚路徑不一定相同,要自己琢磨下),路徑爲:

xxx/themes/hugo-clarity/layouts/partials/head.html

hugo themes header

ads 爲上面 ads.html 的文件名:

1<!-- ads -->
2{{ partial "google/ads" . }}

這樣全站自動廣告就接入完成了,Adsense 會自動處理剩下的事情,包括在哪些頁面的什麼位置展示什麼樣的廣告,還是很方便的。

接入自定義廣告單元

人們總是喜歡自定義,By site 廣告和 By ad unit 並不衝突。不完全信任 Google 也沒錯,比如你寫的某個文章,你認爲在 A 位置插入廣告非常合適,B 位置就不行,此時自定義單元廣告就派上用場啦。這個時候 Google 自動分配廣告的算法不一定行。

  • 按照 Adsense 指引,創建 4 種自定義廣告單元

adsense unit types

  • 每種廣告單元對應創建一個 hugo shortcodes

    類似全站自動廣告,把對應的廣告單元代碼分別放到 shortcodes 文件中。點圖示地方獲取單元廣告代碼

    get unit code

    複製後,粘貼到對應文件中,如下圖所示:

    hugo adsense shortcodes-adsense

  • 在 content 的 md 文件中引入對應的 shotcodes

    例如, 文章開頭添加廣告

    md-call-header.webp

    文章末尾添加廣告

    md-call-footer.webp

    當然文章中間也可以添加,每種廣告單元適合的位置不一樣,名字按照自己喜好取。

    這樣,自定義廣告單元也設置好了,可能別人有更加方便的方式,個人覺得不頻繁變動也夠用。

    只是挨個文章添加廣告有點費力,也許這就是自定義的樂趣,通常我給文章開頭一個 adsense-header, 結尾一個 adsense-footer,中間看情況給一個 adsense-emb。再多用戶不高興,Google 也不答應,要考慮下用戶體驗。

接入自定義信息流廣告

自定義信息流廣告接入有門檻和特殊要求,一定要放到 feed 中才行,值得單獨說下。所謂 feed 流可以簡單想象爲一個 for 循環,比如本站的首頁,有 N 個文章簡介塊組成,信息流廣告模仿你文章塊的樣式,提供更好的用戶體驗,在用戶瀏覽的時候自然出現,與網站的外觀和風渾然一體,非常適合移動設備,好比生物世界的保護色和擬態^_^

下面介紹接入過程

  • 先找到循環所在的模板

我是通過網頁源碼定位,通過搜索 css 類關鍵字找到的,每個 hugo theme 的 feed 流模板位置不一樣。hugo-clarity 的位置。

xxx/themes/hugo-clarity/layouts/partials/archive.html

  • 修改信息流模板文件

hugo feed

1     {{- range $pageindex,$pagevalue := (.Paginate $pages).Pages }}
2      {{if and ($pageindex) (modBool $pageindex 3)}}
3      <!-- ads feed -->
4      {{ partial "google/adsense-feed" . }}
5      {{end}}
6      ...此處省略其它代碼塊
7     {{end}}

代碼解釋,range 後接入數組,$pageindex, $pagevalue 分別爲 index,value,if 判斷 index 爲真 且 對 3 取模運算後爲真。假設每頁 10 個文章,3、6、9 的地方都會插入 feed 流廣告。modBool 這個模板函數 index 爲 0 的時候也爲真,所以要排除下,不然用戶看到的第一個就是廣告,還怎麼僞裝 🥸。當然用戶也可以更改 3 爲其它數字,看自己意願要展示多少廣告,多了影響用戶體驗和網站性能。

至於這個 adsense-feed.html 模板文件放在什麼位置,參考全站廣告接入部分。

綜上所述,全站自動廣告 和 自定義廣告分別用在不同場景下,也可以結合使用,各取所長。

最後修改於: Monday, August 28, 2023

相關文章:

翻譯: