給PM及行銷人的網頁設計入門 + GA/GTM 設定如何與軟體工程師協作 (Build School 於外貿協會ITI 數位跨域專班課程)

給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