Radical API

Radical API is a set of methods and properties that you can use to manage your creatives. You can use the API to access and control the elements in your creatives.

RAD object

Our rendering library called Radical exposes some helper functions you can you while working on your creative you can access them by initializing the `rad` object by calling

var rad = Radical.getAdByWindow(window);

The majority of functions available on the object are used internally by Radical, but a couple of them will come in handy when working with the creative.

rad.onRender(onAdRender);


function onAdRender() {
  console.log('rendered');
}

This is called after all the elements in the creation are rendered and positioned by the Radical. Use the onLoad event to add DOM event listeners (click, mouse enter, mouse leave, ...) because onRender is called multiple times when you resize the ad, and the listeners would be added multiple times.

rad.onLoad(onAdLoaded);

This is called after the flowline for the creative was loaded but before the render. This is a good place to add any DOM event listeners, as this is called only once.

rad.onBeforeRender(onBeforeRender);

This event returns elements object with all the properties it they will render. You have an option to change these properties before the rendere here. Just update the object. The object is composed of keys that are element ID-s and values that are corresponding properties.

var sizes = rad.getMergedContent().sizes;

An array of all layout sizes we can render from. In the case of Fully-fluid format, this array is empty.

var layoutSize = rad.getRenderedSize();

Size object of the layout currently rendering.

var element = rad.getElementById('e2');

You can use `getElementById` to get an element reference, make sure you are calling this inside `onRender` callback. Check boilerplate code, for example. getElementById returns an object with `domNode` property pointing to actual DOM element and some other information about the element. Some elements, like the video, also contain useful functions to control the element.

All Functions

You can follow the Custom JavaScript Guide to learn how to use the Radical API in your creatives.

• NameaddGlobalEventListener(event: string, callback: (arg: any) => void)Description

  Adds a global event listener to the creative. The event listener will be triggered when the specified event occurs in the creative.

• NameanimationTime(time: number)Description

  Sets the animation time of the creative to the specified time in milliseconds.

• NamecallTrackerURL(url: string)Description

  Call the specified tracker URL.

• NameclearElements(elements: HTMLElement[])Description

  Clears the specified elements from the creative.

• NamecondeHideAd()Description

  Hides the creative.

• NamecreateLightboxContainer()Description

  Creates a lightbox container.

• NamecreativeTimeSpent()Description

  Returns the time spent on the creative in milliseconds.

• NamedomEventHandler(event: string, callback: (arg: any) => void)Description

  Adds a DOM event listener to the creative. The event listener will be triggered when the specified event occurs in the creative.

• NameforceRender()Description

  Forces the creative to render.

• NamegenerateUUID()Description

  Generates a UUID.

• NamegetActiveConfig()Description

  Returns the active config of the creative.

• NamegetAdContent()Description

  Returns the ad content of the creative.

• NamegetAdRenderer()Description

  Returns the ad renderer of the creative.

• NamegetAdTagOptions()Description

  Returns the ad tag options of the creative.

• NamegetAdVersion()Description

  Returns the ad version of the creative.

• NamegetAnimationTimeline()Description

  Returns the animation timeline of the creative.

• NamegetAssets()Description

  Returns the assets of the creative.

• NamegetConfig()Description

  Returns the config of the creative.

• NamegetContainer()Description

  Returns the container of the creative.

• NamegetCookie(name: string)Description

  Returns the value of the specified cookie.

• NamegetCurrentMediaquery()Description

  Returns the current media query of the creative.

• NamegetDataLayer()Description

  Returns the data layer of the creative.

• NamegetDeviceInfo()Description

  Returns the device info of the creative.

• NamegetElementById(id: string)Description

  Returns the element with the specified ID.

• NamegetElementChildren(element: HTMLElement)Description

  Returns the children of the specified element.

• NamegetElementStyles(element: HTMLElement)Description

  Returns the styles of the specified element.

• NamegetExtension(extensionType: string)Description

  Returns the extension of the specified type.

• NamegetFormatLayouts()Description

  Returns the format layouts of the creative.

• NamegetLbNro()Description

  Returns the lightbox number of the creative.

• NamegetMergedContent()Description

  Returns the merged content of the creative.

• NamegetRenderedSize()Description

  Returns the rendered size of the creative.

• NamegetSizeFilter()Description

  Returns the size filter of the creative.

• NamegetState()Description

  Returns the state of the creative.

• NamegetUUID()Description

  Returns the UUID of the creative.

• NamegetUserInfo()Description

  Returns the user info of the creative.

• NamegetVisibleElementChildren(element: HTMLElement)Description

  Returns the visible children of the specified element.

• NamehideCreative()Description

  Hides the creative.

• NameisAdContentAvailable()Description

  Returns true if the ad content is available, otherwise false.

• NameisOpenStateAdObj()Description

  Returns true if the ad object is in open state, otherwise false.

• NameonAdContentAvailable(callback: (arg: any) => void)Description

  Adds a callback to be triggered when the ad content is available.

• NameonAdHover(callback: (arg: any) => void)Description

  Adds a callback to be triggered when the ad is hovered.

• NameonAnimationProgress(callback: (arg: any) => void)Description

  Adds a callback to be triggered when the animation progresses.

• NameonBeforeRender(callback: (arg: any) => void)Description

  Adds a callback to be triggered before the creative is rendered.

