Ad Component

Ad Component

What is the Ad Component actually do?

Banner advertising on websites is the largest revenue source for sites that are not membership fee-based. This component was built to be minimal in functions, but still powerful enough to get the job done.  It incorporates a client and an ad database.

The objective is to deliver the banner ad to predefined areas of the template without consuming large amounts of resources that would slow down the loading times. At the same time, high-quality images should be delivered that take into consideration the size of the display and also newer retina screens.

Prebuilt Elements and Components: The problems that had to be overcome were designing positions that looked good on a mobile devices (phones and tablets) and also on larger display areas. Also, banner ad components are generally resource intensive due to additional javascript and unnecessary functionality.

Timber-Boot’s ad component reached these objectives by gathering statistical data on the “click-through” ratio based upon the device and position of the advertisement. You can have additional ad positions customized into your theme or move the current positions.

The positions that are included are:

“Top Header Fixed” – above the header menu
“Bottom Footer Fixed” – at the bottom of the screen.
“Above Content” – before the article begins.
“Below Content” – after the article ends.

On mobile devices (phones and tablets) the “Top/Bottom Fixed” ads were designed to be at 50px in height and width of the screen at 100%.

This means that 7 different banner images had to be designed for the “Top/Bottom Fixed “position. This may seem extreme, but 7 different ad sizes would accommodate over 95% of the mobile devices and all laptops and desktops without having to resize the image on the mobile devices with the possibility of losing the important contrast of such a small ad.

The “Above/Below Content” only required 4 different add sizes to accommodate mobile devices, laptops, and desktop displays.

Ad banners that are uploaded in the Admin Interface are required to be 2x the size of the actual ads to accommodate retina displays.

The image delivery system is handled by Timber-Boot’s built-in image optimization component, which you can read about here.

Optimized for Speed: The Ad Component was designed without adding any additional javascript to the theme. It also used ACF (Advanced Custom Fields) for handling the image storage and the component settings. Combine this with the built image optimization component in the template, and you have a minimal amount of additional resources being used to deliver banner ads.

Admin Interface: The admin console has full control of the settings for the Ad Component. On a global level, it controls the ad positions to activate and the banner to deliver to that position, along with the URL to redirect to when the banner is clicked.

You can override all of the global settings on each post and or page with localized settings. This means activating or deactivating an ad position, change the banner delivered, or even completely turn off all banner ads on that page or post.