# 中時蓋板廣告說明
[示意頁面](https://project.chinatimes.com/shunbin/chinatimes2018/article-m.htm)
[模擬載入的蓋版廣告頁](https://project.chinatimes.com/shunbin/chinatimes2018/ad-lightbox-320x480-auto-scale.htm)

下列廣告的容器代碼，會固定在內頁露出（檢視原始碼可見）

<!--DFP RWD蓋版式廣告320x480開始-->
<div class="ad rwd">
    <!--  -->
    <div class="lightbox-auto-scale"> 
        ...
    </div>
</div>
<!--DFP RWD蓋版式廣告320x480結束-->

css設定.lightbox-auto-scale這層，clip: rect(0, 0, 0, 0); overflow: hidden，是為了隱藏容器。

這樣做的目的，是因為我們發現，多層廣告商素材iframe嵌套時，常常會有內層素材（廣告商2）沒顯示，但外層框架（廣告商1）不知情的狀況

<!--DFP RWD蓋版式廣告320x480開始-->
<div class="ad rwd">
    <div class="lightbox-auto-scale">
        <div id="div-gpt-ad-1551201747632-0" style="" data-google-query-id="CPzfspKX2fYCFY8nvQodKLYPrQ">
            <div id="google_ads_iframe_/81206261/20_Chinatimes_Mobile/CP/20C_Mobile_InCover_0__container__" style="border: 0pt none; display: inline-block; width: 320px; height: 480px;">
                <iframe id="vendor1">
                    廣告商1，其為轉介的角色，不直接產出廣告素材，而是串接顯示下游廣告商的素材
                    ....其他機制代碼...
                    <iframe id="vendor2">廣告商2產出的素材，但因為某些錯誤，只有空白</iframe>
                    ....其他機制代碼...
                </iframe>
            </div>
        </div>
    </div>
</div>
<!--DFP RWD蓋版式廣告320x480結束-->

此例中，iframe#vendor2的內容為空白，但沒有錯誤通知機制告訴iframe#vendor1，
導致廣告商1以為素材正確產出，故將大小資訊更新到

#google_ads_iframe_/81206261/20_Chinatimes_Mobile/CP/20C_Mobile_InCover_0__container__

如：style="border: 0pt none; display: inline-block; width: 320px; height: 480px;"

這樣會在頁面產出一個寬320px，高480px的空白遮罩
使用者沒有方法關掉，因為我們的最外層框架沒有做關閉鈕，關閉鈕都是素材那個層級做的
遮罩也導致了下方內容無法點選互動

---
我們的解決方式是，容器框架預設隱藏，讓素材通知母頁顯示，素材端的處理方式大致有兩種：

> 1. 靜態的蓋版素材，套用我們自己開發的[gam框架](https://project.chinatimes.com/shunbin/chinatimes2018/ad-lightbox-320x480-auto-scale.htm)

當廣告iframe內容載入後，會透過window.top.postMessage，回傳大小型態等相關資訊
讓母頁上的監控js，將.lightbox-auto-scale這層，加上一個show的class，讓其顯示

此時框架代碼異動如下：

<!--DFP RWD蓋版式廣告320x480開始-->
<div class="ad rwd">
    <div class="lightbox-auto-scale show" data-state="init-complete" data-size="320x480" data-media-type="image">
        ...
    </div>
</div>
<!--DFP RWD蓋版式廣告320x480結束-->

而show這個class在css裡已有定義：

<style>
    .ad [class^="lightbox-"][class*="-auto-scale"].show {
        clip: auto;
        overflow: visible;
    }
</style>

> 2. 若合作廠商有自己的蓋版廣告機制，可以用下列方式在頁面上顯示
- 直接將廣告素材 inject 到 window top (a)
- 廣告素材置於原始容器內
=> 在.lightbox-auto-scale這層，加上 .show，或是
=> 將css注入到母頁，複寫clip設定

a.將廣告素材及css，js等，透過inject js的方式，注入到顯示廣告的母頁

<!--DFP RWD蓋版式廣告320x480開始-->
<div class="ad rwd">
    <div class="lightbox-auto-scale">
        ...
        <iframe id="vendor1">只做為跳板，實際的素材內容將另行注入於母頁</iframe>
    </div>
</div>
<!--DFP RWD蓋版式廣告320x480結束-->

<!--廣告商1注入的代碼開始-->
<div>
    廣告商1的蓋版廣告
</div>
<!--廣告商1注入的代碼結束-->

b.若廣告素材維持放在現有的容器，可透過js將母頁上的.lightbox-auto-scale這層，加一個show的class

<div class="lightbox-auto-scale show">...</div>

c.若廣告素材維持放在現有的容器，可透過js將css注入到母頁，複寫clip設定

<style>
    .ad [class^="lightbox-"][class*="-auto-scale"] {
        clip: auto;
        overflow: visible;
    }
</style>