Click here to Skip to main content
Click here to Skip to main content

Adcut for Getting Rid of Inline Adverts

, 7 Jan 2006
Rate this:
Please Sign up or sign in to vote.
An article on building a webbrowser with added inline advert remover
Screen shot of application

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

  • 7th January, 2006: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

ChrisMitchell_
Web Developer
United Kingdom United Kingdom
Chris is a PhD research student working on machine learning in the area of music information systems. His current incarnation lecturers and researches at Anglia Ruskin University as part of the Audio music technology pathway. He has published in journals and has worked as a network consultant to finance his research. He entered the world of windows programming while writing a piece of software for music genre recognition. A passion for music technology has lead him to explore some of the fundamentals of audio programming.

Comments and Discussions

 
GeneralTools that cut out inline adverts PinmemberSvenRieke7-Jan-06 22:17 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 7 Jan 2006
Article Copyright 2006 by ChrisMitchell_
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid