Adcut for Getting Rid of Inline Adverts

• Download demo project - 54.17 KB
• Download source - 13.51 KB

Introduction

Are you annoyed at banner adverts flashing away at you. We have pop up stoppers in our web browsers so why can't we have banner stoppers. This is what this article does. It creates a web browser with a cutadvert button to get rid of those annoying banner adverts on webpages. You could implement this as an banner stopper on any browser but we will be using Windows Forms, C#, VS.NET and Internet Explorer's web control to do the dirty on these adverts in a very quick, create your own browser, way.

Creating a Quick Simple Web Browser with a Microsoft's Web Control

First we need a Windows Form with a web control. You can find this by right clicking your toolbox in VS.NET and clicking add/remove items. On the tabs at the top of the customise toolbox windows that has appears, select Com components. Then scroll down till you reach Microsoft Web Browser, check the box and press ok. This adds the web browser control to the toolbox and you can now add this control to your Windows Form. If you have any problems with the steps to do with adding or working with the web control, you can see this other CodeProject article.

Resize this web control and add a single line text field for the URL address bar and a button. You should have something that looks similar to the screen shot below:

Souble click the button to get to its Click event handler and add the following code that will turn this project into a rudimentary web browser.

private void button1_Click(object sender, System.EventArgs e)
                {
                        System.Object nullObject = 0;
                        string str = "";
                        System.Object nullObjStr = str;
                        Cursor.Current = Cursors.WaitCursor;
                        axWebBrowser1.Navigate(textBox1.Text, 
				ref nullObject, ref nullObjStr,
                           ref nullObjStr, ref nullObjStr);
                        Cursor.Current = Cursors.Default;
                }

At this point, it may be wise to check if your application works. The web control should navigate to the URL in the text field when you click the button.

Introduction to Cutting Banner Adverts Out of Web Pages

How can we decide what are banner adverts and what are happy images that we would like to leave alone. Banner adverts have two major attributes; they have a certain shape and have a certain common position. This makes sense as you are less likely to have a banner advert centered in the middle of your page or have it one pixel by one pixel big.

Neilson netratings' AdRelevance service monitors a hundred or so of the web's most trafficked, popular and influential sites. In one report, they showed many different types of banner dimensions used including, micro button, half banner, full banner, etc. However they said that 95% of the sites they look at have full banner adverts, making this 468x60 banner advert truly a standard. The full report can be found here.

Wichita State University, psychology department did some interesting studies on where users expected certain items to be on a web page in which they also studied the expectation of position for banner adverts. Not surprisingly, they found the most common place was at the top of the page. We will use one of their grids as a guide for how to decide if an image in a certain area is expected to be an advert. You can find the full article here but I have included the main figure used, below.

Steps to Decide if an Image is a Banner Advert in a Webpage

1. Get Position Expectation Values
   1. Calculate image absolute position PositionX, PositionY
   2. Calculate PageHeight and PageWidth
   3. Calculate grid position
      1. GridPosHorizontal = floor(PositionX/(PageWidth/8)) - number of columns from graph above
      2. GridPosVertical = floor(PositionY/(PageHeight/7)) - number of rows from graph above
   4. Get Position Expectation Value
      1. PositionExpectationValue = LocationExpection[GridPosHorizontal][GridPosVertical] get grid value from expectation graph
2. Get Shape Expectation Values (468x60 - Full banner advertisement approx 7:1 from Neilsons netratings see paragraphs above)
   1. Get ImageHeight and ImageWidth
   2. Calculate height to width ImageSizeRatio
   3. Normalise ImageSizeRatio value between 0 and 100 to get the ShapeExpectationValue
3. Calculate Expectation of image being a banner advert
   1. If (((ShapeExpectationValue+PositionExpectationValue)/2) >= PercentageThreshold) (our threshold value), then remove banner advert
   2. If (((ShapeExpectationValue+PositionExpectationValue)/2) < PercentageThreshold) (our threshold value), then don't remove image

The Code

A second button should now be added and the following code used in its Click event handler. You will also need to change the protection level on the axWebBrowser1 object from private to public. The lookup table which describes the grid for position expectation values has been included in the event handler of the button for illustration only.

