Naučte AdRotator zobrazovat flash v ASP.NET

Pomocí vestavěného prvku AdRotator můžeme ihned vytvořit jednoduchý reklamní systém, který bude nabízet bannery definované spolu s váhou impresí v souboru XML. V našem příkladu navíc rozšíříme AdRotator o zobrazování bannerů ve formátu Flash, což sám standardně neumí.

Takzvaný Adrotator Web Control je prvek, který do stránky vygeneruje obrázek a případně z něj vytvoří odkaz. Zdroj obrázku vybere náhodně a výpočtem podle váhy z definice v XML souboru. Každý banner (obrázek) má parametr váhy, tedy něco jako průměrný počet impresí. Pokud budeme mít například dva obrázky, jednomu dáme váhu 1 a druhému 9, pak 90 % zobrazení (impresí) připadne na druhý obrázek. Pravda je, že to není úplně ideální systém, časem totiž může vzniknout ve vahách impresí slušný chaos, pokud je editujeme ručně. Pokud budeme soubor definicí bannerů generovat dynamicky, například z databáze, je již situace přehlednější – můžeme tak jednotlivé váhy vždy přepočítat, aby součet všech byl 100, čímž nám jednotlivé váhy budou udávat rovnou procento impresí. (Ani to však nemusí být úplně pravda, protože nám se skutečnými váhami může zamíchat ještě klíčové slovo filtrující zobrazení.) Pro úplnost dodávám, že maximální součet všech impresí nesmí být vyšší než 2.047999999 (2.048000000 – 1).

AdRotator podporuje filtrování bannerů pomocí klíčového slova. Pokud je tedy v definici banneru uvedeno klíčové slovo a AdRotator má nastaveno filtrování (je nastavena jeho vlastnost KeywordFilter), pak bude vybíráno pouze z těch bannerů, které odpovídají filtru – klíčové slovo banneru se shoduje s nastavený filtrem AdRotatoru.

AdRotator podporuje pouze obrázkové bannery, jsou totiž do stránek vkládány pomocí HTML elementu obrázku. S využitím standardních metod systému .net však můžeme jednoduše jeho schopnosti rozšířit. Naše ukázka může rovnou posloužit jako zdroj iframe, kterým zobrazíme reklamní banner třeba v intranetovém redakčním systému. Prohlédněte si ukázku (zdrojový kód, zdroj Flash Controlu je třeba zkompilovat do složky Bin). Ukázky bannerů jsou převzaty z článku o reklamě a inspiraci.

Nejprve se podíváme na definici zobrazovaných bannerů – definují se v externím souboru formátu XML, cestu k adresáři, kde je umístěn, pak AdRotator použije jako cestu k obrázkům bannerů. Ukázka Banners.xml:

<?xml version=“1.0″ encoding=“utf-8″ ?>
<Advertisements>
  <Ad>
    <ImageUrl>1.gif</ImageUrl>
    <FlashUrl>1.swf</FlashUrl>
    <Impressions>40</Impressions>
    <AlternateText>Banner 1</AlternateText>
    <Keyword>System</Keyword>
  </Ad>
  <Ad>
    <ImageUrl>2.jpg</ImageUrl>
    <Impressions>60</Impressions>
    <AlternateText>Banner 2</AlternateText>
  </Ad>
</Advertisements>

V souboru jsou definovány dva bannery, z toho první má navíc přidanou verzi ve flashi, která je uvedena značkou FlashUrl. Tuto značku Adrotator nezná a ignoruje ji, my si však ukážeme, jak ho naučit, aby ji bral v potaz.

