PRODUCT
Follow

Note

Note: To learn more about this format, preview a demo, or to see build guides for other authoring tools, see About Simple Skin.

Create an Ad using a Sizmek Ad Suite Template

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_0.zip

Amz_SimpleSkin_1_0_0_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.

Included Files

The following files are included in the workspace template download:

File Name

Description

Required

index.html

HTML file for the banner.

Required

config.js

Configuration/Manifest file for the ad. Used for actions such as default ad settings, and Dynamic Creative.

Optional

panels/headers/index.html

HTML file for header panel.

Required

panels/left_gutter/index.html

HTML file for the left gutter panel.

Required

panels/right_gutter/index.html

HTML file for the right gutter panel.

Required

styles/immersiveTakeover_style.css

Basic style sheet for Simple Skin.

Optional (if code is included in the HTML file)

styles.style.css

Style sheet for the banner and its HTML elements.

Optional (if code is included in the HTML file)

panels/header/styles/style.css

Style sheet for header panel creative.

Optional (if code is included in the HTML file)

panels/left_gutter/styles/style.css

Style sheet for left gutter panel creative.

Optional (if code is included in the HTML file)

panels/right_gutter/styles/style.css

Style sheet for right gutter panel creative.

Optional (if code is included in the HTML file)

scripts/immersiveTakeover_scripts.js

Core script to use and initialize a Simple Skin ad.

Required

panels/header/scripts/script.js

Core script for the header panel.

Required

panels/left_gutter/scripts/script.js

Core script for the left gutter panel.

Required

panels/right_gutter/scripts/script.js

Code script for the right gutter panel.

Required

images/1x1.jpg

1x1 backup image for the banner.

Required

images/bg.jpg

Serves as a background image

Optional

images/logo.jpg

Additional Image asset

Optional

Setting up your Ad in Sizmek Ad Suite

After you finish creating your ad, proceed to setting up your ad in Sizmek Ad Suite (SAS). For more information, see: Set up a Simple Skin.

Additional Resources

Preparing for Bulk Upload

If you are planning to upload multiple ads, make sure that the Ad Creation Wizard in SAS recognizes your workspace as a Rich Media Banner 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.

Shared Libraries

If you are developing ads with 3rd party libraries, use the SAS-hosted versions of dependencies listed in the Ad Serving Shared Libraries.

Dynamic Creative Optimization

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.

Advanced Configuration

Custom Variables

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 SAS

Description

Type

Default and Accepted Values

Right Gutter Name

(mdRightGutterName)

Right gutter panel name as set in SAS.

String

Default: rightGutter

Left Gutter Name

(mdLeftGutterName)

Left gutter panel name as set in SAS.

string

Default:leftGutter

Position

(mdPosition)

Gutters div positioning style.

String

Default: fixed

Accepted: fixed or scroll

Page Background

(mdPageBackground)

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

(mdAutoRepositionInterval)

Panel reposition interval. Set to 0 to turn off the interval. Panels reposition in every "n" milliseconds.

Number

Default: 100

Content Width

(mdContentWidth)

Page content width.

Number

Default: 970

Eye Div ZIndex

(mdEyeDivZIndex)

Default z-index of the eye div.

String

Default: undefined

Gutters Default Height

(mdGuttersDefaultHeight)

Gutters default height.

Number

Default: 1000

Gutter Top Position

(mdGutterTopPos)

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

(mdHeaderPanelName)

Header panel name as set in SAS.

String

Default: header

Header Size Inheritence

(mdHeaderSizeInheritence)

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

(mdMinHeaderWidth)

Minimum header width if custom script fails to read page content width.

Integer

Default: 970

Header Panel Top Offset

(mdHeaderPanelTopOffset)

Top offset to display above the header panel.

Integer

Default: 0

Header Panel Bottom Offset

(mdHeaderPanelBottomOffset)

Bottom offset to display above the header panel.

Integer

Default: 0

Show Gutters

(mdShowGutters)

Show or hide gutters.

Boolean

Default: true

Content Offset

(mdContentOffset)

Number of pixels of padding between the width of the content and the start of the gutter panels.

Integer

Default: 0

Content Placement Selector

(mdContentPlacementSelector)

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, mdContentWidth, mdContentAlignment, and mdContentXPosOffset are ignored and are calculated by using the width and location of this element. This is used for purposes of positioning the gutter elements.

There is a new and experimental method to get the widest element from any page automatically by enabling {"automaticDetection": true}.

Note

Note: You will find more details about this feature below.

String

Default: 0

Content X Pos Offset

(mdContentXPosOffset)

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 mdContentPlacementSelector is undefined. This is used for purposes of positioning the gutter elements.

Integer

