tags: `截樣更新`

截樣更新

===

工具存在原因：
=> 讓業務可以透過截樣工具，輸入素材編號，在不同媒體頁上 demo 廣告應該要呈現的樣子。

===

需求
1. 每月更新媒體頁內容
2. 理論上要能模擬實際版位，輸入不同形式的素材、可以在對應的版位呈現素材

流程概覽

1. 使用 SingleFile 擴充抓取網站文章內頁內容
2. 剔除取樣頁內的其它廣告和重複內容、敏感之內容
3. 移除會導致抓下來的網頁無法運作之 HTML tag (iframe or scirpt / meta) 等
4. 參考舊有網站內容，加入廣告版位(僅參考版位位置，與實際版位不同)
5. 若媒體頁本身無響應式設計，需在 PC/Mobile 兩份頁面檔案內分別加入裝置辨別的代碼
6. 媒體頁檔案上 git
7. s3更新後，檢查有無正常顯示網頁、RWD 是否正常運作、廣告是否正常露出

支援素材形式 & 媒體列表

支援形式與注意事項

目前的樣張網站支援一般素材，無 preroll 之截樣功能 (未來待開發)
970x250 尺寸之廣告形式，僅支援電腦版，建議使用下列樣張網站、避免跑版：
- 中天新聞網
- 東森新聞網
- 民視新聞網
- Juksy
- 今購百科
不支援以下素材模組：展示型圖文廣告、影音廣告、MOD EPG (有藍鍵)、MOD EPG (無藍鍵)

媒體列表

20230606 MD 提供之合作媒體如下：

中時電子報
中天新聞網
鏡週刊
東森新聞網
民視新聞網
Juksy 流行生活網
痞客邦
今購百科
icook 愛料理
Babyhome
今健康
Cmoney
今周刊
經理人
鉅亨網

以下為手動更新的細項，供參

抓取網頁

SingleFile

透過 SingleFile 這個擴充來取得網站頁面，Edge 和 Chrome 安裝完後皆可使用。

使用步驟

到取樣頁
往下滾動、等待圖片載入完成
點擊擴充列的 SingleFile
等待取樣完成，自動生成 HTML 檔案
現在你獲得一個完整的網頁檔案了 ᕕ( ᐛ )ᕗ

樣張檔案

整理事項

確認下面幾點有完成：

剔除其它家的廣告內容，放大縮小看有沒有沒刪掉的廣告
刪除頁面內重複的段落或其它捲動載入的文章
拔掉頁面內的 CSP 設定 (參考下方拒絕載入的說明)
參考舊有檔案放入廣告版位
如果網頁不是響應式，需要在手機、電腦版各自加入裝置辨別

程式範例

插入廣告版位






<div style="display: flex; justify-content: center; align-items: center;">
    <!--廣告在這-->
    <ins class="clickforceads" style="display:inline-block;" data-ad-zone="10230"></ins>
    <script async type="text/javascript" src="//cdn.holmesmind.com/js/init.js"></script>
    <!--廣告在這-->
</div>

裝置辨別



























<script>
    var clickforceAD = window.location.href.split('?')[1];

    /* 判斷裝置 */
    var autoChangeDevice = setInterval(function () {
        var flag;
        function check() {
            var userAgentInfo = navigator.userAgent;
            var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
            flag = true;
            for (var v = 0; v < Agents.length; v++) {
                if (userAgentInfo.indexOf(Agents[v]) > 0) {
                    flag = false;
                    break;
                }
            }
            return flag;
        }
        check();

        if (!flag) {
            console.log(flag);
            window.location.href = `https://cdn.holmesmind.com/frontend/demopage/demolink/202211/USTV_202211_MB.html?${clickforceAD}`;
            clearInterval(autoChangeDevice);
        }
    }, 1000);
</script>

Moblile



























<script>
    var clickforceAD = window.location.href.split('?')[1];

    /* 判斷裝置 */
    var autoChangeDevice = setInterval(function () {
        var flag;
        function check() {
            var userAgentInfo = navigator.userAgent;
            var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
            flag = true;
            for (var v = 0; v < Agents.length; v++) {
                if (userAgentInfo.indexOf(Agents[v]) > 0) {
                    flag = false;
                    break;
                }
            }
            return flag;
        }
        check();

        if (flag) {
            console.log(flag);
            window.location.href = `https://cdn.holmesmind.com/frontend/demopage/demolink/202211/USTV_202211_PC.html?${clickforceAD}`;
            clearInterval(autoChangeDevice);
        }
    }, 1000);
</script>

Preroll

Issues

遇到問題可以先檢查 DevTools 內的主控台，看 error log 來除錯 σ`∀´)σ

圖片未顯示與跑版

用 live server 在本地端編輯檔案，可能會掉圖或跑版，放上雲端或直接開啟能正常顯示
已知經理人和 ETtoday 的網站抓下來，打開會跑版，需要手動修正

Refused to load the script

檔案沒清乾淨的話，從截樣頁面選好素材編號，送出之後，會發現廣告沒有跑出來，而且 DevTools 出現了下面的 error log

這時候只要把檔案內的 CSP 設定去掉 (A.K.A. meta tag 拔掉) 就可以使用囉

也需要確認檔案內是不是有額外的 CSP 設定，如果有的話都需要清除，可以直接 ctrl+f 在檔案內搜尋 content-security-policy 或 script-src

Blocked script execution

如果跑出了奇怪的 error log (通常不會只有一個)

因為原始頁面內嵌入 iframe 的 sandbox 沒有做好設定，通常跟廣告無衝突，不須理會

檔案管理

檔案的命名與雲端資料夾的放置位置

資料位置

ads-frontend/demopage

demolink：放一般截樣網站
main：放截樣張入口網站
~~- preroll：放 preroll 的截樣網站~~(待開發)
命名規則：camelCase

其他問題

為什麼有些有分 MB、PC 版，有些沒有？
：因為有些網站不是響應式的
更新頻率之前說是一個月一次，但看起來有些檔案不是同時間更新的，所以會有挑幾個網站特地更新的狀況嘛? 未來這個是要一起全部更新，還是維持有需要更新個別網站就更新個別網站？
：每個月更新數量可以由我們決定，但這次是因為太久沒更新，所以才希望全部更新
Preroll Demo Link*2 是幹嘛用的？
：純影片素材會使用 Preroll，如果要更改素材的話，可以照截樣張網站上的指示更改
截樣章本身網站醜醜，以後有更新打算嘛？
：可以自行決定

舊檔留存

截樣張網頁入口
 截樣張網頁資料位置(202210留存)

tags: 截樣更新