網站上線前
你還有什麼事情沒有做？
Tommy
講者簡介
Tommy Lin
- 一位熱愛 JavaScript 的開發者
- STARLUX Airlines - Frontend Team Lead
- 曾任業界前端技術講師及大專院校兼任講師
- 台北前端社群、Git.tw發起人
- 偷米騎巴哥YouTube頻道經營
- 擁有人人稱羨的前端靈異體質、專長採到雷
在開始之前
https://bit.ly/3gXa7Hp
為什麼要分享這個主題？
網站上線前你還有什麼事情沒有做？
血淚經驗談
剛升任團隊Lead或主管時...
一定會面臨到評估開發時程的問題
常會被PM追著問時程
估的太長
PM會抱怨成本太高
估的太短
團隊成員會忙的要死
難怪主管都沒朋友
學習正確評估開發時程
是一門學問
先說何謂開發流程？
需求 => 產品
老闆 => 賺錢
需求 => 產品
夢想大師 v.s. 通靈大師
老闆 => PM => 開發
(傳話筒)
有沒有聽過
最後一棒最慘的故事？
週五下班前需求交給你囉
希望週一早上能看到結果
PM還說有兩天的時間可以給你開發呢！
內心很幹，但卻又笑著說好
做人好難
需求拖好托滿
結果開發時間剩7天
需求拖好托滿
最後3天還給我改需求
結果開發時間剩7天
需求拖好托滿
那開發時程怎麼來的？
1. 老闆指定
老闆說某月某日一定要上線
2. PM規劃
死線回推大法
例如： 月底上線，測試1週，你開發只有3天，需求下週給你
3. 憑過去的開發經驗估算
某功能跟之前類似差不多，時程也差不多
但通常都沒估到卡關的時候
時程不夠怎麼辦？
分階段上線
某種程度上也算是敏捷開發
只是先把產品上線了
簡化功能
某個功能先不要做 or 這個功能簡單做一下就好
趕出來硬著頭皮上線
沒有Unit Test，只有User Test
加班加到死
事前沒有先規劃好，老闆又不接受妥協
所以學會正確
估開發時程很重要
雖然有時候估完後，還是會指定什麼時候要完成
那就是另外一個故事了
哪些事情是
最常在開發階段被遺忘？
老闆覺得重要
但PM覺得不重要
例如：
老闆每天要看業績報表
但PM不會
老闆在意行銷費用多少
但PM不會
老闆想和其他媒體合作
但PM不會
老闆的事情重要
還是PM的事情重要？
老闆會發薪水給你，但PM不會！
老闆發飆通常都是先找開發，而不是PM！
以上這些事情就算PM沒想到
身為開發在心理也要有個底
因為遲早都會要你做
那會什麼不先預估到時程內呢？
哪些東西最常被遺忘？
1. GA
2. GTM
3. SEO
4. SMO
5. 資安
6. 無障礙
Google Analytics
無人不知，無人不曉
都21世紀了誰沒聽過GA
老闆喜歡GA
網站流量，點擊率，產品業績，轉換率
開發也喜歡GA
埋GA追蹤碼很簡單，不用煩惱報表怎麼做！
真的很簡單嗎?
複製貼上即完成
馬上可得到精美的報表
各種分析報表通通有
但老闆說
想看銷售業績的報表...
你覺得剛剛埋那段code
能看銷售業績嗎？
需要整合GA電子商務功能
告訴GA，誰看了什麼商品，有沒有加入購物車
什麼時候結帳了，有沒有用優惠券，等等。
數據沒告訴GA
GA會知道嗎？
GA電子商務
必須手動在適當位置上埋碼
這些code都是要額外開發並埋入流程中
操作流程有異動
請務必記得一起修改
通常PM會忘記，老闆發現報表不對就會跑來找你
順便一提
明年7月前記得要升級到GA4
通用GA即將停止收集資料，請記得估時程安排升級作業！
Google Tag Manager
我不是來推銷Google產品的
只是剛好這些東西挺方便的，善用工具
最常見情境
我們要跟某某廣告公司合作，請協助埋追蹤碼
身為開發最痛恨媒體合作
於是就導入使用了GTM
因為：
Google說：GTM是給
行銷人員使用的工具
本來以為很開心，可以減少loading
請問你們公司行銷人員
有自己在用GTM的請舉手？
行銷：這個我不會，請開發協助喔！
自己導入的工具
卻要自己學習使用
但GTM也不是這麼糟
它也曾經救了我幾次！
就是：
記得合作媒體的程式碼都要加上try...cache...
對方網站出問題了
至少我們網站還不會掛掉
廣告公司的媒體合作
是需要花錢的
老闆都很在意花多少錢給媒體
GTM有一套非常
方便的版控機制
懂得人就懂
也有強大的預覽功能及除錯機制
還可以兼除錯
避免媒體公司說沒收到資料
搞半天結果是對方公司防火牆阻擋沒開
因此這些開發工作也要記得列入評估時程中
Search Engine Optimization
目前還沒有遇到一個PM
在專案開始就先規劃SEO
通常都是在要上線前才告訴你要SEO喔
SEO要做多少？
取決於老闆對於Google廣告的預算多寡
廣告預算多，SEO甚至可以什麼都不用做
SEO要做什麼？
想辦法讓搜尋排名在最前面
不是花錢的那種
為什麼搜尋引擎
找不到我們的網頁?
你有做對方法嗎？先掌握SEO的大原則！
有記得做SSR嗎？
前端框架流行，但也要考慮SEO
內部網站就算了，對外網站就算PM沒說也要先考慮SSR
什麼時候該用
301 or 302轉址？
想要累積SEO分數用301
Canonical
產品業面不同顏色尺寸請設定標準網址
結構化資料
讓Google猜你的網頁是什麼，不如先告訴他你有那些東西
JSON-LD
類似JSON資料結構，但有先規範好哪些內容，讓搜尋引擎更容易解讀
sitemap.xml
快速讓搜尋引擎知道網站的內容有哪些
robots.txt
可以建議搜尋引擎那些頁面可不可以抓取
如果你是Google
你會給那種網站排名較好？
1. 有買廣告
搜尋引擎的衣食父母
2. 內容正確
內容正確廣告商才會願意下廣告
3. 經常更新
有新的內容才會吸引瀏覽者
廣告商才會有錢賺
說到底SEO就是
幫搜尋引擎賺錢
但你不做就會被
其他競品淹沒
Social Media Optimization
這年頭社群網站當道
台灣常用的社群平台
國際平台：LINE、Facebook、Instagram...
國內平台：PTT、Dcard、Mobile01...
沒做SMO有差嗎？
Facebook分享連結
預覽圖片不是想要的那張？
LINE分享連結
說明文字內容可以指定嗎？
需要額外設定Meta標籤
og:image
og:title
og:description
大型網站還可能需要整合
多國語系&CMS系統
放在社群網站的連結
怎麼統計成效？
使用UTM網址參數追蹤
utm_source
utm_medium
utm_campaign
短網址追蹤
bit.ly
連結想要整合
開啟APP應用程式
Dynamic Link
把影片放在網站上面
大家怎麼看？
放在自家網站
非常吃網路頻寬和流量
崁入YouTube
會看到廣告，看完後變成競品推薦
解決方案
1. 另購storage存放影片內容
2. 使用短秒數動畫圖片
SMO幾乎是現代網站的標配
你能說不做嗎？
開發沒有說不的權利
資安
老掉牙的資安問題
SQL Injection
SQL Injection
不要笑，現在還是有很多網站仍存在SQL Injection問題
不要以為資安是後端的事情
前端也可能存在資安風險
前端常見攻擊手法
XSS
CSRF
解決方案
CSP
JWT
有一個笑話：
後端永遠都不相信前端
金流、有個資類型網站開發時就要先考慮資安
不然刑事局會請老闆去聊聊
接下來就是老闆跟你聊聊
資安沒出事都沒事
出事絕對急得要死
基本防護一定要先做好、否則就像在網路上裸奔
無障礙
先調查：
你公司網站有做無障礙的
請舉手？
台灣對無障礙網頁的態度？
只有政府機關有在做
私人企業營利優先，做無障礙等賺錢後再說
我也是踏入航空業才知道
美國運輸部有強制規範
任何有飛到美國領土的航空公司售票網站都需要符合無障礙
被旅客檢舉會被開罰
無障礙的迷思
不是只有失明一種
色盲、弱視、失聰、聾盲、行動不便、語言障礙、認知障礙...
無障礙的基本概念
以下共有三題
是不是有人會說：替有障礙的人專門設計網頁就好了
美國人最討厭種族歧視，但通常都是他們先歧視
在台灣無障礙不是必備
但如果有要做無障礙會要注意很多細節
但做了無障礙
有需要的人會非常感謝你
總結
評估開發時程並非只有
顯性需求
隱性需求也必須先考慮進去
如果不知道怎麼抓
以我的經驗來說
顯性需求的工時*1.5倍
例如：功能開發需6天完成，實際報出開發時間為9天，會比較保險
當然如果估太長PM會靠北
所以一開始就先考慮隱性需求，評估的時程才會準確
開發的工時不建議估太剛好
讓突發狀況有一個緩衝時間
寧可提前交付，也不要延期交付
但也不要讓PM發現
你時程估得太寬鬆
跟政府部門的預算
是一樣的道理
工商時間
你要準備要出國了嗎？
歡迎搭乘星宇航空
預計4月開賣美國航線
但請不要問我
能不能幫忙買便宜機票
員工福利票限員工親屬使用
所以...
與其羨慕，不如加入
詳情請洽104職缺
以上就是我今天的分享
謝謝大家