V následující stránce máme vložen Adrotator Web Control. Jedna z možností, jak docílit zobrazování flashových bannerů, je přepsat metodu Render třídy AdRotator. Ta generuje vždy HTML element obrázku, takže pouhým uvedením souboru s příponou .swf v konfiguraci bannerů by vznikl nesmysl. Dalším způsobem je využít událost AdCreate. V její obsluze (OnAdCreate) potom zpracujeme aktuální parametry banneru, který AdRotator má právě v úmyslu zobrazit – můžeme přečíst hodnoty vlastních značek z definice a třeba zobrazit úplně jiný prvek ve stránce, zatímco vlastní AdRotator skryjeme. Pro zobrazení flashe použijeme náš vlastní Flash Player Control, můžeme ale třeba jen umístit vlastní kód pro vložení flashe do Placeholderu. V každém případě bude výchozí nastavení Visible mít hodnotu false, prvek tedy nebude ve stránce vidět, dokud jej nějaká událost nezviditelní.

<%@Page Language=“C#“ Trace=“False“ Debug=“False“ %>
<%@OutputCache Duration=“10″ VaryByParam=“*“ %>
<%@Register TagPrefix=“mycode“ Namespace=“Macromedia.Flash“ Assembly=“ControlMacromediaFlashPlayer“ %>
<script language=“C#“ runat=“server“>
static string bannerDirectory()
{
  return ConfigurationSettings.AppSettings[„BannerDirectory“]+“/“;
}
void Page_Load(object sender, System.EventArgs e)
{
  LtrMetaRefresh.Text = „<meta http-equiv=\“Refresh\“ content=\““ + ConfigurationSettings.AppSettings[„BannerDelay“] + „\“ />“;
  if (Request.QueryString[„AdvertType“] != null)
    if (Request.QueryString[„AdvertType“].Length>0)
      AdRotator1.KeywordFilter = Request.QueryString[„AdvertType“];
  AdRotator1.Width = Unit.Parse(ConfigurationSettings.AppSettings[„BannerWidth“]);
  AdRotator1.Height= Unit.Parse(ConfigurationSettings.AppSettings[„BannerHeight“]);
  AdRotator1.AdvertisementFile = bannerDirectory()+ConfigurationSettings.AppSettings[„BannerFile“];
}
void On_AdCreated(Object sender, AdCreatedEventArgs e)
{
  if (e.AdProperties[„FlashUrl“] != null)
  {
    AdRotator1.Visible=false;
    FlashControl1.MediaUrl = AdRotator1.TemplateSourceDirectory + „/“ + bannerDirectory() + (string)e.AdProperties[„FlashUrl“];
    FlashControl1.AlternateImageUrl = AdRotator1.TemplateSourceDirectory + „/“ + bannerDirectory() + e.ImageUrl;
    FlashControl1.AlternateImageText = e.AlternateText;
    FlashControl1.AlternateLinkUrl = e.NavigateUrl;
    FlashControl1.AlternateLinkTarget = „_top“;
    FlashControl1.Width = Int32.Parse(ConfigurationSettings.AppSettings[„BannerWidth“]);
    FlashControl1.Height= Int32.Parse(ConfigurationSettings.AppSettings[„BannerHeight“]);
    FlashControl1.Visible = true;
  }
}
</script><?xml version=“1.0″ encoding=“utf-8″ ?>
<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN“ „http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=“http://www.w3.org/1999/xhtml“ xml:lang=“cs“ lang=“cs“ dir=“ltr“>
  <head>
    <asp:literal id=“LtrMetaRefresh“ runat=“server“ />
    <meta http-equiv=“Content-type“ content=“text/html; charset=utf-8″ />
    <meta http-equiv=“Content-script-type“ content=“text/javascript“ />
    <meta http-equiv=“Page-Enter“ content=“RevealTrans(Duration=2,Transition=23)“ />
    <meta http-equiv=“Page-Exit“ content=“RevealTrans(Duration=1,Transition=23)“ />
    <meta http-equiv=“Imagetoolbar“ content=“no“ />
    <meta http-equiv=“MSThemeCompatible“ content=“no“ />
    <meta name=“MSSmartTagsPreventParsing“ content=“true“ />
    <title>Reklamní systém</title>
  </head>
  <body style=“background:#000000; margin:0px; padding:0px; overflow:auto; height:100%“>
    <asp:AdRotator Id=“AdRotator1″ OnAdCreated=“On_AdCreated“ BorderWidth=“0px“ RunAt=“server“ />
    <mycode:Player Id=“FlashControl1″ Visible=“false“ RequiredVersion=“6″ Quality=“high“ Menu=“false“ Scale=“showall“ BgColor=“#000000″ RunAt=“server“ />
  </body>
