Renderers
The Ad Placement API response includes the renderers used to display the ads on the page. The response contains the URLs for the renderer scripts, which you can use to independently render different containers and ads on your webpage. Instructions on how to use each renderer follow below.
Container Renderers
These renderers are designed to generate various types of containers where you can conveniently display the ads. The render function of the container renderers returns an array with the placeholders that you can use to place the ads.
Fixed Container Renderer
Renders a container with a fixed position on the page.
This script will expose the window.FixedContainerRenderer variable, which you can use to interact with the renderer. For example, calling window.FixedContainerRenderer.render(zone, placeholder); renders the container on the page.
Available renderer functions:
render()
zone
Yes
Zone object containing information for rendering
placeholder
Yes
HTML element indicating where to render the container
Zone object for rendering:
This object is similar to the ones returned in the zones property of the Ad Placement API response. It contains the zone ID along with the data needed for rendering, as illustrated in the example below:
{
"idzone": 9999999,
"data": {
"width": 300,
"height": 250
}
}Data Properties:
width
Number
Yes
Width of the element in pixels
height
Number
Yes
Height of the element in pixels
Sticky Container Renderer
This script exposes the window.StickyContainerRenderer variable, which you can use to interact with the renderer. For example, calling window.StickyContainerRenderer.render(zone, placeholder); renders the container on the page.
Available renderer functions:
render()
zone
Yes
Zone object containing information for rendering
placeholder
Yes
HTML element indicating where to render the container
cookieConsent
No
Boolean indicating if the user consents to cookies
setBorder()
zoneId
Yes
ID of the zone to set the border for
width
Yes
Width of the border
color
Yes
Color of the border
removeBorder()
zoneId
Yes
ID of the zone to remove the border from
setPosition()
zoneId
Yes
ID of the zone to set the position for
horizontalPosition
Yes
Horizontal position of the zone
verticalPosition
Yes
Vertical position of the zone
Zone object for rendering:
This object is similar to the ones returned in the zones property of the Ad Placement API response. It contains the zone ID along with the data needed for rendering, as illustrated in the example below:
Data Properties:
width
Number
Yes
Width of the element in pixels
height
Number
Yes
Height of the element in pixels
frequency_period
Number
No
Length of time in minutes that the container is hidden for once it is closed (needs cookie consent from user)
v_pos
String
No
Vertical position of the container: top, bottom or middle
h_pos
String
No
Horizontal position of the container: left, right or center
border_width
Number
No
Width of the border, if there is one
border_color
String
No
Hex value of the border color, if there is one
Instant Message Container Renderer
Renders an instant message container on the page.
This script exposes the window.InstantMessageContainerRenderer variable, which you can use to interact with the renderer. For example, calling window.InstantMessageContainerRenderer.render(zone, placeholder); renders the container on the page.
Available renderer functions:
render()
zone
Yes
Zone object containing information for rendering
placeholder
Yes
HTML element indicating where to render the container
cookieConsent
No
Boolean indicating if the user consents to cookies
Zone object for rendering:
This object is similar to the ones returned in the zones property of the Ad Placement API response. It contains the zone ID along with the data needed for rendering, as illustrated in the example below:
Data Properties:
width
Number
Yes
Width of the element in pixels
height
Number
Yes
Height of the element in pixels
frequency_period
Number
No
Length of time in minutes that the container is hidden for once it is closed (needs cookie consent from user)
Mobile Instant Message Container Renderer
Renders an instant message container for mobile on the page.
This script exposes the window.MobileInstantMessageContainerRenderer variable, which you can use to interact with the renderer. For example, calling window.MobileInstantMessageContainerRenderer.render(zone, placeholder); renders the container on the page.
Available renderer functions:
render()
zone
Yes
Zone object containing information for rendering
placeholder
Yes
HTML element indicating where to render the container
cookieConsent
No
Boolean indicating if the user consents to cookies
Zone object for rendering:
This object is similar to those returned in the zones property of the Ad Placement API response. It contains the zone ID along with the data needed for rendering, as illustrated in the example below:
Data Properties:
width
Number
Yes
Width of the element in pixels
height
Number
Yes
Height of the element in pixels
frequency_period
Number
No
Length of time in minutes that the container is hidden for once it is closed (needs cookie consent from user)
capping
Number
No
Number of times the container is shown to the user (needs cookie consent from user)
Fullpage Interstitial Container Renderer
Renders a fullpage interstitial container for desktop or mobile on the page.
This script exposes the window.FullpageInterstitialContainerRenderer variable, which you can use to interact with the renderer. For example, calling window.FullpageInterstitialContainerRenderer.render(zone, placeholder); renders the container on the page.
Available renderer functions:
render()
zone
Yes
Zone object containing information for rendering
placeholder
Yes
HTML element indicating where to render the container
cookieConsent
No
Boolean indicating if the user consents to cookies
Zone object for rendering:
This object is similar to those returned in the zones property of the Ad Placement API response. It contains the zone ID along with the data needed for rendering, as illustrated in the example below:
Data Properties:
frequency_count
Number
No
Number of times the ad will be displayed within the selected frequency period (needs cookie consent from user)
frequency_period
Number
No
The time, in minutes, during which we monitor the number of times the ad has been displayed (needs cookie consent from user)
frequency_trigger_type
Number
No
Indicates the frequency trigger type: 0 for time and 1 for the number of clicks on links within the website
ad_trigger_method
Number
No
Indicates the ad trigger method: 2 to trigger on links with specific classes or 3 to trigger on any link
ad_trigger_classes
String
No
Link classes that trigger the ad, seperated by commas
first_trigger_clicks
Number
No
Number of clicks required to trigger the ad when using the click frequency trigger type
next_trigger_clicks
Number
No
Number of clicks required after the first trigger to activate the ad when using the click frequency trigger type
chrome_enabled
Number
No
Browser compatibility: 0 indicates non-Chrome browsers, 1 encompasses all browsers, and 2 represents Chrome-only
capping_enabled
Number
No
1 applies frequency_count and frequency_period; 0 shows the ad without capping and stores no capping cookie
media
String
No
Media type of the ad: img_banner for images, video_banner for video, iframe_link for iframes
Group Container Renderer
This script exposes the window.GroupContainerRenderer variable, which you can use to interact with the renderer. For example, calling window.GroupContainerRenderer.render(group, placeholder); renders the container on the page.
Available renderer functions:
render()
group
Yes
Group object containing information for rendering
placeholder
Yes
HTML element indicating where to render the container
Group object for rendering:
This object is similar to the one returned in the group property of the Ad Placement API response, when there is an ad group. It contains the group orientation, along with the ad_items array, containing information for each ad:
Content Renderers
These renderers display the ads within a container. Some are self-contained and do not require a container.
Banner Content Renderer
This script exposes the window.BannerRenderer variable, which you can use to interact with the renderer. For example, calling window.BannerRenderer.render(zone, placeholder); renders the ad.
Available renderer functions:
render()
zone
Yes
Zone object containing information for rendering
placeholder
Yes
HTML element indicating where to render the ad, such as a container
Zone object for rendering:
This object is similar to the ones returned in the zones property of the Ad Placement API response. It contains the zone id along with the data needed for rendering, as illustrated in the example below:
Data Properties:
width
Number
Yes
Width of the element in pixels
height
Number
Yes
Height of the element in pixels
url
String
Yes
URL that the ad directs to
impression
String
Yes
URL of the impression tracker
image
String
Yes
URL of the image to be used on the ad
optimum_image
String
No
URL of the optimized ad image, for example an mp4 for an animated ad
count_only_viewed_impressions
Number
No
1 calls the impression URL only once the ad is in view; 0 calls it when the ad is rendered
Native Content Renderer
This script exposes the window.NativeRenderer variable, which you can use to interact with the renderer. For example, calling window.NativeRenderer.render(zone, placeholder); renders the ad.
Available renderer functions:
render()
zone
Yes
Zone object containing information for rendering
placeholder
Yes
HTML element indicating where to render the ad, such as a container
Zone object for rendering:
This object is similar to those returned in the zones property of the Ad Placement API response. It contains the zone ID along with the data needed for rendering. For native, include the layout and ad_items, as shown in the example below:
Data Properties:
Data > layout
widgetHeaderContentHtml
The URL of the 'Powered by' branding that shows
branding_logo
The URL for the branding logo that shows if enabled
branding_logo_hover
The URL for the branding logo that shows when the user hovers over it
itemsPerRow
The number of ads that show in each row of the widget
itemsPerCol
The number of ads that show in each column of the widget
font_family
The family of font used in the ad
header_font_size
The size of font used in the branding header
header_font_color
The colour of font used in the branding header
widget_background_color
The hex code of the background colour used for the widget
widget_width
The width of the entire widget
minimum_width_for_full_sized_layout
The minimum width for a full-sized layout in pixels
item_height
The height of each individual ad
item_padding
The padding between each of the ads
image_height
The height of the image in each ad
image_width
The width of the image in each ad
text_margin_top
The size in pixels of the top text margin
text_margin_bottom
The size in pixels of the bottom text margin
text_margin_left
The size in pixels of the left text margin
text_margin_right
The size in pixels of the right text margin
title_font_size
The font size of the title for each ad
title_font_color
The font colour of the title for each ad
title_font_weight
The font weight of the title for each ad
title_decoration
Whether the title is underlined or not
title_hover_color
The font colour when the title is hovered over
title_hover_font_weight
The font weight when the title is hovered over
title_hover_decoration
Whether the title is underlined on hover or not
description_font_size
The font size of the description for each ad
description_font_color
The font colour of the description for each ad
description_font_weight
The font weight of the description for each ad
description_decoration
Whether the description is underlined or not
description_hover_color
The font colour when the description is hovered over
description_hover_font_weight
The font weight when the description is hovered over
description_hover_decoration
Whether the description is underlined on hover or not
open_in_new_window
Whether the ad should be opened in a new window when clicked. 1=yes, 0=no
mobile_responsive_type
The type of responsiveness when using a mobile device (i.e none or compact). 1=compact, 0=no
header_is_on_top
Whether the branding should be displayed above or below the ads. 1=yes, 0=no
header_text_align
The horizontal alignment of the branding header
title_enabled
Whether the title is enabled or not. 1=yes, 0=no
description_enabled
Whether the description is enabled or not. 1=yes, 0=no
image_border_size
The size in pixels of the image border
image_border_color
The hex code colour of the image border
text_align
The alignment of the text: left, center, or right
customcss_enabled
Whether custom css is enabled or not. 1=yes, 0=no
customcss
If enabled the custom css will display here
header_enabled
Whether header is enabled or not. 1=yes, 0=no
mobile_breakpoint
The breakpoint in pixels, between desktop and mobile views of the ad zone
spacing_v
The vertical spacing in pixels between the ads, set in Advanced Options
spacing_h
The horizontal spacing in pixels between the ads, set in Advanced Options
zoom
Whether the ad should zoom in/out on hover
mobile_rows
The number of rows of ads in the mobile widget
mobile_cols
The number of columns of ads in the mobile widget
use_v2_script
Whether the ad zone was created with the newer V2 setup or the older v1
text_enabled
Whether the text title and description should be displayed. 1=yes, 0=no
mobile_image_width
The width of the image in each ad on mobile
mobile_text_box_size
The text box size when on mobile. Valid range 50-500
mobile_text_enabled
Whether the title is enabled or not on mobile. 1=yes, 0=no
mobile_text_position
The position of the text on mobile: bottom or right
item_spacing_on_each_side
The padding on each side of the ads, if they were set up using the old v1 setup
text_position
Whether the text is positioned on the left or right side
text_box_size
The size of the text box in pixels. Range 50-500
widget_height
The height of the entire widget
brand_enabled
Whether the branding is enabled or not
brand_font_size
The font size of the branding
brand_font_color
The font colour of the branding
brand_font_weight
The font weight of the branding
brand_decoration
Whether the font is underlined or not
mobile_image_height
The height of the image in each ad on mobile
publisherAdType
What type of native ad this is, i.e recommendation, exit, or interstitial: native-recommendation, native-exit, native-interstitial
Data > ad_items
image
The original image uploaded for the ad
url
The URL that the ad directs to
impression
The URL of the impression tracker
title
The title text of the ad
description
The description text of the ad
brand
The brand text of the ad
original_url
The original url of the landing page
image_position
The position of the ad image (how the image will be cropped)
count_only_viewed_impressions
1 calls the impression URL only once the ad item is in view; 0 calls it when the ad is rendered
Outstream Video Content Renderer
This script exposes the window.OutstreamVideoRenderer variable, which you can use to interact with the renderer. For example, calling window.OutstreamVideoRenderer.render(zone, placeholder); renders the ad.
Available renderer functions:
render()
zone
Yes
Zone object containing information for rendering
placeholder
Yes
HTML element indicating where to render the ad, such as a container
cookieConsent
No
Boolean indicating if the user consents to cookies
Zone object for rendering:
This object is similar to those returned in the zones property of the Ad Placement API response. It contains the zone id along with the data needed for rendering, as illustrated in the example below:
Data Properties:
url
String
Yes
URL that the ad directs to
impression
String
Yes
URL of the impression tracker
video
String
Yes
URL of the video to be used on the ad
tracking
Object
Yes
Object with tracking info
- offset
String
Yes
Progress marker to persist the video view
- url
String
Yes
URL to call to persist the video view
brandingEnabled
Boolean
No
Flag to enable the branding
frequencyPeriod
Number
No
Length of time in minutes that the ad is hidden for once it is closed (needs cookie consent from user)
maximumWidth
Number
No
Maximum video width
isVast
Boolean
No
Flag indicating if the video is Vast
ctaEnabled
Boolean
No
Flag to enable the CTA (call to action)
cta
Object
No
URL of the optimized ad image, for example an mp4 for an animated ad
- displayUrl
String
No
URL to display on the CTA
- text
String
No
Text to display on the CTA button
In Page Push Notification Content Renderer
This script will expose the window.InPagePushNotificationRenderer variable, which you can use to interact with the renderer. For example, calling window.InPagePushNotificationRenderer.render(zone, placeholder); renders the ad.
Available renderer functions:
render()
zone
Yes
Zone object containing information for rendering
placeholder
Yes
HTML element indicating where to render the ad, such as a container
cookieConsent
No
Boolean indicating if the user consents to cookies
Zone object for rendering:
This object is similar to those returned in the zones property of the Ad Placement API response. It contains the zone ID along with the data needed for rendering, as illustrated in the example below:
Data Properties:
url
String
Yes
URL that the ad directs to
impression
String
Yes
URL of the impression tracker
image
String
Yes
URL of the image to be used on the ad
optimum_image
String
No
URL of the optimized ad image, for example an mp4 for an animated ad
title
String
Yes
Title of the notification
description
String
Yes
Description of the notification
horizontal_position
String
Yes
Indicates the horizontal position on the page (left, center, right)
vertical_position
String
Yes
Indicates the vertical position on the page (top, middle, bottom)
delay
Number
No
Number of seconds before the notification appears after the page loads
max_notifications_on_page
Number
No
Number of notifications that can appear on the page at the same time
once_closed_hide_for
Number
No
Length of time in seconds that the ad is hidden for once it is closed (needs cookie consent from user)
user_session_capping
Number
No
Number of times the ad is shown to the user (needs cookie consent from user)
delay_between_notifications
Number
No
Number of seconds before the next notification appears after the previous one loads
Web Push Notification Content Renderer
This script will expose the window.WebPushNotificationRenderer variable, which you can use to interact with the renderer. For example, by calling window.WebPushNotificationRenderer.render(zone, placeholder, cookieConsent); it is possible to draw the subscription prompt and register the push subscription. This renderer renders no ad on the page.
Available renderer functions
| Function | Parameter Names | Required | Parameter Description |
|---|---|---|---|
|
| Yes | Zone object containing information for rendering (idzone plus the data settings from the Response page) |
| Yes | HTML element; kept for signature consistency with the other content renderers | |
| No | Boolean indicating if the user consents to cookies. Defaults to false. When false the renderer does not store the prompt-frequency cookie, so the prompt is not capped across page views. |
Zone object for rendering
This object is similar to those returned in the zones property of the Ad Placement API response. It contains the zone ID along with the data needed for rendering, as illustrated in the example below:
Data Properties
soft_ask
Number
Yes
1 shows the network's soft-ask prompt before the browser's native permission dialog; 0 goes straight to the native dialog (self-hosted zones only)
soft_ask_delay
Number
No
Seconds to wait before showing the prompt. Defaults to 5 when not set
soft_ask_horizontal_position
String
No
left, center or right. Empty means center
soft_ask_vertical_position
String
No
top, center or bottom. Empty means center
soft_ask_title_enabled
Number
No
0 hides the prompt title
soft_ask_title
String
No
Prompt title. Empty falls back to the renderer's localized default
soft_ask_description
String
No
Prompt description. Empty falls back to the localized default
soft_ask_button_yes
String
No
Accept button label. Empty falls back to the localized default
soft_ask_button_no
String
No
Decline button label. Empty falls back to the localized default
is_self_hosted
Number
Yes
1 subscribes the user on the publisher's own domain through a service worker; 0 uses the network's subscription domain in a popup
Last updated
Was this helpful?