+1-888-365-2779
Try Now
More in this section
Categories
Bloggers
Blogs RSS feed

Extend your website to handle product promotions with 8 lines of JavaScript

by Hristo Borisov

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.

Quantum with promotions
To view the complete example in action, go to: http://corporatetest.sandbox.sitefinity.com/ 

Setup the environment

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:

Dashboard

Create the back-end management of the banners

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


Promotion fields

Once you click Finish and activate your module, Sitefinity will create your module based and place in the menu under Content->Promotions path. 

Create a promo

Enter your promotions

Click on the “Create a promo item” button and start enter the following two promotions:

Magnon banner 

Title: Discounted Magnon laptop for new customers
Summary: The discount is available for new customers only.
Category: Laptop Promotions
PromoURL: The absolute URL 

Photon banner 

Title: Discounted Photon laptop for new customers
Summary: The discount is available for new customers only.
Category: Laptop Promotions
PromoURL: The absolute URL  

Show the banners on your homepage


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.

Modify the template using the built-in template editor


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>

Second include a small javascript in the beginning of your template that will randomly show one of the banners.

<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.

Track performance

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>

 Google will now keep track of the number of clicks on each banner and will allow you to better understand the performance of each banner. 

Your final widget template

<%@ 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>

Further use


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. 

Create an RSS feed


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.

Create a Twitter feed


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. 

Use workflow to approve banners

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.

2 comments

Leave a comment
  1. Dan Sorensen Mar 02, 2012
    This looks like it is randomizing on the client side. If I were to have a large number of items to choose from, that could be a lot of unnecessary HTML loaded to the client. Is there a way to randomize from the module on the server side instead?
  2. Hristo Borisov Mar 05, 2012
    Hey Dan,

    You can use the following code snippet to get the collection of Promo items on the server-side:

    // Demonstrates how Promo content items can be retrieved through filtering
    public void RetrievePromoThroughFiltering()
    {
        DynamicModuleManager dynamicModuleManager = DynamicModuleManager.GetManager();
        Type promoType = TypeResolutionService.ResolveType("Telerik.Sitefinity.DynamicTypes.Model.Promotions.Promo");
        CreatePromoItem(dynamicModuleManager, promoType);
                 
        // This is how we get the promo items through filtering
        var myFilteredCollection = dynamicModuleManager.GetDataItems(promoType).Where("UrlName = \"Some UrlName\"");
        // At this point myFilteredCollection contains the items that match the lambda expression passed to the Where extension method
        // If you want only the first matching element you can freely get it by ".First()" extension method like this:
        // var myFirstFilteredItem = myFilteredCollection.First();
    }

    However, you will have to create your own widget that uses the logic above and register it in the toolbox, so that you can reuse across the Sitefinity pages.

    Thanks,
    Hristo

    Leave a comment