Creating Custom Display Types in Commerce Server

September 2, 2008 |

Author ravikanth

Microsoft Commerce Server Marketing system allows business users to create different type of visual Advertisements. You can set the type using display type property as shown below.

Out of box commerce server provides a list of display types. These display types have unique identifier associated in SQL Server. You can refer to mktg_creative_type for more details.

Display Type Id	Display Type
1	Image
2	Text
3	HTML
4	Non-Clickable Image
5	Buy Now
6	Windows Media Services
7	Left Vignette
8	Right Vignette
9	Top Vignette
10	No Display

Each display type has its own properties. For example, image display type will capture image URL and HTML display type will capture HTML. These property definitions are created in a table named mktg_creative_property. For example the template of image display type is as follows.

<!–Inserted by Microsoft Commerce Server–><A HREF = “{%RedirectUrl%}?ciid={%item_id%}&cachename={%CacheName%}&PageGroupId={%PageGroupId%}&url={%ClickUrl%}” TARGET = “{%TargetFrame%}”> <IMG SRC = “{%ImgUrl%}?CEVT={T=CAMP,CI={%item_id%},PG={%PageGroupId%},EVT=DOWNLOAD}” WIDTH = “{%Width%}” HEIGHT = “{%Height%}” BORDER = “{%Border%}” Alt = “{%AltText%}” /> </A>

If you observe the above template, you can find many place holders (text within {%%}). At runtime, before applying the template, commerce server fills the place holder with actual property values and render the text to the client. The advertisement details are stored in mktg_creative table and advertisement properties are stored in mktg_creative_property_value table.

So far we have discussed what are display types and how they are stored in SQL server. Lets see how can we create a custom display type which will render flash advertisements in the browser.

To create a new display template for Flash, you should know the formatted HTML tags to render flash objects. Identify the properties that needs input from the user. For example, the HTML tags required to render flash object is

    <!–    <OBJECT classid=”clsid:D27CDB6E-AE6D-11cf-96B8-44455354FFFF” codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0“     WIDTH=”475″ HEIGHT=”475″ id=”FlashContent”>
    <PARAM NAME=movie VALUE=”advertisement.swf”>
    <PARAM NAME=quality VALUE=high>
    <PARAM NAME=”AllowScriptAccess” VALUE=”never”>
    <EMBED src=”advdrtisment.swf”
    quality=”high” WIDTH=”550″ HEIGHT=”400″ NAME=”FlashContent” AllowScriptAccess=”never”     TYPE=”application/x-shockwave-flash” PLUGINSPAGE=”http://www.macromedia.com/go/getflashplayer”>
    </EMBED>
    </OBJECT> –>

If you observe the HTML, to make the template dynamic we should accept few properties from the user and replace these user provided values with tokens. In the above case, we can make width, height and flash URL as properties.

    <!–    <OBJECT classid=”clsid:D27CDB6E-AE6D-11cf-96B8-44455354FFFF” codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0“     WIDTH=”{%width%}” HEIGHT=”{%height%}” id=”FlashContent”>
    <PARAM NAME=movie VALUE=”{%flashURL%}”>
    <PARAM NAME=quality VALUE=high>
    <PARAM NAME=”AllowScriptAccess” VALUE=”never”>
    <EMBED src=”{%flashURL%}”
    quality=”high” WIDTH=”{%width%}” HEIGHT=”{%height%}” NAME=”FlashContent” AllowScriptAccess=”never” TYPE=”application/x-shockwave-flash” PLUGINSPAGE=”http://www.macromedia.com/go/getflashplayer”>
    </EMBED>
    </OBJECT> –>

The next step is to create display template in to marketing system.You can find the code block on msdn to create or modify the DisplayTemplate and the URL is http://msdn.microsoft.com/hi-in/library/aa545356(en-us).aspx

using System;
using System.Collections.Generic;
using System.Text;
using Microsoft.CommerceServer.Marketing;namespace CreatingNewTemplate
{
class Program
{
static void Main(string[] args)
{
try
{
string campaignServiceUrl = @http://localhost/MarketingWebService/MarketingWebService.asmx;
MarketingServiceAgent ma = new MarketingServiceAgent(campaignServiceUrl);
MarketingContext marketingSystem = MarketingContext.Create(ma);// Create a new template.
DisplayTemplate template = marketingSystem.DisplayTemplates.NewDisplayTemplate();
template.Name = “Flash”;
template.Text = @”<OBJECT classid=”"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″” codebase=”"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0″” WIDTH=”"{%width%}”" HEIGHT=”"{%height%}”" id=”"FlashContent”"><PARAM NAME=movie VALUE=”"{%flashURL%}”"><PARAM NAME=quality VALUE=high><PARAM NAME=”"AllowScriptAccess”" VALUE=”"never”"><EMBED src=”"{%flashURL%}”" quality=”"high”" WIDTH=”"{%width%}”" HEIGHT=”"{%height%}”" NAME=”"FlashContent”" AllowScriptAccess=”"never”" TYPE=”"application/x-shockwave-flash”" PLUGINSPAGE=”"http://www.macromedia.com/go/getflashplayer”"></EMBED></OBJECT> “;

DisplayProperty property = new DisplayProperty(“Width”);
property.Type = DisplayPropertyType.Text;
property.DefaultValue = “100%”;
property.Label = “Width”;
template.Properties.Add(property);

property = new DisplayProperty(“Height”);
property.Type = DisplayPropertyType.Text;
property.DefaultValue = “100%”;
property.Label = “Height”;
template.Properties.Add(property);

property = new DisplayProperty(“flashURL”);
property.Type = DisplayPropertyType.Text;
property.Label = “Flash URL”;
template.Properties.Add(property);
template.Save();

// Template Success Created!
Console.WriteLine(“Successfully created template: {0}”, template.Name);
}
catch (Exception e)
{
Console.WriteLine(e.StackTrace);
}
}
}
}

Once you have executed the above code, you can see a new display type template was added to your site and when you create a new advertisement, you will find the template “Flash” is shown in display type and when you select it then the corresponding properties are shown in the next slide as shown below.

New Display Type properties

So, what are you waiting far. Start creating different display types and make your e-commerce site flashy with different types of advertisement.

Commerce Server Blog

Creating Custom Display Types in Commerce Server

Related Articles

One Response to “Creating Custom Display Types in Commerce Server”

Leave a Reply