###### tags: `模板素材`、`CA-DB`
# 模板素材
此篇文件與模板 (模組化) 素材相關，包含建立模板、測試流程，以及系統更動產生的模板修改需求，以及後續維護事項。
## 索引

### [新建模板](#新建模板1)
- [開發流程](#開發流程)
- [新建模板測試流程](#測試流程1)

### 修改模板
- [自動追蹤參數](https://hackmd.io/Q4K0R5CtQxaHjau8s1M7ew)
- 舊有模板更新
- 修改模板測試流程 => 跟[客製化素材的測試流程](https://hackmd.io/V-VxT1FRTdyQYORbDGBpaA?view)一樣

## 新建模板
> 可以先參考這篇含整體分工項目的文件-[新增廣告樣板](https://hackmd.io/@CFRD/rkValONF9)

簡單說明前端在整個新建模板的過程中，需要做的事
<font color=slategray>
1. **確認需求**：
- 接收產銷需求後，依設計進行開發
- 需要與PM、後端討論並確認資料格式
- 跟後端工程師要開發用的資料格式 (.json)
2. **模板開發**：實際進行模板開發，確保模板與需求相符
3. **實際測試**：在後端與測試工程師實測完後，於系統上以模板進行素材建置，模擬使用者進行測試
</font>
### 開發流程
1. 在 DSP 內新增 HTML/JS 進行素材開發，確認以下事項：

a. 圖/影片格式是否正確 (系統是否有對應的素材尺寸格式)
b. 主副點擊位置和數量
c. i? av? 參數有無埋入
d. GAM frame 設定
e. 記得把有的沒有的 console.log 拔掉

<font color=salmon>*可以參考形式類似的模板素材進行開發，包含 GAM、參數設定等</font>

2. 完成 H5 素材後，抽出裡面的 JS 內容，上傳至 [js/modle 資料夾](https://s3.console.aws.amazon.com/s3/buckets/cdn.doublemax.net?region=ap-northeast-1&prefix=js/modle/&showversions=false)
3. 到 [CA-DB](http://13.230.103.12/pma-ca/index.php?db=rtb_ca&table=ca_creative_type_template_v3&target=sql.php) 新增樣板

a. 向後端確認使用的樣板 id
b. 點擊「新增」
c. 填入資料

        - id: 系統自動填入
        - content_type: 後端提供的樣板 id
        - template: 資料格式 (主副點擊、曝光等參數、接到 JS 檔案資源)*
        - create_time: 系統自動填入
        - create_by: 自己的 CA-DB id，沒有的話記得詢問管理員
        - update_time: 第一次新增，請選擇當天的日期
        - update_by: 自己的 CA-DB id
        - status: 1

<font color=salmon>*沒看過模板資料格式？可以看[這裡](https://hackmd.io/-LGdBri8T_KsthmvM8ScdQ?#CA-DB-資料格式)</font>

d. 按下執行後，回到資料庫就可以看到有沒有成功新增模板囉
4. 清除 CA-DB 快取，點擊下方連結再關掉就好囉
http://13.115.185.236/syncserver/sync/redisCacheCreativeTypeTemplate

### 測試流程
1. 後端處理 adserver、提供測試頁，我們可以透過測試環境*來進行素材檢視、偵錯
<font color=salmon>*沒設定過本地端測試環境？可以看[這裡](https://hackmd.io/JRkr5EXUQjaEBQg9QjR_Nw)</font>
2. 與產銷再次確認 Demo 與需求是否相符
3. QA 工程師進行全面性測試 (含基本網頁及媒體投放)
4. 到 DSP 測試環境新增模板素材，透過 SSP 正式版位請求廣告
5. 於官網更新素材 Demo
6. 正式上線