If you used a third-party authoring tool, such as a code editor or Adobe Animate, to build your scroll reveal, proceed to set up your ad in Amazon Ad Server (AAS).
Note
Note: If you used Ad Builder to build your scroll reveal, this set up is not required and you can proceed to sharing your ad. For more information, see Share Your Ad.
Before uploading your ad to AAS, verify that you have completed these prerequisites:
-
The folder that contains your assets does not include unnecessary files. For example:
-
Unused assets such as images, videos, or fonts.
-
Work files such as
.psd
,.fla
, or.scss
. -
Hidden files such as
thumbs.db
(Windows) or.DS_Store
(Mac).
-
-
Create a workspace (zip file) for each ad. It is recommended that the zip file name matches the final name of the ad.
-
Each workspace contains its default image (named Default or Backup). This image should be optimized and lightweight.
Note
Note: Naming the workspace and the default image are especially useful when using the Ad Wizard tool to bulk upload your work; the Ad Name field and the Default field will be filled in automatically. For more information, Set up multiple ads using Ad Creation Wizard.
Setting up your ad requires that you start by uploading your workspace to the assets library. Then, set up your ad based on the workspace that you uploaded.
-
Select Creative > Ads.
-
Click New Ad > Blank Ad.
-
Give your ad a meaningful name.
-
In the Ad Format list, select scroll reveal.
-
In the Creative Assets > Main Assets tab:
-
Select the workspace folder and navigate to an uploaded workspace.
Tip
Tip: AAS will default to this folder for the next step.
-
Select the default image.
-
-
Click Save.
-
(Optional) The format settings such as, ad name, default banner, banner settings, clickthrough and custom interactions can be modified if needed in the Ad Settings. For more information, please visit Work with custom interactions.
You can upload and set up multiple ads in a single process using the Ad Creation Wizard. For more information, see Set up multiple ads using Ad Creation Wizard .
After you finish creating your ad, make sure that you preview and test it. For more information, see Preview Your Ads and Test your ads.
Once your ad is created, you can edit custom variables in the Ad setup page, under Settings > Advanced Features.
Variable Name in AAS (Variable Key in config.js) |
Type |
Description |
Default Value |
---|---|---|---|
Auto Snap Type ( |
Integer |
|
3 |
Bottom Bar Color ( |
String |
Any HTML color name or HTML hex color code. |
white |
Bottom Bar Height ( |
Integer |
Height of the bottom text bar in pixels. |
20 |
Bottom Bar Label ( |
String |
Text in the bottom text bar. |
SCROLL TO CONTINUE WITH CONTENT |
Bottom Bar Label Style ( |
String |
CSS style for bottom text bar. |
color:grey; font-size:10px; font-family:arial; text-align:center; |
Collapse After Scroll Away ( |
Boolean |
Determines if the ad should collapse upon scroll away or snap away. |
No |
Display Bottom Bar ( |
Boolean |
Determines if the ad should display bottom text bar. |
No |
Display Top Bar ( |
Boolean |
Determines if the ad should display top text bar. |
No |
Percentage For Snap In ( |
Integer |
Percentage of the browser height, which the ad must exceed, for the snap in when user scrolls the ad into view. |
50 |
Percentage For Snap Out ( |
Integer |
Percentage of the browser height, which the ad must exceed, for the snap out when user scrolls the ad out of view. |
75 |
Top Bar Color ( |
String |
Any HTML color name or HTML hex color code. |
white |
Top Bar Height ( |
Integer |
Height of the top text bar in pixels. |
20 |
Top Bar Label ( |
String |
Text in the top text bar. |
ADVERTISEMENT |
Top Bar Style ( |
String |
CSS style for top text bar. |
color:white; font-size:10px; font-family:arial; text-align:center; |
Top Bounding Selector ( |
String |
HTML selector for the object to which the ad should snap on the top. For example, a publisher site has a Header or Top Menu that the scroll reveal should not cover. Use this custom variable to declare the Header or Top menu element. If the Header is a |
null |
You can set your scroll reveal to serve in one of these loading modes:
-
Instant: The entire unit loads immediately. This is the default behavior.
-
Polite: A lightweight image loads first. The full ad loads after the publisher's page finishes loading.
Note
Note: To show the panel on load make sure to select Overwrite Creative Settings under the Advanced Panel Setting -> Auto-Expand.
For more information about polite loading, see Add polite load to your HTML ads.
Comments