聯盟行銷廣告無法顯示?2個步驟教你如何自製網站廣告素材,AdBlock 也擋不住你!

最後更新時間: 2023 年 01 月 13 日

身為一個部落格經營者,很多時候都想在自己的網站放一些宣傳的素材,包括聯盟行銷的素材、其他廣告的素材等,但有時候卻發現網站廣告無法顯示!

也有很多時候素材裡面的圖片很醜、或是點進去的連結你想要換別的連結,甚至有些廠商給的素材根本不能用、不能正常顯示(被擋廣告了)

本篇文章就要教你如何透過語法自製廣告素材,不僅可以自己選擇你要的連結跟圖片,甚至讓瀏覽器擋廣告外掛也擋不住你的廣告



文章目錄

廣告無法顯示的原因是什麼?

被瀏覽器擋廣告外掛擋住了

很多使用瀏覽器瀏覽網頁的人都會裝一款叫做的外掛,他會將網頁上、Youtube影片等地方的廣告都擋住,雖然提升了使用者體驗,但也讓用心的內容創作者得不到廣告的點擊跟收益。

「廣告無法顯示」-有可能是被AdBlock擋住了!

被 VPN 網路篩選廣告的功能擋住了

有些人會使用特殊的 VPN 軟體,那些軟體裡面自帶了過濾廣告網路封包的功能,簡單來說就是可以在網路本身的傳輸資料時,就幫你把廣告相關的內容過濾掉。

如果想知道怎麼透過 VPN 過濾廣告,可以參考底下我這篇文寫的這個 VPN 軟體,他就有提供一個叫做 CyberSec 的廣告過濾方式。


廣告素材的語法是什麼意思?

這些廣告素材基本上都是 加一點簡單的 ,我在這邊不會講太多程式語言的教學,只會簡單帶大家看一下廣告素材的語法的含義。

聯盟行銷廣告素材語法範例與解析

聯盟行銷廣告素材語法範例

這邊我以博客來的聯盟行銷廣告素材為範例,當你到你的博客來推廣帳號中取得廣告素材,大概會拿到像是底下這張圖的推廣語法,叫你複製後貼到你的網站上。

而這段語法為了方便大家觀看,我把它貼到我常用的程式碼編輯器上

(別問我怎麼會用程式碼編輯器,我是一名自由接案的工程師,想更了解我可以看 哈哈)

接下來我們就來看看,這段博客來的推廣素材語法,內容到底有什麼吧?

HTML 語法簡述

要了解這種推廣素材的語法,首先我們必須先知道 HTML 這個程式語言,以下我只講兩個重點,標籤語法&標籤屬性,大家就耐心地把它看完,你一定就能夠學會 HTML 這個語法的大致用法!

標籤語法: HTML 語法其實是一種長得很像標籤的語法,有看過他的人就可以看到, HTML 是由各種標籤所組成,標籤長相就會像是「<text></text>」這樣。

標籤屬性:在每個標籤中都會有屬性可以設定,比如a標籤就會有href這個屬性,長得會像「<a href=””></a>」這樣,href的引號裡面就是要放想要跳轉到的超連結網址。

所以其實這時候就可以看得出來,博客來的聯盟行銷廣告素材中,就是使用到了兩個標籤,外面一個超連結標籤「<a></a>」,裡面包住了一個圖片標籤「<img >」

這樣的語法設計就是在圖片上覆蓋了一層超連結,點下去自然就可以跳轉到某個網頁囉!

連結語法解析「<a></a>」

a標籤是超連結的意思,一般我們看到點下去會跳轉網頁、樣式看起來藍藍有底線的,就是a標籤,。

而我們使用a標籤的時候都會用到它的屬性href,在引號中放入我們點擊之後要跳轉到的網頁網址。我們看到博客來的聯盟行銷廣告素材中,href後面跟著的就是博客來的推廣連結!