// Initialisation
   int[,]PositionExpectationLookupTable=newint[,]{{35,35,35,75,75,45,55,55},
{15,15,15,25,15,15,25,35},{15,5,15,15,15,15,15,15},
{15,5,15,15,15,5,5,25}, {15,5,5,15,15,5,15,15},{15,5,15,15,15,15,15,15},
	{15,5,15,15,15,15,15,15}};


   int PageHeight,PageWidth,ImageHeight,ImageWidth,PositionX,PositionY;
   int BodyOffSetLeft,BodyOffSetTop,GridPositionHorizontal,GridPositionVirtical;
   float ImageSizeRatio,PositionExpectationValue,ShapeExpectationValue,
	PercentageThresholdValue;
   PercentageThresholdValue=65.00f;//threshold value set to 60%
   //setsIHTMLDocument2objecttocurrentwebpageloadedinthewebcontrol
   IHTMLDocument2HTMLDocument=(IHTMLDocument2)axWebBrowser1.Document;
   BodyOffSetLeft=HTMLDocument.body.offsetLeft;
   BodyOffSetTop=HTMLDocument.body.offsetTop;

The code above sets up the expectation lookup table from the graph above and all variables needed including some from the document object model of the webpage

//Step(1)Get Position Expectation Values
   PageHeight=axWebBrowser1.Height;	//assume the web page fills 
				//the height of the whole window
   PageWidth=axWebBrowser1.Width;	//assume the web page fills the width 
				//of the whole window.
   //creates a image class that contains all of the images within the currentwebpage
   IHTMLElementCollectionImages=HTMLDocument.images;
   foreach(IHTMLImgElementelinImages)//Loop through all images in the webpage
   {
    //Cast IHTMLImgElement to IHTMLElement
    IHTMLElementEl=(IHTMLElement)el;
    //Set initial element off set from its parent element
    PositionX=El.offsetLeft;
    PositionY=El.offsetTop;
    IHTMLElementtempEl=El.offsetParent;
    //Loop through all Parent elements of the image until you reach 
    //the body element (returns null)
    while(tempEl!=null)
    {
     //Sum all off set lefts from image element to body element
     PositionX+=tempEl.offsetLeft;
     //SumalloffsetTopsfromimageelementtobodyelement
     PositionY+=tempEl.offsetTop;
     //set to next Parent Element
     tempEl=tempEl.offsetParent;
    }
    PositionX=PositionX-BodyOffSetLeft;//minus the left offsetmargin
    PositionY=PositionY-BodyOffSetTop;//minus the topoffsetmargin
    GridPositionHorizontal=(int)Math.Floor(PositionX/(PageWidth+1/8));
    GridPositionVirtical=
(int)Math.Floor(PositionY/PageHeight+1/7);
    PositionExpectationValue=
PositionExpectationLookupTable[GridPositionHorizontal,GridPositionVirtical];

The code above gets all the values necessary for step 1. The absolute positions of the images are found by summing all the offset values of the image element's parent elements. For example, add the image offset from its parent, let's say a table and the tables offset from its parent element, the body element. It stops at the body element as this has no other parent element. The grid position is found by dividing the visible web page area into a 8 by 7 grid taken from the position expectation graph above.

//Step(2)Get shape expectation values
    ImageHeight=el.height;
    ImageWidth=el.width;
    ImageSizeRatio=ImageWidth/ImageHeight;
    //Use Gaussian distribution to model ImageSizeRatio Expectation and normalise
    //ImageSizeRatio=7;
    intMean=7;
    intVariance=2;
    Exp=Math.Exp(-(((ImageSizeRatio-Mean)*
	(ImageSizeRatio-Mean))/(2*(Variance*Variance))));
    ShapeExpectationValue=(float)(Exp*100);//normalise ImageSizeRatio

The shape expectation value is a simple ratio calculation feed into a Gaussian distribution with a small variance value. This says if the imagesizeratio is very close to the banner ad imagesizeratio give it a high expectation value, otherwise give it a small to zero value.

//Step(3)Get banner add expectation value
    if(((ShapeExpectationValue+PositionExpectationValue)/2)>=PercentageThresholdValue)
    {
     el.src="";//remove banner adds src attribute
     el.alt="scr"+(int)((ShapeExpectationValue+PositionExpectationValue)/2)+"s"+
(int)ShapeExpectationValue+"p"+(int)PositionExpectationValue;
    }
    else
    {
     el.alt="thisisanimagenotabanneradd,scr:"+
	(int)((ShapeExpectationValue+PositionExpectationValue)/2)+"s"+
(int)ShapeExpectationValue+"p"+(int)PositionExpectationValue;//don't remove image
    }
   }

If the image is a banner ad it replaces the img src attribute with nothing and sets the alt text to display the total expectation value as well as the shape and position expectation values. This isn't very good for accessible content, but illustrates the point enough.

Points of Interest

This code only works with GIFs at the moment, not flash movies although the principle is exactly the same. You just need to access the element collections in a different way. There are also many more measures of expectation such as outbound links, link domain maybe, even analysis of alt text. This code could be easily adapted to encompass these other types of banner adverts.

Instead of setting the images 'src' to blank, you can use a whole host of other images. I have included some of my favorites below.

History

• 7^th January, 2006: Initial post