開始

此章節將簡介如何在DoubleClick for Publisher（以下皆稱為DFP）上設定並使用VMFive Ads

• 取得範例程式碼
• 如何使用DFP放送VMFive Ads廣告程式碼
  • 建立廣告空間
  • 廣告放送
• 取得預覽頁

取得範例廣告代碼

請從 VMFive Ads Universal Code 中取得適用於DFP的範例廣告代碼（若需要使用SafeFrame進行投放，請參考 VMFive Ads Inline Code，建議預設使用VMFive Ads Universal Code）

如何使用DFP放送VMFive Ads

建立廣告空間

1. 登入DFP廣告管理系統並在左側選單點選廣告空間

2. 點選廣告單元，並點選新增廣告單元

   https://github.com/VMFive/vmfive-man-web-demo/blob/gh-pages/images/guideimages/dfp/adunit_1_zh-tw.png

3. 輸入代號（必須是唯一的），並填上其他需要的選填項目

4. 選擇DFP預設的大小，若沒有在預設大小列表上，可以使用輸入的方式客製化廣告單元大小（例如輸入100x100）

   https://github.com/VMFive/vmfive-man-web-demo/blob/gh-pages/images/guideimages/dfp/adunit_2_zh-tw.png

5. 點選儲存

6. 選擇建立的廣告單元，點選右側的產生廣告代碼 https://github.com/VMFive/vmfive-man-web-demo/blob/gh-pages/images/guideimages/dfp/adunit_3_1_zh-tw.png https://github.com/VMFive/vmfive-man-web-demo/blob/gh-pages/images/guideimages/dfp/adunit_3_2_zh-tw.png

   https://github.com/VMFive/vmfive-man-web-demo/blob/gh-pages/images/guideimages/dfp/adunit_4_zh-tw.png

7. 依照需求選擇啟用單一請求或收合空白的div

   https://github.com/VMFive/vmfive-man-web-demo/blob/gh-pages/images/guideimages/dfp/adunit_5_zh-tw.png

8. 取得你的GPT代碼

   https://github.com/VMFive/vmfive-man-web-demo/blob/gh-pages/images/guideimages/dfp/adunit_6_zh-tw.png

放送VMFive Ads

1. 登入DFP廣告管理系統並在左側選單點選廣告放送

2. 點選訂單，並點選新增訂單

   https://github.com/VMFive/vmfive-man-web-demo/blob/gh-pages/images/guideimages/dfp/deliver_1_zh-tw.png

3. 輸入訂單名稱與選擇廣告客戶（若廣告客戶不存在，可使用新增公司來增加廣告客戶）

   https://github.com/VMFive/vmfive-man-web-demo/blob/gh-pages/images/guideimages/dfp/deliver_2_zh-tw.png

4. 向下進入新增委刊項區塊，輸入委刊項名稱

5. 選擇廣告空間大小（若不存在DFP預設大小上，可以使用直接輸入客製化大小，例如輸入100x100）

   https://github.com/VMFive/vmfive-man-web-demo/blob/gh-pages/images/guideimages/dfp/deliver_3_zh-tw.png

6. 選填其他項目

7. 向下進入放送設定，設定類型（建議使用包量或包版）、開始時間、結束時間、數量、費率等欄位。接著調整投放速度（建議使用平均放送）、多媒體廣告素材顯示數量（建議使用僅限一個）。若需要其他細部設定，請閱讀DFP的參考資建立委刊項或與VMFive技術支援聯繫。

   https://github.com/VMFive/vmfive-man-web-demo/blob/gh-pages/images/guideimages/dfp/deliver_4_zh-tw.png

8. 選擇投放的廣告單元 https://github.com/VMFive/vmfive-man-web-demo/blob/gh-pages/images/guideimages/dfp/deliver_5_zh-tw.png

9. 點選儲存

10. 從左側功能欄選擇廣告素材，點擊新增廣告素材

https://github.com/VMFive/vmfive-man-web-demo/blob/gh-pages/images/guideimages/dfp/deliver_6_zh-tw.png

https://github.com/VMFive/vmfive-man-web-demo/blob/gh-pages/images/guideimages/dfp/deliver_7_zh-tw.png

11. 選擇廣告客戶，並且選擇第三方素材

    https://github.com/VMFive/vmfive-man-web-demo/blob/gh-pages/images/guideimages/dfp/deliver_8_zh-tw.png

12. 設定廣告素材名稱，將VMFive Ads廣告代碼置入程式碼片段 https://github.com/VMFive/vmfive-man-web-demo/blob/gh-pages/images/guideimages/dfp/creative_1_zh-tw.png

13. 確認巨集插入成功

    https://github.com/VMFive/vmfive-man-web-demo/blob/gh-pages/images/guideimages/dfp/creative_2_zh-tw.png

14. 選擇指定廣告單元大小（注意，儲存之後不得再修改）

15. 請根據選用的廣告代碼類型，選擇不同的放送到SafeFrame設定

    1. 使用VMFive Ads Universal Code，請勿勾選放送到SafeFrame
    2. 使用VMFive Ads Inline Code，請勾選放送到SafeFrame

16. 儲存後，進入關聯分頁，並點選新增項目

    https://github.com/VMFive/vmfive-man-web-demo/blob/gh-pages/images/guideimages/dfp/deliver_10_zh-tw.png

17. 選擇想要關聯的訂單或委刊項

    https://github.com/VMFive/vmfive-man-web-demo/blob/gh-pages/images/guideimages/dfp/deliver_11_zh-tw.png

    https://github.com/VMFive/vmfive-man-web-demo/blob/gh-pages/images/guideimages/dfp/deliver_12_zh-tw.png

18. 點選儲存

19. 回到對應的訂單，選擇核准（注意，有時委刊項在核准後會處在無效狀態，需要手動啟動）

20. 等待30-60分鐘讓新建的訂單生效

取得預覽頁

1. 登入DFP廣告管理系統並在左側選單點選廣告放送
2. 點選委刊項，並選擇想要產生預覽的委刊項
3. 點擊廣告頁籤，並點選想要產生預覽的廣告素材 https://github.com/VMFive/vmfive-man-web-demo/blob/gh-pages/images/guideimages/dfp/generate_preview_page_1_zh-tw.png
4. 進到廣告素材的頁面後，點選預覽頁籤，並點選在網站上預覽，會跳出在實際網站中預覽的對話框。
5. 在網站網址中放入會使用到該廣告素材的網頁。
6. 點擊顯示預覽網址。
7. 在預覽網址內的就是預覽頁囉！ https://github.com/VMFive/vmfive-man-web-demo/blob/gh-pages/images/guideimages/dfp/generate_preview_page_2_zh-tw.png