Creatives (Responsive)

Overview

A responsive ad or creative is an ad that doesn't have a fixed height or width (like 300x250). Instead, a responsive ad automatically changes its size and format to fit whatever space it's in. So, the ad may be ~300x250 on one screen, but be ~320x480 on another, based on browser size.

These are used to simplify the number of ad sizes needed for advertising, as well as ensure that users aren't bombarded with too-large ad sizes that disrupt their viewing experience.

Kevel lets you choose a placement based on the width and height of a user's browser window. A dynamically chosen ad size ensures that ads are sized properly for the window, and this can also be used to create placements for mobile devices without using a mobile version of the page.

To do this, you must modify the Ad Code of the ad call by adding an if statement to a placement.

For example, this placement will serve if a window's width is less or equal than 400 pixels (which suggests that the page is viewed from a mobile device):

if (window.innerWidth <= 400) {
  ados_add_placement(1234, 67890, "azk31626", 23).setZone(12345);
}

To add another if statement, use else with the statement:

else if (window.innerWidth >= 750) {
  ados_add_placement(1234, 67890, "azk8820", 4).setZone(12346);
}

To serve a placement if none of the if requirements can be met, use else by itself:

else {
  ados_add_placement(1234, 67890, "azk23562", 5).setZone(12347);
}

A complete ad call that uses all three statements will look like this (with the comments removed):

<script type="text/javascript">var p="http",d="static";if(document.location.protocol=="https:"){p+="s";d="engine";}var z=document.createElement("script");z.type="text/javascript";z.async=true;z.src=p+"://"+d+".adzerk.net/ados.js";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(z,s);</script>
<script type="text/javascript">
  var ados = ados || {};
  ados.run = ados.run || [];
  ados.run.push(function() {
    if (window.innerWidth <= 400) {
      ados_add_placement(1234, 67890, "azk31626", 23).setZone(12345);
    } else if (window.innerWidth >= 750) {
      ados_add_placement(1234, 67890, "azk8820", 4).setZone(12346);
    } else {
      ados_add_placement(1234, 67890, "azk23562", 5).setZone(12347);
    }
    ados_load();
  });
</script>

📘

When you create the divs for your placements, you can either use multiple divs listed together, or a single div that calls all available ad sizes. If you use a single div, make sure the placementId (the azk code) is the same for all the placements in the Javascript.