如何在網頁嵌入廣告?使用 Ad Inserter 外掛,只要 3 分鐘立馬搞定!

如何在網頁嵌入廣告?使用 Ad Inserter 外掛,只要 3 分鐘立馬成功!

如果你有在使用 Google AdSense,你可能打算在網站上的指定位置,嵌入不同的廣告版位,藉此有效增加廣告收入。

Google AdSense 雖然有提供「 自動廣告 」功能,但卻無法讓你控制廣告出現位置,就容易導致不好的使用者體驗。更多 網站頁面設計分享

所以,在這篇教學文中,我將會分享使用 Ad Inserter 外掛,讓你客製化廣告出現位置!

來看一下今天將會學到什麼:

準備好的話,我們就開始囉!


1. Ad Inserter 是什麼?

Ad Inserter 外掛(嵌入 Googl AdSense 廣告的強大工具)
Ad Inserter 外掛(嵌入 Googl AdSense 廣告的強大工具)

Ad Inserter 是一款廣告嵌入工具,可以讓你有效率的在網站各地方嵌入廣告,實現網路賺錢的夢想。更多 完整 Ad Inserter 廣告嵌入教學

Ad Inserter 支援將近 100 個廣告程式碼嵌入欄位,可在不同欄位填入指定的廣告碼,並讓廣告在像是各篇文章、首頁、各種分類、靜態頁面、網站頁首/頁尾、留言區等不同地方 ..,順利呈現在訪客前面。

這款外掛除了擁有廣告碼嵌入欄位,也有支援 <head>、<body> 的程式嵌入欄位。如果你有其他追蹤碼嵌入的需求,像是 Google Search Console 追蹤碼Google Analytics 追蹤碼 等 ..,也可以透過這款外掛一併嵌入成功。

簡單來說,Ad Inserter 是一款強大的廣告碼嵌入工具,讓你自由的把廣告嵌入到各個網頁!


2. 如何嵌入 Google AdSense 廣告?

小提醒:如果還沒註冊 Google AdSense,或是尚未審核通過資格,會需要先等審核通過,這樣稍後示範嵌入到網站的廣告,才會正常顯示唷:)

那這章節會實際跑一次 Google AdSense 廣告嵌入的流程,帶著大家完成第一個網頁廣告嵌入。

Step1:安裝 Ad Inserter 廣告外掛

首先,可以先安裝 Ad Inserter 外掛,方便後續教學。

安裝 Ad Inserter 外掛
安裝 Ad Inserter 外掛

Step2:選擇 Google AdSense 廣告類型

前往 Google AdSense 平台 > 廣告 > 按廣告單元,這邊用「 多媒體廣告 」當作範例。

選擇 Google AdSense 廣告類型
選擇 Google AdSense 廣告類型

可以自行命名此廣告名稱,方便自己後續做查詢。然後選擇廣告版型、選擇回應式廣告(可依照不同裝置自動調整寬度),確認後點「 建立 」。更多 響應式網站觀念

設定廣告呈現樣式
設定廣告呈現樣式

接著 Google AdSense 會自動生成這個廣告的專屬程式碼,可以把它複製起來,我們稍後會用到。

複製 Google AdSense 廣告程式碼
複製 Google AdSense 廣告程式碼

Step3:透過 Ad Inserter 貼入程式碼

接著,我們回到 WordPress 後台,前往「 設定 > Ad Inserter 」,找到 Ad Inserter 的設定位置。

然後把剛複製的廣告程式碼,參考下圖做貼上&設定相關內容。

Ad Inserter 介面簡介
Ad Inserter 介面簡介
  • 多組廣告碼設定:同時可設定 16 組廣告代碼,點擊即可切換位置。上圖最右上角按鈕點擊後,可設定更多組廣告代碼,
    最多可同時嵌入 96 組(已經非常夠用)。
  • 廣告程式碼嵌入位置:從 Google AdSense 產生的廣告程式碼,主要就是貼在這個欄位裡面。
  • 儲存設定:相關設定都處理完畢後,記得點擊這個按鈕做儲存。
  • 廣告顯示頁面:設定廣告的顯示頁面,像是 Posts(文章)、Homepage(首頁)、Category pages(分類頁面)、Static pages(靜態頁面)、Search pages(搜尋頁面)、Tag/ Archive pages(標籤頁面)..。如果想要在這些頁面顯示,就把它打勾就可以了。
  • 顯示位置(Insertion):這算是比較細節的調整,如果以「文章」類型做舉例,可以放置的位置有像是文章標題前後、文章開頭前後、文章段落前後、圖片前後等 ..,都可以做廣告擺放。
  • 對齊位置(Alignment):廣告可置左、中、右等 ..,有點類似文字對齊的感覺~

等待廣告相關設定完畢後,記得要做儲存。

Step4:等待嵌入的廣告生效&額外提醒

最後就是等待廣告生效啦,如果你是第一次設定廣告,可能不一定會這麼快出現在網頁上。

基本上,如果你的設定都是正確的,那最多大約半小時內,網站應該可以順利看到廣告。

整體的 Google AdSense 廣告嵌入方式,就如這章節的教學流程。如果後續還有第二、三組 .. 以上的廣告需要嵌入到網頁,也是同樣的流程,就可以順利完成了:)


3. 廣告顯示位置查詢

知道了如何透過 Ad Inserter 嵌入廣告後,有些人可能會困惑廣告實際出現的位置,到底該如何選擇?

Ad Inserter 雖然有提供英文字&圖示當輔助,但有些人可能還是無法很確切理解,如下圖。

