SlideShare uma empresa Scribd logo
1 de 22
Baixar para ler offline
⾏銷⼈員該具備的程式知識
Getting started with the Web
當個有腦的⼈
Ashley Laidearashleylai@gmail.com
「⽼⼦明天就去學 Coding
- by 無法與⼯程師溝通的爆怒⾏銷⼈
在現在的網路世界中,⾏銷⼈員應該多少懂⼀些程式概念
從 SEO 到 Data Analysis, 你至少要了解:初淺的 HTML 及網址。
HTML
網址概念
⼯程師 眼裡的 ⾏銷⼈
也分成兩種:
有腦⼦的和沒腦⼦的。
後者佔 90%
HTML
基礎常識
HTML BASIC
HTML (Hypertext Markup Language),中⽂為「超⽂字標⽰語⾔」
可以簡單的把 HTML 想像成是種排版⼯具:
它其實就是⽤來組織架構並呈現網⾴內容的程式語⾔。
網⾴內容的組成,可能包含了段落、清單、圖⽚或表格...等。
HTML 元素的組成
➤ HTML 包含了元素(element)
➤ 元素又包含了標籤(tag)及內容(content)
I Love Shiba Inu <p>I Love Shiba Inu</p>
<p>I Love Shiba Inu</p>
Closing
Tag
Opening
Tag Content
Element
在 HTML 下顯⽰為
所有的開始皆為 ⼩於元素⼤於 <元素>
所有的結束皆為 ⼩於左斜線元素⼤於 </元素>
在開始和結束中間放內容不需空格。
元素可以有屬性
➤ 屬性不會呈現在網⾴上,只是幫助編輯
➤ 屬性包含了屬性名稱、等於符號與值
➤ 可以利⽤屬性設定元素的⾊彩、對齊⽅式、圖表的格線等。
(Attribute)
<p class=“editor-note”>I Love Shiba Inu</p>
範例:屬性 class 幫助編輯元素 p
屬性只包在起始標籤內
屬性名稱後直接接著等於=
元素後屬性之間空⼀格
若有兩個屬性,中間需空格
屬性
名稱
值
巢狀元素
➤ 元素裡⾯再放⼀個元素,像個巢⼀樣,故稱之。
原為 <p>I Love Shiba Inu</p>
範例:想要在這句話 I Love Shiba Inu 中強調 Shiba Inu,
希望將其⽤粗體顯⽰。
已知:粗體的元素寫法為 <strong>
更為 <p>I Love <strong>Shiba Inu</strong> </p>
粗體
開始
粗體
結束
強調
內容
I Love Shiba Inu
I Love Shiba Inu
Before
After
(nesting element)
空元素
➤ 有時候元素是空的,因為是圖⽚。
(empty elements)
以圖⽚元素 <img> 為例
<img src=“images/shiba.png" alt="My test image">
屬性1:
Source
圖⽚來源
屬性2:
Alternative
圖⽚無法顯⽰時
的替代顯⽰⽂字
有兩個屬性時,屬性與屬性中間需空格
⼀般 HTML ⽂件架構
<!DOCTYPE html>
Document type(簡稱為DTDs),中⽂意思為「檔案類
型」,⽤來說明⽬前所⽤的 XHTML 或 HTML 是什麼版
本。
要建⽴符合標準的XHTML網⾴DOCTYPE 宣告是必不可
少的關鍵,否則網⾴中的標識和CSS都不會⽣效。
<!DOCTYPE>聲明位於位於 HTML 原始碼中的第⼀⾏。
<html>
</html>
<html>元素,又稱根元素
(root element),包含所有顯⽰在這個
⾴⾯上的內容。
<head>
</head>
<head>元素,功能就像是重要
備註,但不會顯⽰於網⾴瀏覽者眼前。
例如,顯⽰於搜尋結果的關鍵字、⾴
⾯說明、CSS、字元實體集...等。
<body>
</body>
<body>元素,所有顯⽰於網⾴
瀏覽者前的內容,包含⽂字、圖⽚、
影⾳、動畫等。
<meta charset=“utf-8”>
這個元素指定了你的⽂件使⽤utf-8這種字
元編碼, 建議⼤家都要使⽤這個元素,它會幫
助你免去許多⽂字無法正確呈現的煩惱。
<title>
</title>
呈現於網⾴瀏覽者眼前的網⾴
標題。
1
2/10
3/6
7/9
4
5
標記⽂字
➤ ⽂件標題(heading)

⼀份HTML⽂件最多有六個標題。

<h1>My main title</h1>

<h2>My top level heading</h2>

<h3>My sub heading</h3>

<h4>My sub-subheading</h4>

。。。以此類推。。。

➤ 段落(paragraph)

在呈現⼀般⽂字段落最常使⽤的。

<p>This is a single paragraph</p>
標記⽂字
➤ 清單(list)

分為無順序性及有順序性。

- 無順序性清單(unordered lists):即使順序改變也不影響,如購物清單。

項⽬會包在<ul>裡⾯。

- 有順序性清單(ordered lists):順序是有意義的,如供應鏈流程。

項⽬會包在<ol>裡⾯。

