Omniture Site Catalyst Overview

Omniture Site catalyst is a web analytics solution that gives us a summarised overview of customer behaviours on our site.

It is implemented through javascript code executed by the browser while rendering the page. This code gathers all relevant information and sends it to Omniture’s site catalyst servers as a request for a 1×1 pixel transparent image.

Implementing Site Catalyst

Site catalyst implementation involves adding the following two components to a website:

• Adding/hosting a javascript file to the solution (this file can be taken from Omniture once an account for website tracking is created there)

• Injecting some javascript code in every page that needs to be tracked.

A sample javascript code which is injected in each tracked page is shown below (taken from www.webmetric.org).

Note: In this code, the values we give to each of the variables such as pageName, server, channel etc. is the customer information we will be collecting. For example we can give a different pageName value to each page and get individual page traffic for each of our pages.

<!-- SiteCatalyst code version: H.17.

Copyright 1997-2008 Omniture, Inc. More info available at

http://www.omniture.com -->

<script language="JavaScript" type="text/javascript" src="http://INSERT-

DOMAIN-AND-PATH-TO-CODE-HERE/s_code.js"></script>

<script language="JavaScript" type="text/javascript">

<!--

/* You may give each page an identifying name, server, and channel on

the next lines. */

s.pageName=""

s.server=""

s.channel=""

s.pageType=""

s.prop1=""

s.prop2=""

s.prop3=""

s.prop4=""

s.prop5=""

/* Conversion Variables */

s.campaign=""

s.state=""

s.zip=""

s.events=""

s.products=""

s.purchaseID=""

s.eVar1=""

s.eVar2=""

s.eVar3=""

s.eVar4=""

s.eVar5=""

/************* DO NOT ALTER ANYTHING BELOW THIS LINE ! **************/

var s_code=s.t();if(s_code)document.write(s_code)//--></script>

<script language="JavaScript" type="text/javascript"><!--

