Note
Note: To learn more about this format, preview a demo, or to see build guides for other authoring tools, see About simple skin.
When creating a simple skin in a code editor, it is recommended that you start with our official template bundle.
Files within the bundle:
README.txt
Amz_SimpleSkin_1_0_1.zip
Amz_SimpleSkin_1_0_1_DCO.zip
After downloading the workspace template, be sure to extract it while preserving the directory structure.
Note
Note: When updating or replacing assets such as images and videos, make sure to also update references to their file names and dimensions found in index.html, style.cs and script.js as necessary.
The following files are included in the workspace template download:
|
File Name |
Description |
Required |
|---|---|---|
|
|
HTML file for the banner. |
Required |
|
|
Configuration/Manifest file for the ad. Used for actions such as default ad settings, and Dynamic Creative. |
Optional |
|
|
HTML file for header panel. |
Required |
|
|
HTML file for the left gutter panel. |
Required |
|
|
HTML file for the right gutter panel. |
Required |
|
|
Basic style sheet for simple skin. |
Optional (if code is included in the HTML file) |
|
|
Style sheet for the banner and its HTML elements. |
Optional (if code is included in the HTML file) |
|
|
Style sheet for header panel creative. |
Optional (if code is included in the HTML file) |
|
|
Style sheet for left gutter panel creative. |
Optional (if code is included in the HTML file) |
|
|
Style sheet for right gutter panel creative. |
Optional (if code is included in the HTML file) |
|
|
Core script to use and initialize a simple skin ad. |
Required |
|
|
Core script for the header panel. |
Required |
|
|
Core script for the left gutter panel. |
Required |
|
|
Code script for the right gutter panel. |
Required |
|
|
1x1 backup image for the banner. |
Required |
|
|
Serves as a background image |
Optional |
|
|
Additional Image asset |
Optional |
After you finish creating your ad, proceed to setting up your ad in Amazon Ad Server (AAS). For more information, see: Set up a Simple Skin.
If you are planning to upload multiple ads, make sure that the Ad Creation Wizard in AAS recognizes your workspace as a simple skin banner. Verify that the config.js file contains the following JavaScript:
define({
"adFormatId": 10438
});
For more information about uploading ads in bulk, see: Set up multiple ads using Ad Creation Wizard.
If you are developing ads with 3rd party libraries, use the AAS-hosted versions of dependencies listed in the Ad Serving Shared Libraries.
If you need to add dynamic creative optimization (DCO) elements to your creative, see Add dynamic elements to your HTML ads using a code editor.
The following table represents custom variables found in the ad set-up and optionally the .config file. The names needed for the .config file are listed in parenthesis.
L, R, C (for Left, Right, and Center, respectively)
|
Variable Name in AAS |
Description |
Type |
Default and accepted values |
|---|---|---|---|
|
Right Gutter Name ( |
Right gutter panel name as set in AAS. |
String |
Default: rightGutter |
|
Left Gutter Name ( |
Left gutter panel name as set in AAS. |
string |
Default:leftGutter |
|
Position ( |
Gutters |
String |
Default: fixed Accepted: fixed or scroll |
|
Page Background ( |
You will be able to inject a background image only once when the ad is loaded in the publisher's page. You can select the element and the behavior to inject. |
String |
enabled:false, img:images/background_default.jpg, color:#000000, size:cover, position:top center, repeat:no-repeat, attach:fixed, fade:fade-in, fade_time:3000, inject:body, injectType:div, clickable:false |
|
Auto Reposition Interval ( |
Panel reposition interval. Set to 0 to turn off the interval. Panels reposition in every "n" milliseconds. |
Number |
Default: 100 |
|
Content Width ( |
Page content width. |
Number |
Default: 970 |
|
Eye Div ZIndex ( |
Default z-index of the eye div. |
String |
Default: undefined |
|
Gutters Default Height ( |
Gutters default height. |
Number |
Default: 1000 |
|
Gutter Top Position ( |
Defines the top position of the gutters. JavaScript will try to get the value from the current page and apply that value to set the top position of the gutters. However, if JavaScript failed to get any value from the page, it will take the value from this custom variable. |
Number |
Default: 0 |
|
Header Panel Name ( |
Header panel name as set in AAS. |
String |
Default: header |
|
Header Size Inheritence ( |
Header panel behavior will change based on the option selected. |
String |
Default: 0-781:450,782-1023:250,1024-4000:250 Accepted: |
|
Min Header Width ( |
Minimum header width if custom script fails to read page content width. |
Integer |
Default: 970 |
|
Header Panel Top Offset ( |
Top offset to display above the header panel. |
Integer |
Default: 0 |
|
Header Panel Bottom Offset ( |
Bottom offset to display above the header panel. |
Integer |
Default: 0 |
|
Show Gutters ( |
Show or hide gutters. |
Boolean |
Default: true |
|
Content Offset ( |
Number of pixels of padding between the width of the content and the start of the gutter panels. |
Integer |
Default: 0 |
|
Content Placement Selector ( |
Div reference to detect content of page. A valid CSS selector should be present in this variable to successfully detect the content location and width. When this variable is set to anything other than undefined, There is a new and experimental method to get the widest element from any page automatically by enabling NoteNote: You will find more details about this feature below. |
String |
Default: 0 |
|
Content X Pos Offset ( |
Value, in pixels, to offset the detected location of the content area. Positive value moves the content location to the right; negative value moves the content location to the left. This allows for asymmetrical layouts with padding on the left/right. This variable is only used when |
Integer |
Default: 0 |
|
Header Inject Type ( |
Header panel injection type. |
String |
Default: after Accepted: |
|
Header Offset ( |
Vertical offset from header; affects header panel and gutter panels. |
Integer |
Default: 0 |
|
Header Placement Selector ( |
Div reference to inject header panel. A valid CSS selector should be present in this variable to successfully push header panel. If undefined, will inject header at tag location |
String |
Default: undefined |
|
ProgEnable ( |
Determines whether to load the programmatic settings. |
Boolean |
Default: false |
|
Programmatic Settings Folder Path ( |
Location from which to load the programmatic settings files. |
String |
Default: |
|
Gutter Minimum Width ( |
Right gutter minimum width. |
Integer |
Default: 100 |
|
Gutter Max Width ( |
Right gutter maximum width. Set to 0 to define if right gutters should cover available page width on right side of site content. |
Integer |
Default: 500 |
|
Auto Scroll Top On Orientation ( |
In mobile and tablet devices when the orientation is changed automatically, the scroll bar will be moved to the position of the header. If there is no header, it will be moved to the top of the page. |
Boolean |
Default: true |
The following custom interactions are reported by the ad and can be reviewed in AAS reporting (besides standard ad interactions).
|
Interaction name |
Description |
|---|---|
|
|
Click-through fired once the user clicks the click-through button that appears in the left gutter. |
|
|
Clickthrough fired once the user clicks the click-through button that appears in the right gutter. |
|
|
Click-through fired once the user clicks the background panel. |
|
|
Click-through fired once the user clicks the background image when the clickable option is enabled in the custom variable |
All of essential functionalities for simple skin are programmed in the package. At a minimum, the only changes you will need to make are to the loaded image and its style.
To customize the gutters, please refer and update scripts in index.html from panels/left_gutter or panels/right_gutter, style.css from panels/left_gutter/styles or panels/right_gutter/styles, and script.js from panels/left_gutter/scripts or panels/right_gutter/scripts as you desire. All the elements are placed in relative position and all of the properties are set in percentage so that elements appear correctly regardless of screen dimensions.
Add the following lines to your code to initialize gutters:
var config = {
panel: "left_gutter"
};
var immersiveTakeover = new immersiveTakeover(config);
or
var config = {
panel: "right_gutter"
};
var immersiveTakeover = new immersiveTakeover(config);
Add the following lines to your code to initialize a header:
var config = {
panel: "header"
};
var immersiveTakeover = new immersiveTakeover(config);
You can synchronize all panels in case the animation in panels needs to be started at once or if there is a sequence progressing from one panel to another. A callback function, afterShowPanelContent found in script.js for each panel, is dispatched when all panels are completely loaded and ready to be shown. You can implement your scripts in the function and then the scripts will be executed at once.
function afterShowPanelContent(args) {
//Implement code logic to fire when the panel is shown
}
Note
For more information about other methods and utilities that you can use in this format, please refer to Create an immersive takeover in a code editor
It's possible to change the body background image of the publisher’s site to your own. There are three ways to set this up. In order to avoid conflicts where one setup interrupts others methods, please revert the previous updates to defaults before moving to other ways. For example, if you used the variable "injectType" with the value "Div" and after decided to use the value "style", the Div with the first background will be removed from the page.
The following sections describe the methods for injecting a background on a publisher's page.
This method allows you to inject a background image only once when the ad is loaded. There is no extra code required in the workspace, and you can set up different options to show the image on the publisher's page.
Note
Note: Make sure that you use this method in conjunction with the mediaQueries method. You want to make sure that when the ad is loaded on the page, the custom variable result is not overwritten.
The following table describes the variables that are available.
|
Variables |
Description |
Values |
|---|---|---|
|
|
Enables or disables this feature. If set to TRUE, the background is injected on the publisher's site. |
Default: false Accepted: true/false |
|
|
Allows you to add the path of an image from your workspace, or use a number, if you want to select an additional asset. |
Default: images/background_default.jpg Accepted: Numbers/complete path from your Workspace |
|
|
Allows you to select a Hex color, or enter a name of a color, for example, red or green. This will be the background color of the page. For more information, click here. |
Default: #000000 Accepted: Hex numbers, for example, red, blue, transparent |
|
|
Determines the background size on the page. For more information, click here. |
Default: cover Accepted: For example, cover ,contain, auto, percentage |
|
|
Determines the position of the background, horizontal or vertical. For more information, click here. |
Default: top center Accepted: top, center, left, right, bottom, x% y%, xpos, ypos |
|
|
Determines if the background is repeated. If you want use the repeat option, for best results, use a small image. For more information, click here. |
Default: no repeat Accepted: repeat, repeat-x, repeat-y, no-repeat |
|
|
Determines the behavior for the background when scrolling up/down on the publisher's page. For more information, click here. |
Default: fixed Accepted: fixed, scroll, local, inherit, initial |
|
|
Determines the tween animation style for the background. When the value is set to none, the background is shown without any animation. |
Default: fade-in Accepted: fade-in, fade-out, fade-in-out, none |
|
|
Duration of the tween animation when the background is injected on the publisher's site. |
Default: 3000 Accepted: Number in milliseconds |
|
|
Element in the DOM that is applied to the setup. You can select a class ( |
Default: body Accepted: Any element in the DOM of the page |
|
|
Methods to inject the background on the publisher's page include the following:
NoteNote: When the image is shown, this option will not have a fade-in/out (tween). |
Default: Div Accpted: style or div |
|
|
If set to TRUE, the background is clickable on the page with two dynamics, created using two divs (without panels for gutters). |
Default: false Accepted: true/false |
From the workspace, invoke the changePageBackground function that is included in the workspace ImageSkin.
changePageBackground (image, color, size, position, attach, repeat, fade, fade_time, inject, injectType, clickable);
Note
Note: To avoid conflicts, the existing method is deleted when you use a new method. For example, if you use the variable injectType with a value of Div , and after you use the injectType with a value of style ,the Div with the first background will be removed from the page.
The functions are included in the workspace ImageSkin. You can use the mediaQueries method to define the breakpoints to inject into the css of the publisher's page and improve the user experience when the ad is loaded in different devices with different resolutions. You can add all the that you need, via the following structure:
The following structure shows how to add the mediaQueries that you might need:
var breakpointsBackgroundsList = [{
mediaQuery: "screen and (min-width: 960px)",
setupBackground: {
img: "images/background_default.jpg",
color: "",
size: "cover",
position: "top center",
attach: "fixed",
repeat: "no-repeat",
fade: "fade-in",
fade_time: 0,
inject: "body"
}]
|
Customization |
Description |
|---|---|
|
|
Enables you to add the desired media query. The basic media queries control the width/height, but you can include orientation or advanced behavior to control the minimum device pixel ratio. You do not need to include Examples of media queries include the following:
|
|
|
Enables you to set up the behavior of your background for each media query. For best results, it is recommended that you modify the following values:
|
setupBackground: {
img: "images/background_default.jpg",
color: "#000000",
size: "cover",
position: "top center",
attach: "fixed",
repeat: "no-repeat",
fade: "fade-in",
fade_time: 3000,
inject: "body",
clickable: false
}
The templates include a function that tracks the current scroll position. When the ad first loads, the current scroll position is received. Upon any scroll, resize, or orientation change, the new scroll position is updated.
You can access the current scroll position, scrollXPercent and scrollYPercent in the creative script.js file from the global object and properties. Values are from 0 to 100 (percentage scrolled).
To include code that adjusts positioning when the scrollPositioning is updated, add a function named onPageScroll to the script.js file and place your code in this function.
Note
Note: In some instances, there might be network issues that cause the scroll detection code to fail. Make sure that you include a backup functionality for the scroll position.
The Manifest file, config.js, is a metadata file that defines certain default behaviors for an ad that is created in AAS. The config.js file is located in the root folder of the Workspace. The file includes the predefined default settings needed for your simple skin. Depending on your requirements, you can modify these settings. For more information about the manifest configuration settings, see Manifest Ad Data.
The AAS HTML API provides a set of methods, such as user interactions, automatic interactions, and timers that you can use in your code. For more information about these methods, see Methods.
You should load only the modules you will use in each HTML. You can delete or add the video variable in your banner or panel assets, EBModulesToLoad= [ 'Video','EBCMD','EBAPI'], depending if you have a video or not.
It is recommended to load the files from each panel using the parent relative path. The following is an example for loading the files from a panel:
<link rel="stylesheet" href="../../styles/immersiveTakeover_style.css"/> <script>EBModulesToLoad = ['Video','EBCMD','EBAPI'];</script> <script type="text/javascript" src="http://ds.serving-sys.com/BurstingScript/adKit/adkit.js"></script> <script type="text/javascript" src="../../scripts/immersiveTakeover_script.js"></script>
This feature searches for the widest element found on the content of any page, and then automatically sets up the custom variables mdContentPlacementSelector and mdContentWidth. This feature uses the simple skin format in networks with the same tag in rotation.
To enable the automatic detection, change the value of the custom variable mdContentPlacementSelector. The basic method uses
{"automaticDetection": true}
The following table describes the parameters that you can configure to customize the search for an element.
|
Variables |
Description |
Values |
|---|---|---|
|
|
Type of element you want to search on the page |
Default: div Accepted examples include:
|
|
|
Controls the maximum and minimum width of the pixels for the element you are searching |
Default: 300,1800 Accepted: Numbers - minimum/maximum |
|
|
Names of elements that you want to skip during the search process |
Default:
Accepted: String |
|
|
The ID or class names to prioritize in the search process. In instances where a |
Default:
Accepted: String |
The following is a code example of a customized search for an element:
{"automaticDetection":true,"search":"div","horizontalTreshold":"300,1800","avoid":"header,footer,dfp,google,input,search,hide,nav,fb,module,column","priority":"#container,#wrapper,.container,.wrapper,.main,#main"}
Click here to preview a demo of simple skin format.
Comments