- 所有項⽬皆需包在 list item <li>這元素裡⾯。
<p>I miss you</p>



<ol>

<li>every second</li>

<li>every minute</li>

<li>every hour</li>

<li>every day</li>

</ol>



<p>I always miss you</p>
每個項⽬都要包在<li>及</li>之間
Ordered lists 開始
Ordered lists 結束
段落
段落
範例
標記⽂字
➤ 連結(link)
<a href=“https://www.facebook.com/dearshibainu”>Shiba Inu</a>
在網⾴中看到⽂字可點擊之網站連結,是遵循以下三步驟:
① 選擇顯⽰⽂字,如範例的 Shiba Inu
② 將顯⽰⽂字包在<a>與</a>之間

a 代表 anchor
③ 在<a>此元素中加入 href 屬性

href=hypertext reference 的縮寫
④ 將屬性加入值,值就是欲連結的網址
<a>Shiba Inu</a>
<a href=“ ”>Shiba Inu</a>
<a href=“https://www.facebook.com/dearshibainu">Shiba Inu</a>
網址
概念
名詞解釋
➤ 網址=網⾴的地址=URL=Uniform Resource Locator
www.pinkoi.com 整個⼩串是網址(URL)
網域
(Domain)
https://www.pinkoi.com/product/jBDbgfZA?
ref=pinboard&ref_pinboard=9NpW4c6X&ref_position=3
⼩串是網址,⼀⼤長串也是網址。



啊為什麼要那麼⼤串︖
「我們不是⼯程師,只了解網址參數就好
-by 瀕臨崩潰的⾏銷⼈
網址參數
http://example.com?product=1234&utm_source=google
網址中的第⼀個
參數在問號之後
網址中的第⼆個參數
參數與參數之間⽤&連接
➤ 為什麼要設定網址參數︖ 追蹤網址點擊資訊
➤ 網址參數長什麼樣⼦︖
➤ 網址參數可以置於廣告的最終到達網址、追蹤範本或⾃訂參數中。
網址參數 - ADWORDS 應⽤
➤ 在 AdWords 中可使⽤的參數有三種:
①⼀般網址參數可將資訊傳送至您的網站。

例如,http://example.com?productid=1234 會將某位使⽤者直接帶往您網站上的
「product 1234」網⾴。

②⼀般網址追蹤參數可記錄廣告相關追蹤資訊,不是由 Google 所建⽴。

例如,http://example.com?utm_source=google 使⽤⼀般參數
(「utm_source=xyz」),這個參數會記錄使⽤者原本的來源網站。

③ValueTrack 參數會根據您使⽤的參數記錄廣告相關資訊。

這類參數代表在網址參數中的值 (例如「network={network}」網址參數中的 {network} )。

{network} 參數會記錄廣告到達網⾴網址中的點擊來源聯播網 (搜尋聯播網或多媒體廣
告聯播網)。
網址參數 - FACEBOOK 廣告應⽤
➤ 了解流量來源



將網址參數加入廣告⾏銷活動有助於瞭解特定廣告帶來的流量來源。網址參數提供的
分析數據可顯⽰受眾主要是點擊哪個連結前往您的廣告⾏銷活動⽬標⽬的地(例如
Facebook 粉絲專⾴或網站)。



注意:將網址參數新增到 Facebook 廣告後,您還需要使⽤第三⽅分析⼯具,才能追蹤成果。


➤ 如何將網址參數加入廣告︖

網址參數 - FACEBOOK 廣告應⽤
1. 在廣告管理員或 Power Editor 建⽴新的廣告⾏銷活動,或是開啟先前儲存
的草稿繼續編輯
2. 從⾏銷活動和廣告組合層級輸入您的資訊後,前往廣告層級設定您的網址
參數。
3. 在廣告層級尋找網址參數部分。您可能需要先點擊顯⽰進階選項才能看⾒
此部分。
4. 在網址參數中,輸入辨識該⾏銷活動⽤的描述參數。網址參數是由⾏銷活
動識別資訊以及您為這些資訊定義的值所組成。請勿在此輸入⽬標網址。
太複雜嗎︖看範例
➤ 如果正在測試有⿊⾊背景的廣告,並想要瞭解有多少受眾點擊該廣告⽽前
往您的網站,可以嘗試設定以下網址參數: background=black









加入此標籤後,系統會為這則有⿊⾊背景的廣告建⽴專屬網址
www.example.com?background=black
➤ 如要建⽴包含兩個不同測試值的廣告,網址參數間加入&即可。

在網址參數欄位中輸入 “key1=value1&key2=value2”。網址會更新為
www.example.com?key1=value1&key2=value2
background 代表

⾏銷活動識別資訊
black
值
測試1 測試2
範例
網址參數 - FACEBOOK 廣告應⽤
謝謝收看。
Ashley Lai
腦洞有補起來了嗎︖
dearashleylai@gmail.com

Mais conteúdo relacionado

Semelhante a 行銷人員該具備的程式知識

2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪小 米猪
 
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗Drupal Taiwan
 
协同版操作培训
协同版操作培训协同版操作培训
协同版操作培训lrk3
 
