More in this section
Categories
Bloggers
Blogs RSS feed

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

by User Not Found

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.

46 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
  3. jenny Apr 11, 2018
    This is the website that you know can be the best way to sims mobile cheats 
  4. online marketing agency May 19, 2018
    Youre so cool! I dont suppose Ive read anything in this way just before. So nice to seek out somebody by original ideas on this subject. realy we appreciate you starting this up. this excellent website is one area that is required on the internet, somebody with a little originality. helpful problem for bringing a new challenge on the internet! online marketing agency
  5. Patches May 21, 2018
    The next time I read a blog, I hope that it doesnt disappoint me as much as this one. I imply, I know it was my option to learn, however I actually thought youd have something fascinating to say. All I hear is a bunch of whining about something that you might repair in case you werent too busy searching for attention. Patches
  6. بهترین وکیل ملکی May 21, 2018
    Well done! I thank you your contribution to this matter. It has been useful. my blog: exercise to reduce tummy بهترین وکیل ملکی
  7. Little Singham Games May 22, 2018
    Hello! I just would want to supply a huge thumbs up for your great info you may have here on this post. I will be coming back to your blog post for more soon. Little Singham Games
  8. spartagen xt May 24, 2018
    Spartagen XT is made with potent organic and herbal extracts that help boost* testosterone levels. It works to support fat burning that leads to low calorie and cholesterol levels in the body while supporting body growth.spartagen xt
  9. netpro patches May 25, 2018
    we present Quality Patches.Visit Website netpro patches
  10. Winning Seven May 28, 2018
    i would say that Lion King is one of the best animated films that i have ever watched, Winning Seven
  11. Challan 280 May 28, 2018
    Intimately, the post is in reality the greatest on this worthy topic. I fit in with your conclusions and also will thirstily look forward to your forthcoming updates. Saying thanks definitely will not simply be sufficient, for the amazing lucidity in your writing. I will certainly perfect away grab your rss feed to stay privy of any kind of updates. Authentic work and also much success in your business endeavors! Challan 280
  12. Rupees May 28, 2018
    For example, develop suppliers have worked with the Meals & Drug Administration (FDA) to make sure that the marketplace specifications developed consequence in the ideal and most effective processes. And to communicate any public announcements, the marketplace has created relationships with associations like the National Grocer’s Association (NGA). Rupees
  13. طراحی جلد کتاب May 28, 2018
    Well, this Thursday I read through a couple of your posts. I must say this is one of your better ones.  Have a nice day! طراحی جلد کتاب
  14. daftar judi poker Jun 01, 2018
    On a positive note there were some funny lines in the screenplay, most of them were from Marvin Boggs. daftar judi poker
  15. locuri de munca in uk Jun 02, 2018
    Can I just now say exactly what a relief to uncover one who truly knows what theyre preaching about online. You definitely understand how to bring a challenge to light making it crucial. Lots more people ought to check this out and understand this side of the story. I cant think youre not more well-known simply because you definitely have the gift. locuri de munca in uk
  16. go to mailbanger.com Jun 02, 2018
    You should take part in a contest personally of the highest quality blogs on the internet. I’ll recommend this great site! go to mailbanger.com
  17. check over here Jun 04, 2018
    I’ve read much confusing information on this topic and have been disappointed in the content.  Your article makes this information clear and easy to understand. check over here
  18. 토토사이트  Jun 05, 2018
    Perfect work  you have done, this  site is really cool with good   information. 토토사이트 
  19. Airco Jun 05, 2018
    It’s not that I want to duplicate your website, but I really like the layout. Could you tell me which theme are you using? Or was it custom made? Airco
  20. جستجوی وکیل Jun 06, 2018
    Aw, it was a very good post. In idea I would like to devote writing such as this furthermore,?¡ìC spending time and specific work to produce a great article?- nonetheless so what can I say?- I waste time alot and never at all seem to obtain one thing completed. جستجوی وکیل
  21. corporate services Jun 06, 2018
    An fascinating dialogue is value comment. I feel that it’s best to write extra on this matter, it may not be a taboo topic however usually people are not enough to speak on such topics. To the next. Cheers corporate services
  22. WP Freshstart 5 Jun 07, 2018
    I would like to thnkx for the efforts you have put in writing this blog. I am hoping the same high-grade website post from you in the upcoming also. In fact your creative writing abilities has inspired me to get my own website now. Actually the blogging is spreading its wings fast. Your write up is a good example of it. WP Freshstart 5
  23. WP Freshstart 5 Jun 07, 2018
    I would like to thnkx for the efforts you have put in writing this blog. I am hoping the same high-grade website post from you in the upcoming also. In fact your creative writing abilities has inspired me to get my own website now. Actually the blogging is spreading its wings fast. Your write up is a good example of it. WP Freshstart 5
  24. mcaffe internet security Jun 07, 2018
    Cool sites… [...]we came across a cool site that you might enjoy. Take a look if you want[...]…… mcaffe internet security
  25. ukrayna üniversitesi ücretleri Jun 07, 2018
    nail on the head. Your concept is excellent; the difficulty is something that not sufficient people are speaking intelligently about. I am very blissful ukrayna üniversitesi ücretleri
  26. myfitweb gryyy Jun 08, 2018
    You made some decent points there. I looked on the internet for that problem and located most people will go in addition to with the web site. myfitweb gryyy
  27. house cleaning tuscaloosa Jun 11, 2018
    Normally I do not read article on blogs, but I wish to say that this write-up very forced me to try and do so!   Your writing style has been surprised me. Thanks, quite nice article. house cleaning tuscaloosa
  28. top server cccam Jun 12, 2018
    I  genuinely  prize  your work , Great post. top server cccam
  29. Kurk gevelbekleding Jun 12, 2018
    There are some fascinating deadlines in this article but I don?t know if I see all of them center to heart. There may be some validity but I will take maintain opinion till I look into it further. Good article , thanks and we want extra! Added to FeedBurner as nicely Kurk gevelbekleding
  30. Exclusief zwembad Jun 12, 2018
    sometimes you got to taper down on playing too much compter games coz it is quite addictive;; Exclusief zwembad
  31. menù originali  Jun 12, 2018
    I really appreciate this post. I have been looking all over for this! Thank goodness I found it on Bing. You have made my day! Thank you again! menù originali
  32. i want to start a security guard business Jun 13, 2018
    A security company is a good option for a mid-career change, i want to start a security guard business
  33. car service hamptons Jun 13, 2018
    it provides 24 hour transportation, makes business travel arrangements, offers transportation for trade shows and conventions, and takes care of all your travel needs related to corporate meetings and events. car service hamptons
  34. get free samples Jun 13, 2018
    The site says it updates every twenty-four hours so you can have the most updated access to free samples and other free items. get free samples
  35. buy optimization service Jun 13, 2018
    it put your website at a higher position in the search engine rankings buy optimization service
  36. แทงบอลฟรี Jun 13, 2018
    Another wonderful publish on running a blog! Thanks so much to take time to share a person information and wisdom along with other writers. แทงบอลฟรี
  37. Iran Team Squad For Fifa World Cup 2018 Jun 20, 2018
    Good info. I just discovered your website and had to let you know that I have actually enjoyed looking through the blog. I have became a subscriber to your blog feed and I hope you will post again soon. I am curious if I should really subscribe to comments RSS feed as well. Any helpful discussions taking place in posts comments? Iran Team Squad For Fifa World Cup 2018
  38. learn mandarin sydney Jun 20, 2018
    I  believe  other website  proprietors should take this  web site  as an  model, very clean and good  user friendly   style . learn mandarin sydney
  39. abuse Jun 21, 2018
    Thanks , I’ve recently been searching for info approximately this subject for a long time and yours is the greatest I have discovered so far. But, what concerning the conclusion? Are you sure in regards to the source? abuse
  40. cá kho ở làng vũ đại Jun 21, 2018
    I have been exploring for a little for any high quality articles or blog posts on this kind of area . Exploring in Yahoo I at last stumbled upon this web site. Reading this info So i’m happy to convey that I have an incredibly good uncanny feeling I discovered exactly what I needed. I most certainly will make certain to do not forget this site and give it a glance on a constant basis. cá kho ở làng vũ đại
  41. internet marketing santa ana Jun 21, 2018
    I am typically to blogging and i really respect your content. The article has actually peaks my interest. I am going to bookmark your site and preserve checking for brand new information. internet marketing santa ana
  42. مشاور حقوقی Jun 23, 2018
    The article posted was very informative and useful. You people are doing a great job. Keep going. مشاور حقوقی
  43. www.agent-kr.com Jun 23, 2018
    very good post, i certainly really like this excellent website, keep on it www.agent-kr.com
  44. www.facebook.com/public/Alexander-Mirza Jun 23, 2018
    Hi! I just wanted to ask if you ever have any issues with hackers? My last blog (wordpress) was hacked and I ended up losing many months of hard work due to no backup. Do you have any methods to stop hackers? www.facebook.com/public/Alexander-Mirza
  45. singapore jersey printing services Jun 25, 2018
    beach houses are really nice and it would always be a warm and relaxing place’ singapore jersey printing services
  46. electricity generation methods Jun 27, 2018
    An electric power plant utilizes a turbine or comparative machine to drive these sorts of generators. ... In 2016, around 65% of aggregate U.S. power age was from steam turbines that utilization biomass, coal, geothermal vitality, petroleum gas, atomic vitality, and sun based warm vitality. electricity gener electricity generation methods ation methods

    Leave a comment