Before the AdKit declaration in our HTML files, you must include modules and declare them in an array variable called EBModulesToLoad
.
The following example loads the EBAPI module for use in an AAS ad.
<script>EBModulesToLoad = ['EBAPI'];</script>
Retrieves a variety of properties for a specific ad. Since ad properties are changed over time, rerunning this function will return the most updated properties. The function returns a string or an object, depending on the number of required properties.
function checkIfAdKitReady(event) { adkit.onReady(getAdInformation); } function getAdInformation() { // This example will print in the console an object with the adId and the placementId console.log(EB.getAdData(['adId','placementId'])); // This example will print in the console true/false depending if the user clicked in the ad or not console.log(EB.getAdData('isClickOccur')); } window.addEventListener('load', checkIfAdKitReady);
Retrieves a variety of properties for a specific ad. Similar to the getAdData
method. The function returns an empty object if successful. Any property that failed will be listed inside the object as key: failReason.
Use CSS clip to collapse/resize the given element with the specified dimensions.
Removes CSS clip style from an element by applying the value rect (auto auto auto auto) to it.
Generates a string, in the correct format, to be applied to the CSS clip property. Returns a string with the necessary clip format, rect(0px 300px 250px 0px) .
Indicates whether an element, or list of elements, has a specific class attribute, or list of such classes.
Name |
Type |
Description |
---|---|---|
elements |
|
Elements from which to look for the class. You can supply the HTMLElement, its ID, or an array of HTMLElement/IDs. |
classNames |
|
Classes to search for from the elements. You can supply a single string or an array of strings. |
requireAll |
Boolean/Optional |
(Optional) Determines whether to check if all of the submitted elements have the submitted classes, or if any of them have submitted classes. Default is true. |
function checkIfAdKitReady(event) { adkit.onReady(checkClasses); } function checkClasses() { // This example will print in the console depending on if the banner element contains the class notVisible console.log(EB.hasClass("banner", "notVisible", false)); } window.addEventListener('load', checkIfAdKitReady);
Sets one or more class attributes to one or more HTML elements.
Name |
Type |
Description |
---|---|---|
elements |
|
Elements from which to look for the class. You can supply the HTMLElement, its ID, or an array of HTMLElement/IDs. |
classNames |
|
Classes to search for from the elements. You can supply a single string or an array of strings. |
shouldReplace |
Boolean | Optional |
(Optional) Determines whether to replace the existing class on the element or add to it. Default value is false; the supplied class will be added to any existing classes. |
Removes a class attribute from an HTML element.
Name |
Type |
Description |
---|---|---|
elements |
|
Elements from which to look for the class. You can supply the HTMLElement, its ID, or an array of HTMLElement/IDs. |
classNames |
|
Classes to search for from the elements. You can supply a single string or an array of strings. |
Retrieves the current value of a custom variable from the ad. Custom variables can be defined in the ad at runtime or in Amazon Ad Server (AAS) beforehand. The function returns the value of the custom variable, if already defined, or the default value, if passed as a parameter in the function.
Sets a custom variable. It can either override the current value or only set it when the value does not exist.
function checkIfAdKitReady(event) { adkit.onReady(setCustomVarValue); } function setCustomVarValue() { // This example will set the value of a custom variable called mdCloseButtonShow to false overriding the current value if present EB.setCustomVar("mdCloseButtonShow", false, true); } window.addEventListener('load', checkIfAdKitReady);
Returns an object with detailed information about the size and position of an element.
Note
Note: The viewport-relative and page-relative numbers will be the same inside the creative iFrame.
Name |
Type |
Description |
---|---|---|
width |
Number |
Page width property. |
height |
Number |
Page height property. |
viewPortRelative |
Object |
(top, bottom, left, right) Distance from the top of the viewport to the top, bottom-side of the element, or left of the viewport to the left, right-side of the element. |
pageRelative |
Object |
(top,bottom, left, right} Distance from the top of the page to the top, bottom-side of the element, or left of the page to the left, right-side of the element. |
function checkIfAdKitReady(event) { adkit.onReady(getMetrics); } function getMetrics() { // This example will print in the console the page and viewport relative position of a div called "adContainer" console.log(EB.getElementMetrics("adContainer")); } window.addEventListener('load', checkIfAdKitReady);
Returns the highest number usable as a z-index by all browsers (except Firefox 2 and Safari 3). Some browsers can go higher, but this is the highest number that all browsers can use.
Injects an element to the DOM, according to the specified JSON object that represents the element attributes/children, using the specified method (injectionMethod
) and using the specified element (refElem
) as reference. The function returns the new created element.
Name |
Type |
Description |
---|---|---|
object |
Object |
Object that represents the hierarchy of HTML elements for which we build the tags. Structure: {tagName:string, [attributes:{name1:value1, ... , style:{name2:value2}}], [children:{}]} |
injectionMethod |
String |
Describes where, in relation to the refElem, the new element should be injected. Acceptable values include:
|
refElem |
HTML Element |
DOM element relative to which the injection is done. |
function checkIfAdKitReady(event) { adkit.onReady(addElement); } function addElement() { //This example will add a div to the page and append it to a div with an id "adContainer" var tag = { tagName: "div", attributes: { dir: "ltr", id: "newDivTag", style: { display: "inline", position: "absolute", width: "100%" } }, children: [{ tagName: "iframe", attributes: { allowfullscreen: true, height: 1, id: "newIframeTag", style: { width: "1px", height: "1px" } } }] }; var el = document.getElementById("adContainer"); EB.inject(tag, EBG.Adaptors.InjectionMethod.APPEND, el); } window.addEventListener('load', checkIfAdKitReady);
Retrieves the top-left coordinate for the element. Position is relative to the creative iFrame window. The function returns an object with X and Y as parameters.
function checkIfAdKitReady(event) { adkit.onReady(getPosition); } function getPosition() { // This example will print and object with x and y properties for the element with id 'adContainer' // e.g. {X:300,Y:-32} var element = document.getElementById('adContainer'); console.log(EB.getPositioningByElement(element)); } window.addEventListener('load', checkIfAdKitReady);
Retrieves top-left coordinate for the element with the provided ID. Position is relative to the creative iFrame window. The function returns an object with X and Y as parameters.
function checkIfAdKitReady(event) { adkit.onReady(getPosition); } function getPosition() { // This example will print and object with x and y properties for the element with id 'adContainer' // e.g. {X:300,Y:-32} console.log(EB.getPositioningByElement('adContainer')); } window.addEventListener('load', checkIfAdKitReady);
Removes an element from the page or DOM.
Determines the orientation of the creative iFrame window (not the parent page window), either portrait (tall) or landscape (wide) aspect ratio. The function returns a string with PORTRAIT or LANDSCAPE, depending on the creative iFrame.
This method gets a specific style property of a DOM element. The function returns a string with the value of the requested style.
function checkIfAdKitReady(event) { adkit.onReady(getElementStyle); } function getElementStyle() { // This example will print in the console the position style (e.g. "absolute") of the adContainer element. var element = document.getElementById('adContainer'); console.log(EB.getStyle(element, "position", false)); } window.addEventListener('load', checkIfAdKitReady);
This method gets a specific style property of a DOM element. The function will return an string with the value of the requested style.
Name |
Type |
Description |
---|---|---|
element |
HTML Element |
Element from which to read the style. |
style |
Object |
Object that describes the style to apply to the element, for example {width: '100px', height: '50px'}. |
inline |
Boolean |
Default value is true. Determines whether to try to use a vendor-prefixed property, if the browser does not support the requested property. |
function checkIfAdKitReady(event) { adkit.onReady(setElementStyle); } function getElementStyle() { // This example will assign a width and height style to the element adContainer var element = document.getElementById('adContainer'); EB.setStyle(element, {width: '300px', height: '50px'}, false); } window.addEventListener('load', checkIfAdKitReady);
Similar to EB.setStyle, but allows you to pass an array of elements to set the same style.
Name |
Type |
Description |
---|---|---|
element |
HTML Element or array of HTML Elements |
Element or elements to which the style is set. |
style |
Object |
Object that describes the style to apply to the element or elements, for example {width: '100px', height: '50px'}. |
inline |
Optional | Boolean |
Default value is true. Determines whether to try to use a vendor-prefixed property, if the browser does not support the requested property. |
function checkIfAdKitReady(event) { adkit.onReady(setElementsStyle); } function setElementsStyle() { // This example will assign a width and height style to the element adContainer and video var element1 = document.getElementById('adContainer'); var element2 = document.getElementById('video'); EB.setStyleToElems([element1, element2], {width: '300px', height: '50px'}, false); } window.addEventListener('load', checkIfAdKitReady);
Retrieves the width and height of the creative iFrame. Note that inside the iFrame, viewport size, page size, and window size are all the same. The function returns an object with Height and Width (also contains the same properties in lowercase as width and height).
Indicates whether a specific custom interaction has been configured to close ad parts (collapse all panels). The function returns True or False, depending on the given setup for the interaction. If an incorrect argument is passed, the function returns null.
function checkIfAdKitReady(event) { adkit.onReady(willClose); } function willClose() { // This example will print in the console true or false depending on the given setup for the interaction called 'myInteraction' console.log(EB.willCloseAdParts('myInteraction')); } window.addEventListener('load', checkIfAdKitReady);
Comments