if(navigator.appVersion.indexOf('MSIE')>=0)document.write(unescape('%3C')+'\!

-'+'-')

//--></script><noscript><a href="http://www.omniture.com" title="Web

Analytics"><img

src="http://devgundersen.112.2O7.net/b/ss/devgundersen/1/H.17--NS/0"

height="1" width="1" border="0" alt="" /></a></noscript><!--/DO NOT REMOVE/-->

<!-- End SiteCatalyst code version: H.17. -->

Database connectivity using Entity Framework

Entity framework is a new concept which allows developers to code against a conceptual model (which we create ourselves) rather than coding directly against a relational schema (database). This means that developers can take a slice out of the database cake and eat it rather than having to worry about eating the whole cake as a single piece. To taste this cake, its best to create a simple application that uses entity framework to connect with a database. The following guide will help you do exactly that.

Create a new application (in this example I will be using an MVC3 application) and name it DatabaseProject. Go to the solution explorer and do the following: 

·         right click “Models”,

·         “Add ›”,

·         “New item”,

·         click “data” in the left hand tab then select “ADO.Net entity data model” and click “Add” (this will open a wizard)

·         In the wizard, click “Generate from database” and click next.

You can create a new database connection by clicking on “New connection”. It will start another wizard which will ask you for database related information (which sometimes includes the IP address of server hosting the database) and username/password. Once you have entered this information, click “Ok”.

You will now return to the original wizard where at the bottom you will have a ticked checkbox labelled “Save entity connection settings in web.config as:”. Under this label there will be a default name of “DecisionCentreEntities”. Change this is to NameofConnection for simplification. 

After changing the name click “Next”.

This will retrieve the list of all tables in the database with a checkbox next to each table. Check/tick the tables that you want in your model (or the tables that will be accessed by your code). After this, click “Finish” to exit the wizard. 

You can now see a diagram of selected tables on a white surface which should look like this (I only ticked one table but you can tick as many as you want). This is your data model:

·         In this diagram right click on the white surface and click “Add code generation item”.

·         Click “Code” in the left hand tab then select “ADO.NET Entity Object Generator” and click Add.

·         Build the project. 

Our data model is ready to use.

Go to the controller (or any other class) and run queries on the database tables using the data model you just created.

Add the following using statement on the top “using DatabaseProject.Models”.

In a simple example we will run a query (we will be using a Linq query as an example) which returns all rows from the table “customers”.

using(var db = new NameofConnection())

{

object obj = (from r in db. customers select r).ToList();

}

This code will perform the query “select * from customers” and return the result. The result will then be converted into a list which will be copied on to the object “obj”.

In another example we will run a query which will add a new row to the table “customers”.

using(var db = new NameofConnection())

{

db. customers.AddObject(row);

       db.SaveChanges();

}

With this we have now successfully tasted the cake and can use similar codes to perform other functions with our database.

RSS

RSS or Really Simple Syndication is a format used to organise content which can then be published or sent to different data consumers. For simplicity we will assume our content to be an article. When converting our article into RSS 2.0 format (which is what we will focus on) we have to create an XML file (XML version 1.0) and add certain elements to it. Once this is done, our document is ready.

There are two main components of an RSS file, the channel and item. To understand these components we have to consider an example of a newspaper. It has several articles, some grouped under the sports section, some grouped under finance section and so on.

The RSS feed which publishes these news articles will have a channel named sports and each sport article will be an item under this channel and we will have a similar channel for finance and all other sections.

With this scenario in mind, lets create our very own RSS feed to publish articles. In the example below we will be publishing two articles under the sports section and one under finance by a magazine called Magazine100. This is how our overall RSS feed would look like:

<rss version="2.0">

<channel>                         

<title>Sports</title>

<link>http://www.magazine100.com/sports</link>

<description>Sports news by magazine100</description>

<item>                

<title>cricket updates</title>

<description>Here you can paste the entire article</description>                           

</item>

<item>                

<title>football updates</title>

<description>Here you can paste the entire article</description>                           

</item>              

</channel>

<channel>         

<title>Finance</title>

<link>http://www.magazine100.com/finance</link>

<description>Finance news by magazine100</description>

               

<item>                

<title>wall street updates</title>

<description>Here you can paste the entire article</description>                           

</item>

</channel>

</rss>

As you can see at the top level we have <rss version="2.0">. This is a mandatory attribute that specifies the version that this document conforms to.

We then have a channel which is described by the tags <title>, <link> and <description>. These tags are mandatory for each channel, however if we feel the need to describe our channel further, there are several additional tags that we can use. You can get a list of these tags from here.

After channel, we have an item tag which uses <title> and <description> to publish the content of an article. For an item, it is mandatory to have at least one of these two fields (title and description), and similar to a channel, an item can also be further described using optional tags. You can get a list of these tags from here.

The problem with an item is that you do not have a tag to attach pictures. However this can be done if we use the following html within the content of the "description" tag:

<img src="[location of image]" alt="[alternate text]" title="[title of image]" />.

This code will place the image within the content of our article and solve our biggest headache (at least for me it was).

CSS for beginners

If we want to style any control in an html page (by control I mean textboxes, labels and all other html elements that can be displayed in an html page), we can easily do it using the style property. For example if we have the following heading:

<h2> Heading </h2>

And we wish to change its colour to green and make it italic, we can easily do so using the style property as shown below:

<h2 style="color: green; font-style: italic;"> Heading </h2>

Similarly, we can use a range of properties to stylize any control we want. However, this is not a very good programming practise. If we want to stylise our controls in a way that makes our styles more re-useable, we need to do it in the following way:

On top of the page we need to write the following code to make a style class with any name we want (in this example I have used the name MyHeading).

<style>

        .MyHeading

        {

            color: Green;  

            font-style: italic;

        }

</style>

Then in our html we can write the following code:

<h2 class="MyHeading"> Heading </h2>

With this code we will be achieving exactly the same result as above with the added benefit of code re-use in other places such as:

<p class="Myheading">This is a paragraph</p>

In this approach, we are using a style class to style our page. This can be a good approach to style a page; however we can go one step further by using a cascading style sheet.

Cascading style sheets (or CSS) allow us to create a “.css” file containing many style classes. This css file can then be attached with any webpage giving it access to all its style classes.

 To attach a css file to an html page, we need to write the following line on top of the webpage (above its html code):

<link rel="Stylesheet" type="text/css" href="/Location/File.css" />

In the css file, we need to write the following code to create a style class:

.MyHeading

{

      color: Green;  

      font-style: italic;

}

After this, we can use any class from the css file to style the controls of our page. The benefit of using this approach is that css files allow us to use the same style sheet throughout our website, and ensure a consistent layout across all pages, thus allowing maximum code re-use.

Returning XML from MVC Controller Action

To return xml from a mvc controller action we can use the following code:

public XmlElement name_of_function()
{
      XmlDocument Feed = new XmlDocument();
      XmlWriter Write = Feed.CreateNavigator().AppendChild();

      Write.WriteStartDocument();
      Write.WriteStartElement("head");
      Write.WriteElementString("name_of_tag", "value");
      Write.WriteEndElement();
      Write.WriteEndDocument();

      Write.Flush();
      Write.Close()

      return Feed.DocumentElement;
}

Using ASP.NET Webform in an MVC controller

In ASP.NET MVC we use controller actions to call views using the following code:

public ActionResult NameOfView()
{
return View();
}

or if we want to pass a view model to it:

public ActionResult NameOfView(model ViewModel)
{
return View(ViewModel);
}

Through this code, the view "NameOfView", placed in the folder "Views", will be displayed (in the second instance the view model will be passed to it as an input parameter).
However if we want to work with an ASP.NET view which is NOT in the folder "Views" but is instead located at "Abc/Def/page.aspx", we can change our controller slightly to accommodate this view. To do this, we can use the following code:

public ActionResult NameOfView()
{
return View("~Abc/Def/page.aspx");
}

or if we want to pass a view model to it:

public ActionResult NameOfView(model ViewModel)
{
return View("~Abc/Def/page.aspx", ViewModel);
}

Adding jQuery to an MVC view

To add jQuery code in an MVC view, we need to write its code in the head section of the view. The example below shows simple jQuery code written in an MVC view.

<head>

<script type="text/javascript">

$(document).ready(function ()

{

// here we can write any javascript code that will be executed as soon as the page loads  

// If we have a dropdown in our page, named as "xyz", and need to write code that executes when it's value is changed to "1", we could do the following:

$('#xyz').change(function ()

{

if ($('#xyz').val() == "1")

{

// over here we can write code that will execute when the value "1" is selected in the dropdown "xyz"

}

else if ($('#xyz').val() == "2")

{

// over here we can write code that will execute when the value "2" is selected in the dropdown "xyz"                

}

});

});

</script>

 <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

</head>