Ad Inserter 廣告嵌入位置選擇
Ad Inserter 廣告嵌入位置選擇

這章節會跟分享快速查看廣告位置的方法,那就開始囉!

首先前往網站官網,如果你已經有安裝 Ad Inserter 外掛,並且處於會員登入狀態,應該會順利看到如下圖的黑色狀態列。

點選 Ad Inserter > Show Positions > p ,網站頁面就會顯示各位置的英文字。

Ad Inserter 顯示廣告嵌入位置
Ad Inserter 顯示廣告嵌入位置

如此一來,有了這個廣告位置標示工具,之後透過 Ad Inserter 嵌入廣告時,就可以知道顯示位置的英文要選哪個了:)


4. 如何嵌入追蹤碼到 <head> 或 <body>?

開頭小提醒:這章節是屬於 Ad Inserter 額外功能分享,如果無此需求可以直接跳過。

由於目前網路行銷工具越來越多元,除了本文介紹的 Google AdSense 廣告認證碼,需要嵌入到網站中(讓 Google 做審核)。

為了更全方位的掌握訪客資料,像是 Google Analytics 追蹤碼Google Search Console 認證碼、Google Tag Manager 追蹤碼、FB Pixels 像素等 ..

對於有些公司來說,可能同樣有嵌入到網站的需求,如此一來才有辦法追蹤到全部的訪客數據。

由於嵌入程式碼到網站的方法很多,像是用 Header Footer Code Manager 外掛、直接寫在 WordPress 主題上,或是某些外掛就有內建的程式嵌入欄位,都可以完成代碼嵌入的需求。

而 Ad Inserter 這款外掛,本身也有類似的功能,你也可以透過它嵌入追蹤碼,下面跟大家示範位置(如下圖)。

透過 Ad Inserter 嵌入程式碼
透過 Ad Inserter 嵌入程式碼

小提醒:

  1. 如果追蹤碼要嵌入 <head> 就選 Header,如果是要嵌入到 <body> 就選 Footer。
  2. 上圖步驟 4 的綠燈記得打開。
  3. 完成後記得儲存。

好囉!以上就是透過 Ad Inserter 嵌入追蹤碼到 <head> 或 <body> 的方法,你也學會了嗎:)


常見問題

我已經透過 Ad Inserter 嵌入了 AdSense 廣告代碼,但發現廣告被放置在隨機的位置?

這可能是由於你在 Google AdSense 平台,開啟了「 自動廣告 」功能,才會導致廣告出現在隨機位置。

如果你希望由自己 100% 控制廣告出現位置,那可以把「 自動廣告 」功能關閉,然後都用「 手動廣告 」方式嵌入廣告即可。

Ad Inserter 是一個安全的外掛嗎?會有問題嗎?

Ad Inserter 是目前 WordPress 廣告嵌入的相關外掛中,最熱門的外掛之一。

不論在安裝次數或是用戶評價都非常優良,故可以放心使用:)

為什麼廣告嵌入之後,但沒有出現在網站上?

可以到 Google AdSense 平台確認是否在申請、設定上出了錯誤,或是廣告資格還沒有通過,所以廣告無法正常顯示。

如果在 Google AdSense 平台設定都沒有問題,就可以往 Ad Inserter 外掛做檢查,看是否自己在設定上有漏掉。

以上方法,希望有幫助到大家:)


WordPress 學習資源

學習網站架設+網路行銷的過程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!

接下來,額外分享 3 項實用資源,可有效幫助大家做學習。

資源一:WP 高手架站課(線上課程)

這門 WordPress 高手架站課 濃縮了犬哥多年在網頁設計的實戰經驗,從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站,3 大類型網站建置方法等 .. 豐富內容,一次教會你。

課程內容非常的紮實(長度超過 20 小時)。如果你剛學習自架網站,這門課程可以讓你用最快的速度,就學會這項技能!

點擊下面了解課程,立馬擁有自己的品牌網站,並增加網路曝光度!

WordPress 高手架站課|一堂課讓你變架站高手!
WordPress 高手架站課|一堂課讓你變架站高手!

資源二:SEO 排名飆升課(線上課程)

網站建立完畢後,但卻沒有流量怎麼辦?或是只能靠花錢投廣告才會有訂單?

這門 SEO 排名飆升課,教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等 ..,大幅提升行銷能力。

點擊下面了解課程,帶你衝上 Google 排名第一頁,大量提升網站營收和訂單!

SEO 排名飆升課|帶你衝上 Google 第一頁!
SEO 排名飆升課|帶你衝上 Google 第一頁!

資源三:犬哥數位(專業 WordPress 網頁設計公司)

如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位(WordPress 網頁設計公司),請專家製作會更有效率!

WordPress 網頁設計公司|犬哥數位

資源四:更多犬哥教學資源

如果你在操作過程中遇到問題,可以加入 犬哥研討社(目前有超過 9000+ 團員)。除了有網友一同幫你解惑外,犬哥團隊也會同步在社團幫助大家。

如果你想學更多網頁設計、數位行銷知識,可關注 YouTube 頻道,或是歡迎追蹤 犬哥網站 IG

犬哥網站社團
犬哥網站社團

關於作者

犬哥網站:網頁設計 x 網路行銷教學平台

犬哥網站

我們分享 WordPress 架站 x 網路行銷知識,不需會任何程式技術,就能自己建立各種網站。 搭配豐富的網路行銷教學,幫助你被更多人看到。 趕快跟著我們的腳步,開始學習吧:)

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

返回頂端