給PM及行銷人的網頁設計入門 + GA/GTM 設定如何與軟體工程師協作
課程目標: 以未來從事網路行銷、PM 類型工作之學員為對象。希望未來身為行銷人或PM的夥伴們,擁有基本的軟體及 Web 知識與技能,並善用這些知識與客戶/工程師/協作廠商夥伴能有效溝通,讓老闆及工作夥伴們覺得你很專業! 課程中將帶領學員動手做出一個支援各式裝置的網頁 – 使用 HTML/CSS/Bootstrap/RWD技術,並將網頁發佈至 GitHub 平台,讓學員設計一個一頁式商店網頁! 最後在網頁中加入GA/Hotjar追蹤碼,並使用GTM管理設定追蹤碼,了解如何設定及其運作,幫助你在未來工作時有助於與團隊成員及軟體工程師溝通及協作

學員課前準備: 需自備筆電,有一些網頁設計概念或任何程式基礎學習經驗會更好,因幾乎全程都是動手做
時數: 5 堂,每堂 4小時 (將會視同學上課狀況調整課程進度及內容、或再增加堂數內容,因每堂課內容蠻多的。每堂課後作業所需時間可能為 6 ~ 8 小時,視每位學員學習狀況及熟練度)
課程成果展示: 一頁式的商品展示網頁,也有加入購物車的功能,並可模擬使用 GA/GTM 追蹤網頁流量成效及轉換率
圖1 : 一頁式電商網頁,使用 HTML/CSS/JavaScript 等技術 圖2: 在GA中看到一頁式商店網頁的購物行為分析及轉換率 |
課程大綱:
Day 1 – HTML/CSS 入門
- 環境安裝
- 學習資源
- 建立第一個HTML
- HTML標籤介紹
- CSS介紹及選擇器入門
- 作業:簡易的個人 CV
Day 2 / Day 3 – CSS框架 Bootstrap入門及一頁式商店網頁
- 建立GitHub及上傳作業
- CSS選擇器介紹及練習(CSS Dinner)
- RWD網頁初探
- Flex排版入門
- CSS框架 – Bootstrap介紹及入門
- 作業:簡易一頁式商店切版
Day 4 – JavaScript 初體驗
- JavaScript介紹
- 使用JSON資料
- 網頁儲存機制 – Cookie / LocalStorage / SessionStorage
- 加入購物車實作
- 常見網頁的事件介紹 – 載入頁面 / 捲動事件
- 作業:一頁式商店功能串接 – 加入購物車及讀取購物車資料
Day 5 – PM及行銷人應該知道的GA/GTM設定知識
- GA (Google Analytics) 及GTM (Google Tag Manager)帳號申請
- 何謂追蹤碼? 常見的流量及使用者行為分析工具 – GA 及 Hotjar
- 插入程式碼片段
- 建立及測試GA基本功能
- GA加強型電子商務實作
- 匯入及匯出GTM設定檔
- 作業:將一頁式商店加入加強型電子商務功能
教學團隊及講師簡介:
Build School (www.Build-School.com) 是一所最酷的資訊教育學校,幫助想搭上軟體開發及數位經濟這艘火箭的學員們,成為一位專業的軟體工程師,也協助企業更快更容易地找到對的人才!
講師及助教群:
吳典璋 (Dann Wu) – Build School 創辦人
- 經歷: 前 Microsoft 微軟 開發工具資深產品行銷經理
黃柏豪 (Andy Huang) – Build School 軟體工程師及助教
- 擔任團隊 Lead及專案PM
- UX互動設計背景 – 專長.NET / C# / CSS / JavaScript
- 電商專案PM及 GA/GTM 追蹤設定經驗
張育誠 (Calvin Chang) – Build School 軟體工程師及助教
- 前端 Vue.js / JavaScript / CSS 專長
- 電商專案前端工程師及 GA/GTM 追蹤設定經驗
- 喜愛潛水擁有教練執照
邱秉澄 (Jimmy Chiu) – Build School 軟體工程師及助教
- 電商及團購平台開發經驗
- 物流業專案經驗
- 專長: .NET / C# / JavaScript / Vue.js