###### tags: `客製素材` # 三方追蹤碼-Check List ## 靜態埋設 - 針對一般展示型廣告 (banner、圖文廣告)。 - 追蹤碼埋設方式為複製原始追蹤碼，視情況微調後貼入素材檔案內。 ### 埋設流程 1. 確認客戶提供檔案、埋設類型 埋設類型分為： - click tag (點擊觸發) - imrpession tag (曝光觸發) - vendor tag (一般直接包含在 impression tag 內，與曝光一起觸發) 2. 取下追蹤code，並修改 HTML tag 寫法 - 將 HTML tag 大寫改為小寫 (tag和attribute 全需使用小寫，可以使用 Prettier 自動調整為小寫) 3. 將修改後的 impression tag 直接埋入 HTML - 直接複製整段改過的 tag，不要只複製 src 網址，以免收數異常 - `noscript` 為瀏覽器禁用 JS 時的預防措施，請一併埋入，否則收數也可能不正常 4. 把 click tag 放置在系統中素材導頁欄位內 ### 示例 #### 1. 原檔 ```htmlmixed= <--Case : illuma--> <--Click--> https://mamaclub.com/campaign/illuma-big/?utm_source=clickforce&utm_medium=display&utm_campaign=illuma_big_zen_traffic_cfdisplay&utm_content=sand_cpc <--IAS tag (Impression): JavaScript--> <SCRIPT language='JavaScript1.1' SRC="https://ad.doubleclick.net/ddm/trackimpj/N703010.1371339CLICKFORCE.COM.TW/B29055367.354644447;dc_trk_aid=545840475;dc_trk_cid=184155990;ord=[timestamp];dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;gdpr=${GDPR};gdpr_consent=${GDPR_CONSENT_755};ltd=?"></SCRIPT><SCRIPT TYPE="application/javascript" SRC="https://pixel.adsafeprotected.com/rjss/st/1290318/67855966/skeleton.js"></SCRIPT> <NOSCRIPT><IMG SRC="https://pixel.adsafeprotected.com/rfw/st/1290318/67855965/skeleton.gif?gdpr=${GDPR}&gdpr_consent=${GDPR_CONSENT_278}&gdpr_pd=${GDPR_PD}" BORDER=0 WIDTH=1 HEIGHT=1 ALT=""></NOSCRIPT> ``` #### 2. 靜態埋入後的 HTML 檔案 (片段) ```htmlmixed= <--Case : illuma--> <body style="margin: 0"> <div style="width: 300px; height: 250px"> <a href="%%CLICK_URL%%" target="_blank"> <img style="width: 100%; height: auto" src="https://cdn.holmesmind.com/image/creative/20230201/illuma/300x250.jpg" alt="" /> <!-- third party tag --> <script language="JavaScript1.1" src="https://ad.doubleclick.net/ddm/trackimpj/N703010.1371339CLICKFORCE.COM.TW/B29055367.354647702;dc_trk_aid=545806556;dc_trk_cid=183637450;ord=[timestamp];dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;gdpr=${GDPR};gdpr_consent=${GDPR_CONSENT_755};ltd=?" ></script> <script type="application/javascript" src="https://pixel.adsafeprotected.com/rjss/st/1290318/67855970/skeleton.js" ></script> <noscript ><img src="https://pixel.adsafeprotected.com/rfw/st/1290318/67855969/skeleton.gif?gdpr=${GDPR}&gdpr_consent=${GDPR_CONSENT_278}&gdpr_pd=${GDPR_PD}" border="0" width="1" height="1" alt="" /></noscript> <!-- third party tag --> </a> </div> </body> ``` #### 3. DSP 上填入 click tag 導連 ![](https://i.imgur.com/JWSWIxB.png) ## 動態埋設 針對下列形式： - 創意型廣告(呈現畫面不分卡) - 創意型廣告(呈現畫面分卡) 利用 JavaScript 動態加入追蹤 code。 ### 埋設流程 1. 確認客戶提供檔案、埋設類型 埋設類型分為: - click tag (點擊觸發) - imrpession tag (曝光觸發) - vendor tag (一般直接包含在 impression tag 內，與曝光一起觸發) 2. 取下追蹤 code - 取下 `<script>` 或 `<img>` 裡的 src 連結 - 記下 HTML tag 內的 attribute，動態埋入時要完全一樣 3. 創建 HTML tag - tag：`<script>`、`<img>`、`<noscript>` - type：application/javascript 或 text/javascript，不寫可能會被瀏覽器阻攔，導致收數異常 - `<noscript>` 內包的`<img>`，須注意： 1. `<noscript>` 內的 `<img>` 須以 `innerHTML` 寫入 2. 若 `<noscript>` 內的 `<img>` 以 `createElement` 的方式創建 tag，載入時會先載入一次圖片，導致觸發錯誤、收數異常 - click tag 一般會直接透過系統設為主點擊，但已有導連，或click有一個以上時，其餘的 click tag 也要創建成`<script>` 4. 將創建的 HTML tag 動態加入 DOM (appendChild) - impression tag 需視廣告呈現，埋入不同元素內 - 若廣告呈現畫面不分卡，直接埋入外圍元素即可 - 若廣告呈現畫面有分卡，則在不同卡數畫面出現時再一併將 tag 加入 - click tag 需埋設至點擊觸發的元素上 ### 示例 #### 1. 原檔 ```htmlmixed= <--Case : Nespresso--> <--Click--> https://ad.doubleclick.net/ddm/trackclk/N6264.1371339CLICKFORCE.COM.TW/B29223104.357202893;dc_trk_aid=548177731;dc_trk_cid=185188280;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;ltd= <-- IAS tag (Impression): JavaScript--> <SCRIPT language='JavaScript1.1' SRC="https://ad.doubleclick.net/ddm/trackimpj/N6264.1371339CLICKFORCE.COM.TW/B29223104.357202893;dc_trk_aid=548177731;dc_trk_cid=185188280;ord=[timestamp];dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;gdpr=${GDPR};gdpr_consent=${GDPR_CONSENT_755};ltd=?"></SCRIPT><SCRIPT TYPE="application/javascript" SRC="https://pixel.adsafeprotected.com/rjss/st/1323840/68805216/skeleton.js"></SCRIPT> <NOSCRIPT><IMG SRC="https://pixel.adsafeprotected.com/rfw/st/1323840/68805215/skeleton.gif?gdpr=${GDPR}&gdpr_consent=${GDPR_CONSENT_278}&gdpr_pd=${GDPR_PD}" BORDER=0 WIDTH=1 HEIGHT=1 ALT=""></NOSCRIPT> ``` #### 2. 動態埋入後的 HTML 檔案 (片段) ```htmlmixed= <--Case : Nespresso--> /* THIRD PARTY TAG */ let cfImpression = createElement("script", { src: "https://ad.doubleclick.net/ddm/trackimpj/N6264.1371339CLICKFORCE.COM.TW/B29223104.357202893;dc_trk_aid=548177731;dc_trk_cid=185188280;ord=[timestamp];dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;gdpr=${GDPR};gdpr_consent=${GDPR_CONSENT_755};ltd=?", }), cfVendorA = createElement("script", { type: "application/javascript", src: "https://pixel.adsafeprotected.com/rjss/st/1323840/68805216/skeleton.js", }), cfVendorB = createElement("noscript", { innerHTML: '<img src="https://pixel.adsafeprotected.com/rfw/st/1323840/68805215/skeleton.gif?gdpr=${GDPR}&gdpr_consent=${GDPR_CONSENT_278}&gdpr_pd=${GDPR_PD}" border=0 width=1 height=1 alt="">', }); CFOutDiv.appendChild(cfImpression); CFOutDiv.appendChild(cfVendorA); CFOutDiv.appendChild(cfVendorB); ``` #### 3. DSP 上填入 click tag 導連 ![](https://i.imgur.com/y3RmLEE.png) ## 檢查流程 ### 前置作業 - 請關閉 ADBlock 或防毒軟體，並使用無痕模式，才能檢查到回傳值 - 使用開發者工具檢查時，開啟保留記錄檔、停用快取 ![](https://i.imgur.com/MSYINk6.png) ### 檢查項目 利用下列元素搜尋： - tag 裡的 id (點擊 & 曝光會是同一組 id) - script 的名稱 (例如：skeleton.js\/moatad.js) #### click tag - 點擊後在Network中檢查，是否有觸發資料傳送 ![](https://i.imgur.com/Zuy20Ax.png) - 點擊後在Element中檢查，tag是否有被加入至DOM中 ![](https://i.imgur.com/GZcMdpr.png) #### impression tag - 在Network中檢查，是否有觸發資料傳送 ![](https://i.imgur.com/5XEVqMm.png) - 在Element中檢查，tag是否有被加入至DOM中 ![](https://i.imgur.com/gTIxsGr.png) #### vendor tag - IAS tag - 在 Network 中檢查 dt? 與 skeleton.js ![](https://hackmd.io/_uploads/ryLbZb1JT.png) ![](https://i.imgur.com/XUsS6Pf.png) - 在 Element 中檢查，tag是否有被加入至DOM中 ![](https://i.imgur.com/fuvOHxk.png) - Moat tag - 在 Network 中檢查 pixel.gif? 與 moat ![](https://i.imgur.com/BJHDsYI.png) ![](https://i.imgur.com/qtP6sWr.png) - 在 Element 中檢查，tag是否有被加入至DOM中 ![](https://i.imgur.com/qRU51tg.png) - DV tag - 在 Network 中查詢 doubleverify，檢查 dvtp_src.js ![](https://i.imgur.com/UCYUaEp.png) - 在 Element 中查詢 doubleverify，確認 tag 有被加入 ![](https://i.imgur.com/tbdlW5p.png) - DAR tag - 在 Network 中查詢 imrworldwide，檢查 m? ![](https://i.imgur.com/NlVSmne.png) - 在 Element 中查詢 imrworldwide，確認 tag 有被加入 ![](https://i.imgur.com/0EOyI4r.png) ## Check List 以埋設 Tag 分類： ### CM Tag - [ ] HTML tag 大寫改為小寫 - [ ] 將 tag 內的 attribut 全部複製(包含 script type) - [ ] 埋入/貼上整段改過的 tag(`＜img>`/`＜script>`) - [ ] 在系統中放置或在檔案內埋入click tag - [ ] 在Network中用id或相關參數搜尋資源是否正常送出 - [ ] 在Element中用id或相關參數搜尋 HTML tag是否正常建置、加入DOM ### IAS Tag - [ ] HTML tag 大寫改為小寫 - [ ] 將 tag 內的 attribute 全部複製(包含 script type) - [ ] 埋入/貼上整段改過的 tag(`＜img>`/`＜script>`/`<noscript>`) - [ ] 在系統中放置或在檔案內埋入 click tag - [ ] 在 Network 中用搜尋 dt? => 確認 piv > 0、rmeas = 1、rend = 1 - [ ] 在 Element 中用 id 或相關參數搜尋 HTML tag & skeleton.js 是否埋設正確 ### Moat Tag - [ ] HTML tag 大寫改為小寫 - [ ] 將 tag 內的 attribute 全部複製(包含 script type) - [ ] 在 `<body>` 內埋入/貼上整段改過的 tag - [ ] 在Network中用 id/moatads/pixel.gif?，搜尋資源是否正常送出 - [ ] 在Element中用id或相關參數搜尋 HTML tag & moatads 是否正常建置、加入DOM ### LnData Tag (待確認) - [ ] 在 HTML 內新增 `<script>`，src 放入 impression URL - [ ] 在系統中放置或在檔案內埋入 click URL - [ ] 在Network中用id或相關參數搜尋資源是否正常送出 - [ ] 在Element中用id或相關參數搜尋 HTML tag是否正常建置、加入DOM ### DV Tag - [ ] HTML tag 大寫改為小寫 - [ ] 將 tag 內的 attribute 全部複製(包含 script type) - [ ] 埋入/貼上整段改過的 tag(`＜img>`/`＜script>`) - [ ] 在Network中用 sid/doubleverify 搜尋資源是否正常送出 - [ ] 在Element中用id或相關參數搜尋 HTML tag & doubleverify 是否正常建置、加入DOM ### DAR Tag - [ ] HTML tag 大寫改為小寫 - [ ] 將 tag 內的 attribute 全部複製(包含 script type) - [ ] 埋入/貼上整段改過的 tag - [ ] 在Network中用 imrworldwide 搜尋資源是否正常送出 - [ ] 在Element中用 imrworldwide 搜尋 HTML tag 是否正常建置、加入DOM ## 最後檢查(交叉檢查) - 確認以上流程，完成check list檢查後須交由另一位工程師檢查 - 兩位工程師都檢查無誤後，再於 Monday 上將狀態更改為「完成」，如發現問題，需於 Monday 上 update 留存紀錄(附截圖) 以下為示意圖(非真實案件) ![](https://i.imgur.com/Pg1fLRd.png) ![](https://i.imgur.com/ULaQz8r.png)