6-8. 新增網頁快照模組
在整個佈局當中,使用快照模組需自行指定並規劃要擷取的網頁框架,本篇將示範並指導您如何指定網頁的框頁做為截取快照來源供給CaptivAD做截圖成為網頁模組使用。
注意:您需本身了解XML與HTML的技術知識
快照選項的調整位置
您需要在系統安裝目錄底下,對主檔案進行編輯追加才能供給CaptivAD的下拉選單使用。同時將擴增的子檔案進行撰寫。在檔案路徑之應用程式路徑之下,找到名為SnapTemplate的資料夾,編輯檔案分別為主檔案與子檔案
主檔案:SnapTemplates.xml
→每個快照定義須用此標籤方式<Template …………./>寫入在此
子檔案:XSLT格式檔
→在此定義截取URL的網頁框架
→編輯內容:1. HTML格式的Table語法 2. 相對路徑或絕對路徑的層級元素
改參數方式與解釋
主檔案:修改此檔案做新增項目動作
- Name : 顯示在CaptivAD選項中的模組名稱
- TemplateFile : XSLT的檔案名稱 (子檔案)
- Filter :擷取的網頁URL來源
- EqualFilter:設定為"true"
- Width:指定所生成的顯示寬度
- Height:指定所生成的顯示高度
- Delay : 設定延遲時間(毫秒)於讀取該網頁的等待,建議3000以上
- ByRuntime : 預設為"true",設定"false"則代表所見即所得之內容
子檔案:新增並指定以下動作做為截取內容參數
- HTML格式Table語法:若要定義快照的寬度、高度、標題...,將在這裡表示其元素
- 截取區域的路徑:可以用Google chrome開發人員工具,來得知該網頁的相對路徑或絕對路徑
▲可利用Google Chrome遊覽器的開發人員工具,來解析來源網頁框架的路徑
當你安裝完畢後,請根據您的CaptivAD伺服器所在位置輸入IP,並且使用原管理員或使用者帳戶登入即可 (EZ Console是第二種登入介面,原先資料與帳戶可共用存取 )。
示範做法
取自來源網站http://www.rbc.ru/
▲擷取該網頁右邊的匯率表,做為網頁快照定時提供為圖片給廣告機
Step1. 對SnapTemplates.xml修改,增加以下Tag項目
<Template Name="rbc.ru Exchange Rates" TemplateFile="ru_exchange_rate.xsl" Filter="http://www.rbc.ru/"EqualFilter="true" Width="200" Height="300" Delay="3000" ByRuntime="false"/>
Step2. 新增一個XSLT檔案,命名為ru_exchange_rate.xsl
<?xml version='1.0'?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<table style="background-color: #FFFFFF;">
<tbody>
<tr class="tab" title="rateContainer" style="font-size: x-small">
<xsl:copy-of select="//div[@class='rateContainer']//table"/>
</tr>
<tr id="title" class="tab" title="S&P 500" style="font-size: x-small">
<xsl:copy-of select="//div[@class='small greenBg saveData']//b"/>
</tr>
</tbody>
</table>
</xsl:template>
</xsl:stylesheet>
路徑之寫法
相對路徑:在以上的情況,可用相對路徑以""的引號表示:
<xsl:copy-of select="//div[@class='rateContainer']//table"/>
絕對路徑:或者可以用絕對路徑來表達:
<xsl:copy-of select= "/html/body[1]/div[1]/div[1]/table[1]/tbody[1]/tr[1]/td[3]/div[1]/div[1]/div[3]/table"/>
▲您可以調整佈局列表的空間版面做最佳檢視介面