How to Use Chitika Ads on Responsive Websites

Right now Chitika has  not officially approved Responsive Design and what that means is you can not serve Chitika ads of varying dimensions corresponding to the viewport size /screen resolution of the visitor’s device.

For better user experience responsive ads must be implemented on your website because it will show different ads size banners according to visitors device screen size.and it will make  more possibility to clicked by user.

You can serve responsive Chitika ads in default java script provided with some little changes. The latter is a more efficient and recommended method as the JavaScript ad code loads in parallel and therefore does not block the other elements of the web page from rendering. In other words, your pages will load faster improving user experience.

How to Generate Responsive Ads

Open your dashboard and under Dashboard , click “Ads>>Get code.” Set any random size like 550x250t” and click the “ Get Code” button to generate the JavaScript code for your Responsive ad. The default code is something like this:

<script type="text/javascript">
  ( function() {
    if (window.CHITIKA === undefined) { window.CHITIKA = { 'units' : [] }; };
    var unit = {"publisher":"YOur User Name","width":550,"height":250,"sid":"Chitika Default"};
    var placement_id = window.CHITIKA.units.length;
    window.CHITIKA.units.push(unit);
    document.write('<div id="chitikaAdBlock-' + placement_id + '">
</div>
');
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = '//cdn.chitika.net/getads.js';
    try { document.getElementsByTagName('head')[0].appendChild(s); } catch(e) { document.write(s.outerHTML); }
}());
</script>

computes the default width and renders the ad that you will choosen. This may not always be the most appropriate approach since the best performing ads are rectangles and skyscrapers and not necessarily the leaderboards.

There is however an option to force the ad unit to always serve the rectangle or the skyscraper. You can change the value of the data-ad-format variable in the JavaScript code from “auto” to “rectangle” and it will always serve one of the rectangular formats. Similarly, you can set data-ad-format to “vertical” to always render a 120×600 or 160×600 rectangle. The modified ad code would be:

<script type="text/javascript">
  ( function() {
    if (window.CHITIKA === undefined) { window.CHITIKA = { 'units' : [] }; };
    var unit = {"publisher":"YOur User Name","width":550,"height":250,"sid":"Chitika Default"};
    var placement_id = window.CHITIKA.units.length;
    window.CHITIKA.units.push(unit);
    document.write('<div id="chitikaAdBlock-' + placement_id + '">
</div>
');
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = '//cdn.chitika.net/getads.js';
    try { document.getElementsByTagName('head')[0].appendChild(s); } catch(e) { document.write(s.outerHTML); }
}());
</script>

Responsive Ads (Another Approach)

Whether you set data-ad-format as “auto” or “vertical” or “horizontal” or vertical, the Chitika algorithms will still decide which ad to serve. For instance, if you ask for an rectangle, you may either get a medium rectangle or a large rectangle.

Should you wish to force to serve ads of a particular size while staying responsive, you can consider custom-sized ads. The size of these ads is determined based on the screen but the publisher has more control over the banner size that is served.

<div id="chitika-ads-1"></div>
<script type="text/javascript">
/* Calculate the width of available ad space */
ad = document.getElementById('chitika-ads-1');
if (ad.getBoundingClientRect().width) {
adWidth = ad.getBoundingClientRect().width; // for modern browsers
} else {
adWidth = ad.offsetWidth; // for old IE
}
( function() {
if (window.CHITIKA === undefined) { window.CHITIKA = { 'units' : [] }; };
if ( adWidth >= 728 )
var unit = {"publisher":"YOur User Name","width":728,"height":90,"sid":"Chitika Default"}; /* Leaderboard 728x90 */
else if ( adWidth >= 468 )
var unit = {"publisher":"YOur User Name","width":550,"height":250,"sid":"Chitika Default"};
else if ( adWidth >= 336 )
var unit = {"publisher":"YOur User Name","width":336,"height":280,"sid":"Chitika Default"};
else if ( adWidth >= 300 )
var unit = {"publisher":"YOur User Name","width":300,"height":250,"sid":"Chitika Default"};
else if ( adWidth >= 250 )
var unit = {"publisher":"YOur User Name","width":250,"height":250,"sid":"Chitika Default"};
else if ( adWidth >= 200 )
var unit = {"publisher":"YOur User Name","width":200,"height":200,"sid":"Chitika Default"};
else if ( adWidth >= 180 )
var unit = {"publisher":"YOur User Name","width":180,"height":150,"sid":"Chitika Default"};
else
var unit = {"publisher":"YOur User Name","width":125,"height":125,"sid":"Chitika Default"};
var placement_id = window.CHITIKA.units.length;
window.CHITIKA.units.push(unit);
document.write('<div id="chitikaAdBlock-' + placement_id + '"></div>');
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = '//cdn.chitika.net/getads.js';
try { document.getElementsByTagName('head')[0].appendChild(s); } catch(e) { document.write(s.outerHTML); }
}());
</script>

Go to your dashboard and either create a new ad unit or use one of your existing ad units. Make a note of the ID shown as"Your user name" of your ad unit and also your Publisher ID and paste these values in that Line.

Next, copy-paste the above snippet anywhere on your web page and, based on the size of the user’s device, the most appropriate Ad will be served. If you wish to include multiple responsive ad units on the same web page, just use the same snippet of code but increment the DIV ID in lines #1 & #6 such that they become chitika-ads-1, chitika-ads-2 and so on.