Default: 0

Header Inject Type

(mdHeaderInjectType)

Header panel injection type.

String

Default: after

Accepted:

  • first: Insert as a first child a div.

  • last: Insert as a last child of a div.

  • after: Insert after a div.

  • before: Insert before a div.

Header Offset

(mdHeaderOffset)

Vertical offset from header; affects header panel and gutter panels.

Integer

Default: 0

Header Placement Selector

(mdHeaderPlacementSelector)

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

(mdIsDomainConfigEnabled)

Determines whether to load the programmatic settings.

Boolean

Default: false

Programmatic Settings Folder Path

(mdProgrammaticSettingsFolderPath)

Location from which to load the programmatic settings files.

String

Default: //services.serving-sys.com/programmatic/DomainList/

Gutter Minimum Width

(mdGutterMinWidth)

Right gutter minimum width.

Integer

Default: 100

Gutter Max Width

(mdGutterMaxWidth)

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

(mdAutoScrollTopOnOrientation)

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

Custom Interactions

The following custom interactions are reported by the ad and can be reviewed in SAS reporting (besides standard ad interactions).

Interaction Name

Description

click_left_gutter

Click-through fired once the user clicks the click-through button that appears in the left gutter.

click_right_gutter

Clickthrough fired once the user clicks the click-through button that appears in the right gutter.

click_header

Click-through fired once the user clicks the background panel.

clickable_gutters

Click-through fired once the user clicks the background image when the clickable option is enabled in the custom variable mdPageBackground.

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.

Load and initialize the Simple Skin format

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.

Initializing Gutters

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);

Initializing Header

Add the following lines to your code to initialize a header:

var config = { 
  panel: "header"
};
var immersiveTakeover = new immersiveTakeover(config);

Synchronize Panels

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

Injecting a background image on the publisher's page

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.

Method A: Custom Variable mdPageBackground

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

enabled

Enables or disables this feature. If set to TRUE, the background is injected on the publisher's site.

Default: false

Accepted: true/false

img

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

color

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

size

Determines the background size on the page. For more information, click here.

Default: cover

Accepted: For example, cover ,contain, auto, percentage

position

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

repeat

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

attach

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

fade

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

fade_time

Duration of the tween animation when the background is injected on the publisher's site.

Default: 3000

Accepted: Number in milliseconds

inject

Element in the DOM that is applied to the setup. You can select a class (.myClass), id (#myDiv), or tag name (header).

Default: body

Accepted: Any element in the DOM of the page

injectType

Methods to inject the background on the publisher's page include the following:

  • div: Background is injected inside of a Div (mdBackground). The Div is inserted in the element that you select in the inject variable.

  • style: Background is injected in the style (CSS) of the element that you select in the inject variable.

Note

Note: When the image is shown, this option will not have a fade-in/out (tween).

Default: Div

Accpted: style or div

clickable

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

Method B: Invoke the changePageBackground Function

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.

Method C: mediaQueries

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

mediaQuery

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 @media in the string. For more information, click here.

Examples of media queries include the following:

  • For mobile in portrait and landscape: only screen and (min-device-width:375 px) and (max-device-width:667 px)

  • For mobile in landscape mode only: only screen and (min-device-width:690 px) and (orientation : landscape))

  • For tablets in portrait mode only: screen and (min-width:690 px) and (max-width:995 px) and (orientation:portrait)

  • For all devices with a resolution between 0 px and 959 px:screen and (min-width:0 px) and (max-width:959 px)

setupBackground

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:

  • color

  • size

  • position

  • attach

  • repeat

  • fade

  • fade_time

  • inject

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
}

Common Customizations

Detect Scroll Position

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.

Manifest Configuration (config.js file)

The Manifest file, config.js, is a metadata file that defines certain default behaviors for an ad that is created in SAS. 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.

Additional Methods

The SAS 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>

Automatic Detection of the Widest Element

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

search

Type of element you want to search on the page

Default: div

Accepted examples include:

  • div

  • header

  • span

  • button

horizontalTreshold

Controls the maximum and minimum width of the pixels for the element you are searching

Default: 300,1800

Accepted: Numbers - minimum/maximum

avoid

Names of elements that you want to skip during the search process

Default:

  • header

  • footer

  • dfp

  • google

  • input

  • search

  • hide

  • nav

  • module

  • column

Accepted: String

priority

The ID or class names to prioritize in the search process. In instances where a priority element is found, the element is checked, if it is not tagged as an avoid element. For example, #container hide will be avoided because it contains the word hide.

Default:

  • #container,

  • #wrapper

  • container

  • wrapper

  • main

  • #main

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"}

Demo

Click here to preview a demo of Simple Skin format.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments