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&amp;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"/>


▲您可以調整佈局列表的空間版面做最佳檢視介面