HTML Ad Units

A guide to setting up HTML Ad Units for email campaigns

Introducing HTML Ads, a simple way to monetize your email newsletters.

Sample HTML Ad Code Template:

<div>
 <a href="https://html-link.revcontent.com/click/?id=<WIDGET_ID>&key=<UUID>">
    <img src="https://html-img.revcontent.com/?id=<WIDGET_ID>&key=<UUID>&size=<IAB_SIZE>"/>
 </a>
</div>

Using one of our new HTML Ad units is as easy as plugging 3 of the following required parameters into the code template above.



Required Parameters:

1) id - your widget ID, found within your widget’s settings section.

Apply to both click & image URLs

Example:

id=12345


2) key - a unique identifier (UUID) used to generate impressions.

Apply to both click & image URLs

The key UUIDs can be any values of your choosing. They just need to be unique to each user and newsletter open. While there are many ways to accomplish this, the list of links below provides examples of how unique values can be dynamically generated using the most common email service provider's pre-defined macros/tags.

3) size -  the standard IAB size dimensions of the unit.

Apply only to image URL

Examples:

size=300x250 
size=250x250
size=240x400
size=336x280
size=720x300
size=300x600
size=970x250
size=970x550
size=400x100
size=400x150
size=570x150
size=600x250
size=600x300

__________________________________________________________________

Optional Parameters:

sub_ids - Sub ID tracking is a useful tool that can be customized to achieve your reporting needs. Some of the ways Publishers successfully utilize Sub ID tracking include tracking revenue by article, traffic source, social influencer, or to evaluate performance on different page variations.

Apply to both click & image URLs

Example:

sub_ids=[key_01:value_01,key_02:value_02]


offset
- allows you to show different ads using the same widget/unit ID (id).

Apply to both click & image URLs

Example: if you have three separate ads in your newsletter you could add the following to each:

offset=0 
offset=1
offset=2


headline_color
- allows you to specify a custom headline text color.

Apply only to image URL

Example:

headline_color=0000FF  (any hex color value without a hash)


headline_size
- allows you to specify a headline font size. Please note this parameter will not work when specifying IAB sizes

Apply only to image URL

Example:

headline_size=22


provider_color
- allows you to specify a custom provider text color.  

Apply only to image URL

Example:

provider_color=0000FF  (any hex color value without a hash) 


button_color
- allows you to specify a custom button color. Please note that only layout 1 populates a button. 

Apply only to image URL   

Example:

button_color=0000FF (any hex color value without a hash)


hide_button
- allows you to hide the "Learn More" button. Please note that only layout 1 populates a button. Buttons are automatically hidden on layouts 2 and 3.

Apply only to image URL

Example: (would prevent the button from displaying)

hide_button=true  


hide_provider
- allows you to hide the name of the content provider

Apply only to image URL

Example: (would prevent the provider from displaying)

hide_provider=true 


layout
- allows you to select from one of three predefined ad layouts (defaults to 1). Please note that only layout 1 populates a button.

Apply only to image URL

Examples:

layout=1  

(would appear in the following format):

layout=2 

(would appear in the following format):

layout=3 

(would appear in the following format):

layout=4 

Will display a creative’s image only. Options available for this are "size" only
Example:

<a href="https://html-link.revcontent.com/click/?id=<WIDGET_ID>&key=<UUID>">
<img src="https://html-img.revcontent.com/?id=<WIDGET_ID>&key=<UUID>&size=180x110&layout=4"/>
</a>

(would appear in the following format):

layout=5 

Will display a creative headline & brand in it's own image. The text is bottom aligned so you can control the height and width of the overall image and the headline font size.

Example:

<a href="https://html-link.revcontent.com/click/?id=<WIDGET_ID>&key=<UUID>">
<img src="https://html-img.revcontent.com/?id=<WIDGET_ID>&key=<UUID>size=210x80&layout=5&headline_size=18"/>
</a>

(would appear in the following format):

NOTE: Layouts 4 and 5 can be used in combination or individually.

layout=6 

Requires the addition of CSS (template below)

(would appear in the following format):

The following template can be used to achieve this format and can be customized further with additional ad units and/or CSS. Without modifications it will display as a 2x1 on desktop and a 1x2 on mobile devices:

<style type="text/css">
@media only screen and (max-width: 480px){
#rc-insert {
  width:300px !important;
}
.rc-container {
  display:block !important;
  width:300px !important;
  margin: 0 auto 0px auto!important;
  max-height: 225px!important;
}
.rc-img {
  max-width: 300px !important;
  width: 300px !important;
  max-height: auto;
  margin: 0 auto;
}
.rc-wrap {
  height: auto!important;
}
}
.rc-wrap {
width: 100%;
height: 218px;
overflow: hidden;
}
</style>
<div style="font-family: 'Roboto Condensed','Ms Trebuchet',sans-serif; color: #000001;font-size: 22px;line-height: 25px;font-weight: bold;text-transform: uppercase; padding-top: 0px;padding-right: 20px;padding-bottom: 20px;padding-left: 20px;">
   <p style="text-align:left;margin:0"><strong>You May Like ...</strong></p>
   <a href="https://revcontent.com" target="_blank"><img style="float:right;width: 101px;position: relative;top: -17px;right: 10px;;" src="https://img.revcontent.com/?url=https://cdn.revcontent.com/assets/img/full_color.png&static=true"></a>
</div>
<div class="rc-wrap">
<table border="0" cellpadding="0" cellspacing="0" width="600" style="max-width: 600px; margin: 0 auto; max-height: 220px;" id="rc-insert">
    <tr>
        <td align="center" valign="top" width="50%" class="rc-container">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td>
                      <div>
                          <a href="https://html-link.revcontent.com/click/?id=INSERT-WIDGET_ID-HERE&key=INSERT-KEY-HERE&offset=0" target="_blank">
                            <img src="https://html-img.revcontent.com/?id=INSERT-WIDGET_ID-HERE&key=INSERT-KEY-HERE&offset=0&size=300x300&layout=6&hide_button=true&headline_size=16&headline_font=Roboto&headline_font_style=Bold" width="290" style="max-width:300px;" class="rc-img" />
                          </a> 
                      </div>
                    </td> 
                </tr>
            </table>
        </td>
        <td align="center" valign="top" width="50%" class="rc-container">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td>
                      <div>
                          <a href="https://html-link.revcontent.com/click/?id=INSERT-WIDGET_ID-HERE&key=INSERT-KEY-HERE&offset=5" target="_blank">
                            <img src="https://html-img.revcontent.com/?id=INSERT-WIDGET_ID-HERE&key=INSERT-KEY-HERE&offset=5&size=300x300&layout=6&hide_button=true&headline_size=16&headline_font=Roboto&headline_font_style=Bold" width="290" style="max-width:300px;" class="rc-img" />
                          </a> 
                      </div>
                    </td> 
                </tr> 
            </table>
        </td>
    </tr>
</table>
</div> 

 

NOTE:

  • the "id" value "INSERT-WIDGET_ID-HERE" must be replaced with your widget/unit IDs
  • the "key" value "INSERT-KEY-HERE" must be replaced with unique identifiers (UUIDs) in order to generate impressions.
  • Styles can be moved to the main style area

 



Publisher's are now also able to utilize Dynamic HTML Ad units. If interested, please reach out to your Account Manager for more details.