The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.
In this short article I will go over the process of creating a custom Sitefinity module that allows you to promote different products on your website. The module will enable your marketing team to manage new product promotions from a single place without the support of web developers. The promotion will be shown randomly on pages and you will be able to track the performance of each banner directly in your Google Analytics account.
For the purpose of this task I will use the new Module Builder part of Sitefinity 4.4 which allows you to build dynamic content straight from the UI. The module will be built on top of the Quantum website that runs on Sitefinity, and will showcase how you can promote 2 laptops sold on the website.
To view the complete example in action, go to: http://corporatetest.sandbox.sitefinity.com/
If you want to follow this article step by step you can setup your free online sandbox of the Quantum website in a couple of minutes. Once you have completed the instructions from the website, you will be able to login in the backend of Sitefinity and land on its dashboard:
One of the biggest extensibility points of Sitefinity is its ability to define new data structures from the UI that come with built-in workflow system, permissions, search and feeds. In order to create your own module navigate to the Administration->Module Builder page and click the Create a module button. For the purpose of this demo we will name our custom module “Promotions” and its content type “Promo”. The content type will represent our banner promotion that will have a name, summary, image, category and URL fields. In Sitefinity you can choose from a set of build-in fields such as short text, long text, media item (video, image, file), category, number, yes/no field, and a choice field that represent the components of your content type. Below are the fields and their types along with a short example on how we are going to use them in the module itself. Enter the fields along with the relevant field type and click Finish.
Field Name | Field Type | Purpose |
Name | Short text - required | The name of your promotion e.g. Discounted books |
Summary
| Long text – Text area | Text for your promotion e.g. The promotion is available for new customers only. |
Banner | Image | The banner/advertisement for your promotion |
Categories | Categories | The category for your item so that you can group and show similar banners e.g. Christmas Banners |
PromoURL | Short text | The URL of your banner e.g. http://www.telerik.com/purchase |
Once you click Finish and activate your module, Sitefinity will create your module based and place in the menu under Content->Promotions path.
Click on the “Create a promo item” button and start enter the following two promotions:
Title: Discounted Magnon laptop for new customers
Summary: The discount is available for new customers only.
Category: Laptop Promotions
PromoURL: The absolute URL
Title: Discounted Photon laptop for new customers
Summary: The discount is available for new customers only.
Category: Laptop Promotions
PromoURL: The absolute URL
Now we have to show the promotions on the public site. To create your first page, navigate to the Pages section of Sitefinity where you have control over the sitemap of your website, and open the Home page. You can find your Promos widget in the page toolbox which was automatically generated by the Module Builder for you.
The Promos widget allows you to display all published promotions part of your Promotions module. For the purpose of this demo we will filter only the promotions part of the “Laptop promotions” category by clicking on Edit button of the widget and selecting Selection of promotions->By Categories-> Laptop Promotions. Now the widget will display all promotions listed in an ASP.NET list view.
Since we want to show only one promotion at a time in the next step we will modify the template of the widget and will add a small javascript to show randomly one of the banners. We will also make the image field an actual link that redirects to the PromoURL we have created above.
In order to edit the existing list template of the widget you can click to Edit->List Settings-> Edit Selected Template which will open the aspx template in a our Widget Template editor.
First we will modify the item template of the list view, so that our listed item has a class “banner”, and we will make the image field to be a link pointing to the PromoURL. Note that by default we will also hide all items with the style attribute.
<
ItemTemplate
>
<
li
class
=
"banner"
style
=
"display: none;"
>
<
h3
class
=
"sfitemTitle"
/>
<
a
href
=
"<%# Eval("
PromoURL")%>">
<
sf:AssetsField
runat
=
"server"
DataFieldName
=
"Banner"
/>
</
a
>
<
a
style
=
"font-size: 13px;font-weight: normal;"
><%# Eval("Summary")%></
a
>
</
li
>
</
ItemTemplate
>
<script type=
"text/javascript"
>
$(document).ready(
function
(){
var
ran_number = Math.floor(Math.random()*$(
".banner"
).length);
$(
".banner"
).eq(ran_number).show();
});
</script>
If you save and publish your web page, the widget will show randomly your banner to the user with a link to the PromoURL.
If you want to keep track of the performance of the banners and compare their conversion rates you can achieve that by further modifying the widget template to register a virtual pageview with Google Analytics. You can also track the performance of the banner within Sitefinity using its built-in Analytics module that works in full sync with Google Analytics.
Open the Home Page and Edit the Promos widget. Click on Edit->List Settings-> Edit Selected Template and include a small change in the javascript widget in the Widget Template editor.
Note: It is a prerequisite to include a Google Tracking code on your page, and to replace the UA-XXXXX-X with your actual tracking code provided by Google.
<script type=
"text/javascript"
>
$(document).ready(
function
(){
var
ran_number = Math.floor(Math.random()*$(
".banner"
).length);
$(
".banner"
).eq(ran_number).show();
$(
".test"
).click(
function
(event){
var
pageTracker = _gat._getTracker(
'UA-XXXXX-X'
);
pageTracker._trackPageview(
'/view/'
);
});
});
</script>
<%@ Control Language="C#" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit" Assembly="Telerik.Sitefinity" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" Assembly="Telerik.Sitefinity" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.Comments" Assembly="Telerik.Sitefinity" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.Fields" Assembly="Telerik.Sitefinity" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<
script
type
=
"text/javascript"
>
$(document).ready(function(){
var ran_number = Math.floor(Math.random()*$(".banner").length);
$(".banner").eq(ran_number).show();
$(".test").click(function(event){
var pageTracker = _gat._getTracker('UA-XXXXX-X');
pageTracker._trackPageview('/view/');
});
});
</
script
>
<
telerik:RadListView
ID
=
"dynamicContentListView"
ItemPlaceholderID
=
"ItemsContainer"
runat
=
"server"
EnableEmbeddedSkins
=
"false"
EnableEmbeddedBaseStylesheet
=
"false"
>
<
LayoutTemplate
>
<
ul
class
=
"sfitemsList sfitemsListTitleDateTmb"
>
<
asp:PlaceHolder
ID
=
"ItemsContainer"
runat
=
"server"
/>
</
ul
>
</
LayoutTemplate
>
<
ItemTemplate
>
<
li
class
=
"banner"
style
=
"display: none;"
>
<
h3
class
=
"sfitemTitle"
/>
<
a
href
=
"<%# Eval("
PromoURL")%>">
<
sf:AssetsField
runat
=
"server"
DataFieldName
=
"Banner"
/>
</
a
>
<
a
style
=
"font-size: 13px;font-weight: normal;"
><%# Eval("Summary")%></
a
>
</
li
>
</
ItemTemplate
>
</
telerik:RadListView
>
<
sf:Pager
id
=
"pager"
runat
=
"server"
></
sf:Pager
>
Sitefinity has a vast number of built-in features that can make your custom modules created by the Module Builder really fit all kind of scenarios. Below is a short-list of things that you can do in the context of the Promotions module by relying on other features of Sitefinity not showcased in this article.
You can use the robust Publishing System of Sitefinity to create a dedicated RSS feed for your promotions. The RSS feed will be in constant synchronization with your actual content without the need to maintain it.
You can also associate your corporate Twitter account to push Twitter updates about your latest promotions and campaigns available on the website without the need to write code or maintain it.
Sitefinity has a number of built-in approval workflows that are used for content approval before publishing, so that your marketing director can review the promotions before they are live.
View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.
Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.
Learn MoreSubscribe to get all the news, info and tutorials you need to build better business apps and sites
Progress collects the Personal Information set out in our Privacy Policy and the Supplemental Privacy notice for residents of California and other US States and uses it for the purposes stated in that policy.
You can also ask us not to share your Personal Information to third parties here: Do Not Sell or Share My Info
We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.
Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.