Customizing Banner Ads in WebSphere Commerce

One of the cool features WebSphere Commerce added last year were banner ads that hover above the product image in category lists or search results. Here is an example banner ad for the IsNew attribute and how it currently shows on the product image:

Screen Shot 2015-12-16 at 10.06.34 PM

If you inspect the banner ad element you will see this in the inspector for the HTML div:

Screen Shot 2015-12-16 at 10.08.15 PM

Notice it has two classes associated with it. It applies the default value RibbonAdDefault and also automatically puts in another class with the same name as the attribute, in this case, IsNew. Since I just created this attribute it, is using the RibbonAdDefault class because I have not created an IsNew class.

The RibbonAdDefault css is the following:

.product_image .RibbonAdDefault {
 position:absolute;
 bottom:40px;
 left:0;
 width:110px;
 height:20px;
 background-color:#2C2C2C;
 background: -webkit-gradient(linear, left top, right top, color-stop(0.76, rgba(68, 68, 68, 1)), color-stop(1, rgba(255, 255, 255, 0)));
 background: linear-gradient(to right, rgba(68, 68, 68, 1) 76%, rgba(255, 255, 255, 0) 100%);
 -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(gradientType=1, startColorStr='#FF444444', endColorStr='#00FFFFFF')";
 zoom: 1;
 font-size: 14px;
 line-height:20px;
 font-family: arial, Helvetica, sans-serif;
 color:#FFF;
 padding-left:10px;
 border-radius:3px;
 text-align:left;
 vertical-align:baseline;
 overflow:visible;
 white-space: nowrap;
}

What we are going to do is override this with our new CSS specifying the IsNew attribute. We are also going to change the position and have it be an image with no text. Here is the new CSS for the IsNew attribute:

.product_image .IsNew {
 position:absolute;
 display: block;
 top:10px;
 left:0;
 width:60px;
 height:60px;
 background-color:#2C2C2C;
 background: url("../images/new-icon.png") no-repeat;
 zoom: 1;
 font-size: 0px;
 line-height:20px;
 font-family: arial, Helvetica, sans-serif;
 color:#FFF;
 padding-left:10px;
 border-radius:3px;
 text-align:left;
 vertical-align:baseline;
 overflow:visible;
 white-space: nowrap;
}

This gives us an end results with the follow image:

Screen Shot 2015-12-16 at 10.18.18 PM

Notice since I made the font-size zero pixels. This is essentially making it so there is no text and it ends up just being the image.

Watch the video below to see me implement this:

Advertisements

Results for poll: Have you ever clicked on a FB advertisement?

Very interesting results, it is pretty close to what I had expected. You can view the poll results on LinkedIn here.

Promoted Facebook Post Results

Last week I promoted a post on Facebook just to see what it did. According to Facebook my advertising results “are in” and as you can see below the post received 99% more paid views than “regular” views – I have no way of validating that by the way. I guess that means 99% of the views were from it being in the right side bar and only 1% of the views were in the regular feed.

Some observations, almost everyone that replied to the thread didn’t even see the post in the right bar or in their feed in the first few hours. It makes me wonder how many people actually see any of my posts. I think the $7 ad fee was worth learning how it works, however I think that is a bit high. I also think I should have received a message or something that the results were in. I had to go search in help and find out how to get the results, which was even more disturbing. The directions told me I had to go to my feed, find the post and look at the results. This really should be somewhere under my page (at the top) or in my account screen. I shouldn’t have to go look for the original post. What if I want to compare to another post results?

My own stats show the post has had 53 hits in about 5 days and only 3 click referrals came from FB. I actually don’t get a lot of clicks from FB because my friends on FB don’t really care about my technical blog.

Some things I could have done better:

  1. Have a more catchy title.
  2. Had an image in the post.
  3. Posted or promoted on a Monday.

Those are the most obvious ones I can think of, not sure if anyone else has any other ideas. I really wanted to see what a basic post would generate and the results were not really that good. Now, I am going to test another post with an image and a catchy title. Let’s see what results that will bring. More to follow.

Rotating the free partner ads

So I got some immediate attention about yesterdays post about placing free ads for business partner products on my blog. I gave it some more thought and tonight I designed a basic rotation system based on the hour of the day. Currently the ads will rotate every hour or every several hours – it just depends on how many ads I will be displaying. The more I get the more the algorithm will be enhanced to give everyone a fair share. So currently, if you sent me your ads you should see them at least once a day and possibly for several hours. I may even set up a nice little animated slide show (similar to my post slide show at the top of the site) of the ads so it rotates through the list and changing the order each hour, we will see.

Free advertising on this site for IBM business partners!

After yesterdays post about removing advertisements on this site I decided to go one step further. I will post any advertisement from an IBM or Lotus business partner on this site for free. If I get more than one company putting an ad on this site then they will simply rotate randomly.

So if you want an ad on this site in the top banner and in the single posts then send me the ad information. It needs to be in banner size (468×60) and it should be just a GIF or any other bitmap. The click will also go to the URL of your choice.

I do however reserve the right to reject an advertisement or remove the ads any time. Go ahead and email me at bob [at] balfes.net if interested!

I’ve got no ads on me!

Make sure you sing the title like the Pinocchio song…”I’ve got no strings on me”.

So for the last year I had tried ads on this blog. I figured hey, if I could get something for delivering content to my readers and get a following it may work out in the end to pay for the site fees. So what are the results? Well, with a daily average of almost 400 hits a day for the past year the net results were $8.64! I have found many of the ads offensive and not relevant to my site, even though I filled out profiles for each ad space there always seem to be that “Find a Sexy Russian” ad on the site.

So in short, I have removed all ads from this site. I think its a good thing and I am sure my readers would agree.

New advertisement income paid by Facebook soon?

This is an interesting concept and the first thing I thought of is advertisers paying people to tag their products in pictures. This would be similar to a publishing fee for blogs and sites that use things like Google Ads or Adbrite.

Could the casual Facebook user be making money in the future???

Tag Pages in Facebook photos – CNN.com.

I really can not stand this!

Does anyone else hate this new collapsing block of advertisements you see on some sites now?  The ad initially expands and pushes the content of the article down the page and you either wait for it to disappear (scroll back up) or click the close button.  This has got to be the most annoying advertisement method I have ever seen on the web!  I actually get extremely annoyed daily on one of my favorite sites:, InfoWorld.  I am sure some marketing person thought this was a great idea.  I for one absolutely hate it.  Put your ads on the top, the side, or throughout.  I don’t care.  Just don’t make blocks scrolling around uncontrollably.