這樣大家應該懂素材中為什麼點下去會跳到博客來的商品畫面了吧!其實就是這段<a>超連結標籤幫你做到的!

圖片語法解析「<img >」

img圖片標籤顧名思義就是用來顯示圖片的,我們在網頁上看到的所有圖片其實都是這個標籤幫你顯示的哦!

使用img標籤時,最常用到的就是 src 這個屬性,裡面要放的是圖片的網址,讓這個標籤依據這個網址去幫你找到圖片在哪邊,並且顯示出來。

就像上面紅框標示的那個網址一樣,我們把他複製下來貼到瀏覽器上,就會看到那是什麼圖片囉!

因此如果你想要自己更換圖片,就從 img 標籤中的 src 下手就可以囉!接下來就讓我帶大家開始學習怎麼自製廣告素材!



如何自製廣告素材?

步驟1-自製廣告素材語法(基本)

首先根據上面所教學的 a 超連結標籤 &img 圖片標籤語法,最基本我們要產出一段廣告素材的程式碼,會長得下底下這樣:

  1. 將聯盟行銷連結或者其他推廣連結放到 a 標籤的 href 屬性裡面
  2. 將圖片網址放到 img 標籤的 src 屬性中
  3. 將圖片替代文字(也就是描述這張圖片的文字)放入 img 標籤的 alt 屬性中

這樣就完成最最最基本的廣告素材囉!接下來再進一步教大家進階的使用方式

步驟2-自製廣告素材語法(進階)

其實說是進階,不如說是用到了更多屬性啦!先看看底下這張圖片吧!

  1. 在 a 標籤中使用 target 屬性,裡面輸入 _blank ,就可以讓別人點你這個連結時,使用新分頁來開啟連結網頁囉!
  2. 在 img 標籤中設定 width (寬度)、 height (高度),就可以調整圖片的長寬比例大小(單位是 px ,不懂單位也可以直接調整數字看效果就好)

如何取得廠商廣告素材語法中的圖片網址

看完上面對廣告素材的解析,你應該也知道了一件事情:「如果要取得廣告素材中的圖片網址,只要從 img 標籤的 src 中取得圖片網址就好了!」

step 1

從素材語法中取得 img 標籤的圖片網址

step 2

網址貼到瀏覽器開啟網頁

step 3

點擊右鍵,就可以另存圖片囉!

如何取得非廠商廣告素材的圖片網址

這招就比較厲害了,我們可以透過瀏覽器的開發者工具,取得在網頁上顯示的圖片網址。

*不過要注意廠商的圖片是否有授權你使用哦,避免侵權問題

step 1

首先先開啟你物色好的圖片的網頁,比如我想要紅框中那個圖片

step 2

在網頁隨意一處點擊右鍵 > 「檢查」(或直接點 F12 )

step 3

點擊右邊跑出的開發者畫面最左上角的「滑鼠符號」

step 4

移動到你要取得圖片的上方,點擊下去

step 5

右邊的視窗就會帶你看到那張圖片的語法在哪,可以看到熟悉的img標籤

step 6

點擊兩下 img 標籤中的網址,就可以複製

step 7

網址貼到瀏覽器上,就會看到圖片了

step 8

接下來就右鍵另存圖片就好囉!

不過這種方式還是要注意圖片的所有權問題,並且有些網站圖片是取得不到的哦!


想學習更多好用數位工具、一起提升生產力、增加工作效率?

填寫下方表單,限時免費領取《數位工具應用地圖電子書》,內有超完整數位工具應用情境與攻略,一次帶走所有好用工具與使用攻略!

Ps. 領取後,我們還會每週二準時發送給你一封《領先數位週報》電子信,持續跟你分享最新研究的推薦數位工具,以及一個提升生產力的小技巧!


【免費支持】如果這篇文章有幫助到您或想鼓勵我 ,請幫我在下方處綠色的拍手圖示按 5 下,只要登入 Google 或 FB ,不需花費任何經費就能支持我,感謝您!