给聚划算后端开发的前端培训
给聚划算后端开发的前端培训给聚划算后端开发的前端培训
给聚划算后端开发的前端培训j5726
 
如何写出具有符合Seo的文章 How to Write SEO Friendly Content with 4 Steps
如何写出具有符合Seo的文章 How to Write SEO Friendly Content with 4 Steps 如何写出具有符合Seo的文章 How to Write SEO Friendly Content with 4 Steps
如何写出具有符合Seo的文章 How to Write SEO Friendly Content with 4 Steps 煜庭 邱
 
6.twitter bootstrap 元件介紹
6.twitter bootstrap 元件介紹6.twitter bootstrap 元件介紹
6.twitter bootstrap 元件介紹Nelson Chen
 
Seo简历示范
Seo简历示范Seo简历示范
Seo简历示范kevin john
 
E 電子商務概論
E 電子商務概論E 電子商務概論
E 電子商務概論xuanghung
 
E 電子商務概論
E 電子商務概論E 電子商務概論
E 電子商務概論xuanghung
 
Seo4sales20080103 網路行銷SEO
Seo4sales20080103 網路行銷SEOSeo4sales20080103 網路行銷SEO
Seo4sales20080103 網路行銷SEOHui-kang Tang
 
应用开发一般工作流程和注意
应用开发一般工作流程和注意应用开发一般工作流程和注意
应用开发一般工作流程和注意cucued
 
網頁教學課堂投影片
網頁教學課堂投影片網頁教學課堂投影片
網頁教學課堂投影片lys167
 
HTML & JavaScript
HTML & JavaScriptHTML & JavaScript
HTML & JavaScriptSanji Zhang
 
電子商務概論
電子商務概論電子商務概論
電子商務概論anita4711
 
Website Pracice Focusing on UX, Chinese
Website Pracice Focusing on UX, ChineseWebsite Pracice Focusing on UX, Chinese
Website Pracice Focusing on UX, Chinesemultiple1902
 
[網路星期二] 網站流量分析---這樣做就對了!!:環資-大誌-Wilson
[網路星期二] 網站流量分析---這樣做就對了!!:環資-大誌-Wilson[網路星期二] 網站流量分析---這樣做就對了!!:環資-大誌-Wilson
[網路星期二] 網站流量分析---這樣做就對了!!:環資-大誌-WilsonNet Tuesday Taiwan
 

Semelhante a 行銷人員該具備的程式知識 (20)

2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪
 
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
 
协同版操作培训
协同版操作培训协同版操作培训
协同版操作培训
 
给聚划算后端开发的前端培训
给聚划算后端开发的前端培训给聚划算后端开发的前端培训
给聚划算后端开发的前端培训
 
S_E_O
S_E_OS_E_O
S_E_O
 
如何写出具有符合Seo的文章 How to Write SEO Friendly Content with 4 Steps
如何写出具有符合Seo的文章 How to Write SEO Friendly Content with 4 Steps 如何写出具有符合Seo的文章 How to Write SEO Friendly Content with 4 Steps
如何写出具有符合Seo的文章 How to Write SEO Friendly Content with 4 Steps
 
6.twitter bootstrap 元件介紹
6.twitter bootstrap 元件介紹6.twitter bootstrap 元件介紹
6.twitter bootstrap 元件介紹
 
【MMdc 分享】成功在Bing進行SEO優化
【MMdc 分享】成功在Bing進行SEO優化【MMdc 分享】成功在Bing進行SEO優化
【MMdc 分享】成功在Bing進行SEO優化
 
Seo简历示范
Seo简历示范Seo简历示范
Seo简历示范
 
E 電子商務概論
E 電子商務概論E 電子商務概論
E 電子商務概論
 
E 電子商務概論
E 電子商務概論E 電子商務概論
E 電子商務概論
 
Seo4sales20080103 網路行銷SEO
Seo4sales20080103 網路行銷SEOSeo4sales20080103 網路行銷SEO
Seo4sales20080103 網路行銷SEO
 
应用开发一般工作流程和注意
应用开发一般工作流程和注意应用开发一般工作流程和注意
应用开发一般工作流程和注意
 
網頁教學課堂投影片
網頁教學課堂投影片網頁教學課堂投影片
網頁教學課堂投影片
 
HTML & JavaScript
HTML & JavaScriptHTML & JavaScript
HTML & JavaScript
 
電子商務概論
電子商務概論電子商務概論
電子商務概論
 
Web教程2
Web教程2Web教程2
Web教程2
 
日新培训
日新培训日新培训
日新培训
 
Website Pracice Focusing on UX, Chinese
Website Pracice Focusing on UX, ChineseWebsite Pracice Focusing on UX, Chinese
Website Pracice Focusing on UX, Chinese
 
[網路星期二] 網站流量分析---這樣做就對了!!:環資-大誌-Wilson
[網路星期二] 網站流量分析---這樣做就對了!!:環資-大誌-Wilson[網路星期二] 網站流量分析---這樣做就對了!!:環資-大誌-Wilson
[網路星期二] 網站流量分析---這樣做就對了!!:環資-大誌-Wilson
 

行銷人員該具備的程式知識