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

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

文章最後更新 2020 年 4 月 7 日
廣告無法顯示

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

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

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


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


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

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

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

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

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

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

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

【NordVPN評價】2020最高CP值的VPN翻牆工具|連線速度實測、註冊、購買與使用教學


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

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

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

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

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

「廣告無法顯示」-博客來聯盟行銷廣告素材語法範例

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

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

「廣告無法顯示」-程式碼編輯器看廣告素材語法

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

HTML語法簡述

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

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

「廣告無法顯示」-標籤語法

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

「廣告無法顯示」-標籤屬性

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

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

「廣告無法顯示」-a超連結標籤裡面包著img圖片標籤

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

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

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

「廣告無法顯示」-取得a超連結標籤中的網址連結

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

圖片語法解析「<img >」

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

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

「廣告無法顯示」-取得img圖片標籤中的圖片網址

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

「廣告無法顯示」-圖片網址貼到瀏覽器上就會看到圖片了

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


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


如何自製廣告素材?

步驟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標籤的圖片網址

「廣告無法顯示」-取得img圖片標籤中的圖片網址

step 2

網址貼到瀏覽器開啟網頁

「廣告無法顯示」-圖片網址貼到瀏覽器上就會看到圖片了

step 3

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

「廣告無法顯示」-點滑鼠右鍵,就可以另存圖片了

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

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

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

step 1

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

「廣告無法顯示」-物色你想要的圖片,並開啟網頁

step 2

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

「廣告無法顯示」-開啟開發者工具

step 3

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

「廣告無法顯示」-點擊滑鼠符號準備選取

step 4

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

「廣告無法顯示」-在你想取得的圖片上方點下去

step 5

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

「廣告無法顯示」-就換看到該圖片的img標籤語法

step 6

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

「廣告無法顯示」-滑鼠點兩下就可以選取複製網址

step 7

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

「廣告無法顯示」-成功開啟那張圖片

step 8

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

「廣告無法顯示」-滑鼠右鍵 > 另存圖片

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



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


如果對文章內容有任何問題,歡迎在底下留言讓我知道。

如果你喜歡我的文章,可以按左邊的分享按鈕,讓更多的人看見我的文章。

by Mr.K | 領先時代

​作者資訊

Mr. K

熱愛分享、熱愛研究軟體與新事物的自由接案工程師,同時目前也是一名在學的碩士生。

  • {"email":"Email 不正確","url":"網站網址錯誤","required":"必填欄位未填入"}
    >