• NameonCarouselFirstSlide(callback: (arg: any) => void)Description

  Adds a callback to be triggered when the carousel is on the first slide.

• NameonCarouselLastSlide(callback: (arg: any) => void)Description

  Adds a callback to be triggered when the carousel is on the last slide.

• NameonCarouselMiddleSlide(callback: (arg: any) => void)Description

  Adds a callback to be triggered when the carousel is on the middle slide.

• NameonClick(callback: (arg: any) => void)Description

  Adds a callback to be triggered when the creative is clicked.

• NameonCountdownFinished(callback: (arg: any) => void)Description

  Adds a callback to be triggered when the countdown finishes.

• NameonElementHover(callback: (arg: any) => void)Description

  Adds a callback to be triggered when an element is hovered.

• NameonElementMouseOut(callback: (arg: any) => void)Description

  Adds a callback to be triggered when the mouse leaves an element.

• NameonLoad(callback: (arg: any) => void)Description

  Adds a callback to be triggered when the creative is loaded.

• NameonMediaEnded(callback: (arg: any) => void)Description

  Adds a callback to be triggered when the media ends.

• NameonMediaPause(callback: (arg: any) => void)Description

  Adds a callback to be triggered when the media is paused.

• NameonMediaPlaying(callback: (arg: any) => void)Description

  Adds a callback to be triggered when the media is playing.

• NameonPreviewVideoEnd(callback: (arg: any) => void)Description

  Adds a callback to be triggered when the preview video ends.

• NameonPreviewVideoStart(callback: (arg: any) => void)Description

  Adds a callback to be triggered when the preview video starts.

• NameonRender(callback: (arg: any) => void)Description

  Adds a callback to be triggered when the creative is rendered.

• NameonVideoEnd(callback: (arg: any) => void)Description

  Adds a callback to be triggered when the video ends.

• NameonVideoMuted(callback: (arg: any) => void)Description

  Adds a callback to be triggered when the video is muted.

• NameonVideoPause(callback: (arg: any) => void)Description

  Adds a callback to be triggered when the video is paused.

• NameonVideoPlay(callback: (arg: any) => void)Description

  Adds a callback to be triggered when the video is played.

• NameonVideoTimeUpdate(callback: (arg: any) => void)Description

  Adds a callback to be triggered when the video time is updated.

• NameonVideoUnMuted(callback: (arg: any) => void)Description

  Adds a callback to be triggered when the video is unmuted.

• NameonVideoUnableToAutoplay(callback: (arg: any) => void)Description

  Adds a callback to be triggered when the video is unable to autoplay.

• NamepauseAnimation()Description

  Pauses the animation of the creative.

• NameplayAnimation()Description

  Plays the animation of the creative.

• NamepreviewPageForceRender()Description

  Forces the creative to render the preview page.

• NamerefreshInteractionDisable()Description

  Disables the refresh interaction of the creative.

• NameremoveGlobalEventListener(event: string, callback: (arg: any) => void)Description

  Removes the specified global event listener from the creative.

• NamerenderElement(element: HTMLElement)Description

  Renders the specified element in the creative.

• NamerenderElementWithStyles(element: HTMLElement, styles: any)Description

  Renders the specified element in the creative with the specified styles.

• NamerestartAnimation()Description

  Restarts the animation of the creative.

• NameseekAnimation(time: number)Description

  Seeks the animation of the creative to the specified time in milliseconds.

• NamesendAdformAnalyticsEvent(event: string, data: any)Description

  Sends an Adform analytics event with the specified event and data.

• NamesendAnalyticsEvent(event: string)Description

  Sends an analytics event with the specified event.

• NamesetConfig(config: any)Description

  Sets the config of the creative to the specified config.

• NamesetCookie(name: string, value: string, options: any)Description

  Sets the specified cookie with the specified value and options.

• NamesetCustomTracker(tracker: any)Description

  Sets the custom tracker of the creative to the specified tracker.

• NamesetLbNro(nro: number)Description

  Sets the lightbox number of the creative to the specified number.

• NamesetProgressAnimation(progress: number)Description

  Sets the progress of the animation of the creative to the specified progress.

• NamesetResponsiveMode(mode: string)Description

  Sets the responsive mode of the creative to the specified mode.

• NamesetSizeFilter(filter: any)Description

  Sets the size filter of the creative to the specified filter.

• NamesetState(state: any)Description

  Sets the state of the creative to the specified state.

• NamesetVideoInViewPercetage(percentage: number)Description

  Sets the percentage of the video in view to the specified percentage.

• Namestart()Description

  Starts the creative.

• NamestartAnimation()Description

  Starts the animation of the creative.

• NamestopAnimation()Description

  Stops the animation of the creative.

• NameupdateAgTagOptions(options: any)Description

  Updates the ad tag options of the creative to the specified options.

• NameupdateAnimationTimeline(timeline: any, time: number)Description

  Updates the animation timeline of the creative to the specified timeline and time.

• NameupdateCustomCSS(css: string)Description

  Updates the custom CSS of the creative to the specified CSS.

• NameupdateCustomJs(js: string)Description

  Updates the custom JavaScript of the creative to the specified JavaScript.

• NameupdateElementStyles(element: HTMLElement, styles: any)Description

  Updates the styles of the specified element to the specified styles.