</html>

Obsluha zavádění stránky Page_Load zajistí nastavení parametrů AdRotatoru – převezmou se konfigurační údaje ze souboru Web.config a provede se také ověření, zda nebyl při volání aplikace zadán parametr AdvertType. Pokud ano, je použit jako klíčové slovo pro filtrování bannerů. Cestu k adresáři, kde jsou bannery a soubor s definicí bannerů, použijeme v aplikaci vícekrát, proto si napíšeme statickou metodu, která nám tuto hodnotu předá. Doplněn je metaelement, který provádí automatické obnovování stránky v zadaném intervalu.

Pro rozšíření schopností AdRotatoru má hlavní význam obsluha události OnAdCreated, kterou máme v aplikaci definovanou jako On_AdCreated. Z předávaného parametru AdCreatedEventArgs zjistíme pomocí vlastnosti AdProperties hodnotu libovolné vlastní položky právě vybraného banneru (v našem případě je to položka FlashUrl). Pokud je definována (není Null), znamená to, že pro tento banner se má zobrazit flash. Zneviditelníme tedy AdRotator, nastavíme potřebné hodnoty v našem Flash Controlu (ten zajistí vyrenderování kódu pro zobrazení flashe) a zviditelníme jej. Zatímco AdRotator nastaví cestu k obrázku automaticky podle cesty definičního souboru, pro prvek, kterým zobrazujeme banner „po svém“, musíme adresář určit sami. Jelikož se hodí definovat zvlášť adresář a zvlášť definiční soubor, využijeme toho, a adresář prostě našemu prvku nastavíme sami.

Použito je také cachování, zde spíše jen pro ukázku – rozhodně by se hodilo tam, kde se čeká vysoké zatížení reklamního systému. Na jedné straně odlehčí serveru, na druhé straně je třeba si uvědomit, že toto cachování může znepřesnit mechanismus určení váhy imprese, pokud bychom tuto váhu posuzovali u jednoho klienta podle požadavků, které jsou odesílány v kratší době, než je nastavená doba cachování. V našem příkladu totiž bude na požadavky v intervalu 10 vteřin generován díky cachování stále jeden a tentýž banner nezávisle na váze imprese – dobu cachování a zda vůbec cachování použít je proto dobré zvážit.

Jako doplněk jsou přidány přechody stránky (Page-Enter,Page-Exit) pro pozvolný přechod mezi zobrazovanými bannery.

V souboru Web.config nadefinujeme potřebné parametry pro naši aplikaci:

<?xml version=“1.0″ encoding=“utf-8″ ?>
<configuration>
  <appSettings>
    <add key=“BannerWidth“ value=“468″ />
    <add key=“BannerHeight“ value=“60″ />
    <add key=“BannerDelay“ value=“30″ />
    <add key=“BannerFile“ value=“Banners.xml“ />
    <add key=“BannerDirectory“ value=“Banners“ />
  </appSettings>
</configuration>

Příklad ukazuje, jak můžeme snadno rozšířit možnosti AdRotatoru o generování banneru libovolného formátu (audio, video nebo třeba části HTML), bylo by možné také třeba vyvolat přesměrování na jinou stránku. Pro generování multimediálních bannerů by skvěle posloužil skript pro vložení Windows Media Playeru. Jak již bylo zmíněno, můžeme tento příklad použít rovnou pro plnění obsahu iframe nebo třeba jako stránku informačního kiosku, jako jakýsi billboard. Pro hromadné použití ve více stránkách nebo aplikacích by se hodilo jej přepsat jako user control nebo server control.