Search
Clear search
Close search
Google apps
Main menu

Clickable skin

Use the Clickable Skin component to grab a user’s attention by replacing the entire background of the publisher's page with your own clickable wallpaper. The wallpaper includes a list of customizable properties including the option to push down the website content to show the skin in a top bar. The component can be placed in a Studio creative of any format.

Features

  • Supports fixed/scroll attachment, background repeat, background position and more
  • Can toggle visibility at runtime
  • Independent handling of top-left-right clickable areas
  • Can push down the main website content to show the skin at the top
  • Supports multiple background images
  • Automatic custom layout adjustments for whitelisted domains

Prerequisites

  • Your creative must be built as an HTML5 creative.
  • You must import the DoubleClick Studio Enabler into your HTML file.
  • You must import the Polymer custom elements library into your HTML file.

Imports

Before using the Clickable Skin component, you must first include these scripts in the head of your creative's HTML file.

  1. DoubleClick Studio Enabler, the core code library of DoubleClick Studio.
  2. Polymer custom elements library, allows the creation of custom HTML elements that are reusable, encapsulated and can work for both desktop and mobile.
  3. Clickable Skin component library.
<script src="//s0.2mdn.net/ads/studio/Enabler.js"></script>
<script src="//www.gstatic.com/external_hosted/polymer/custom.elements.min.js"></script>
<script     src="//www.gstatic.com/ads/ci/studio/clickableskin/1/clickableskin_min.js"></script>

Set up the component

There are two ways to add the component to your creative. You can either add the Clickable Skin tag to your HTML, or create an instance in your JavaScript.

Choose one of the options below:

Add the Clickable Skin custom element tag to your HTML file
<ci-studio-clickableskin backgroundcolor="#d57a4d"     backgroundimagefilename="wallpaper.jpg" topsideheight="160">
</ci-studio-clickableskin>
Create an instance of the ClickableSkin class in your JavaScript file
var skin = new ci.studio.clickableskin.ClickableSkin(); skin.setAttribute('backgroundcolor', '#d57a4d'); skin.setAttribute('backgroundimagefilename', 'wallpaper.jpg'); document.body.appendChild(skin);

Customize component settings

Clickable Skin includes many properties that you can apply or change to customize the appearance and behavior of your creative. Expand the sections below to learn about available attributes and see example tags.

Background image and color

You can set the background image to be used as wallpaper, then position and style it with the following attributes.

  • backgroundimagefilename The name of the JPG, GIF, or PNG file, uploaded to Studio with the creative, to be used as the background wallpaper.
  • backgroundattachment Whether the background image should scroll with the page or always be visible.
    Valid values: scroll or fixed.
  • backgroundposition Where to position your skin relative to the top left corner of the page.
    Valid values: center top or left top.
    Default: center top.
  • backgroundrepeat Whether the background image should be repeated across the page.
    Valid values: no-repeat, repeat, repeat-x, or repeat-y.
    Default: no-repeat.
  • usebackgroundcolor Whether to change the background color of the page (visible in the areas not covered by the wallpaper image).
    Valid values: false or true.
    Default: false.
  • backgroundcolor The color to use for the page background (visible in the area not covered by the wallpaper image).
    Valid values: CSS legal color values. For example, #d57a4d.
Example tag

To use an image file called wallpaper.jpg with a #ff0000 (red) background color, which doesn't scroll with the page, is positioned at the top center of the page and doesn't repeat:

<ci-studio-clickableskin
    backgroundimagefilename="wallpaper.jpg" usebackgroundcolor="true"
    backgroundcolor="#ff0000" backgroundattachment="fixed"
    backgroundposition="center top" backgroundrepeat="no-repeat">
</ci-studio-clickableskin>
Visibility and clickability

The following attributes control the visibility of the wallpaper and whether it is enabled (clickable) or not. These attributes can also be changed at runtime.

  • visible Whether the skin is visible.
    Valid values: false or true.
    Default: true.
  • enabled Whether skin is clickable.
    Valid values: false or true.
    Default: true.
Example tag

To create a skin which is visible but not clickable:

<ci-studio-clickableskin
    backgroundimagefilename="wallpaper.jpg" visible="true" enabled="false">
</ci-studio-clickableskin>
Top, left, and right clickable areas

Separately manage the top, left and right clickable areas using the following properties.

  • topsideisclickable, leftsideisclickable, rightsideisclickable Whether the top, left, right areas are clickable.
    Valid values: false or true.
    Default: true.
  • topsideheight Sets the height, in pixels, of the top area. It also pushes down the website content of an equal amount of pixels in order for this upper part of the skin to be visible.
    Default value: 0.
  • leftsidewidth, rightsidewidth Sets the width, in pixels, of the left and right area respectively.
    Default value: 0, which sets an area to 100% of the page width.
  • topsideexitname, leftsideexitname, rightsideexitname Changes the name of the exit events fired when the top, left or right area is clicked. All exit event values must be manually added via code in the main HTML file or in the Studio UI in order to function correctly.
    Default value: "Skin Exit".
Example tag

To create a skin with a 160 pixel high, top clickable area, and with a "Top Click" exit name:

<ci-studio-clickableskin
    backgroundimagefilename="wallpaper.jpg" topsideheight="160"
    topsideexitname="Top Click" leftsideisclickable="false"
    rightsideisclickable="false">
</ci-studio-clickableskin>
Publisher page settings

There are two additional attributes to better adapt the Clickable Skin component to specific publisher layouts.

  • appendtodivid Assigns the wallpaper image to the <div> with the id provided instead of the document body.
    Valid value: The name of a publisher page <div> id. For example, "wallpaper-div". There must be a corresponding element on the publisher page with the id.
  • sitewidth Sets the site width, in pixels, manually. Providing this value may help if clicks are not correctly firing an exit in some areas. By default the component automatically recognizes the width of the main content of the site in order to correctly detect the clicks on the side areas.

Troubleshooting

  • Your ad must be trafficked with a JavaScript tag. Iframe tags will not work.
  • It's recommended to run a publisher page test first to make sure the page layout is compatible. Some pages may have layered content that can obscure the creative wallpaper.
Was this article helpful?
How can we improve it?