Note
Note: To learn more about this format or to see build guides for other authoring tools, see About scroll reveal. For an overview of Amazon Ad Server (AAS) Ad Builder, see Introduction to Ad Builder .
The following image shows an example of the Ad Builder interface displaying the various panes that are available when creating an ad. Refer to this image and the procedure to get familiar with actions you should perform every time you create a scroll reveal in Ad Builder.
-
Click the settings icon next to the logo to verify that the ad format, scroll reveal, is defined correctly. You can change the ad name and custom variables. For more information, see Customizing scroll reveal.
-
By default, the panel dimension for the ad is set to 300x250. You can change the dimensions in the Properties pane.
-
Select/clear the check box if you want the panel to have responsive or fixed dimensions. Selecting responsive will have the ad adapt itself to 100% width/height of the monitor used.
Note
Note: For fixed dimensions, change the Positioning Type to Page Relative - Percentage, X: 50, y: 50.
-
In the Components pane, click Hotspot to add a click-through button. This button creates a transparent overlay that makes your creative clickable. In the Properties pane, set the width and height to match your ad, and set the X and Y coordinates to 0.
-
In the Actions and Animations pane, click Create New Event, and then select Tap/Click as the event type.
-
Add a click-through action to ensure that the entire hotspot is clickable.
-
Click Save.
The following table presents the most common custom variables that you can set using the settings icon (Ad Settings).
Variable Name |
Type |
Description |
Default Value |
---|---|---|---|
Auto Snap Type |
Integer |
|
3 |
Bottom Bar Color |
String |
You can put any HTML color name or HTML hex color code. |
white |
Bottom Bar Height |
Integer |
Height of the bottom text bar in pixel. |
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 ad should be collapsed when scroll away or snap away. |
False |
Display Bottom Bar |
Boolean |
Determines if the ad needs to display bottom text bar. |
False |
Display Top Bar |
Boolean |
Determines if the ad needs to display top text bar. |
False |
Percentage For Snap In |
Integer |
Determines the percentage of the browser height that ad must exceed for the snap in when user scrolls the ad in. |
50 |
Percentage For Snap Out |
Integer |
Determines the percentage of the browser height that the ad must exceed for the snap out when user scrolls the ad away. |
75 |
Top Bar Color |
String |
You can put any HTML color name or HTML hex color code. |
white |
Top Bar Height |
Integer |
Height of the top text bar in pixel. |
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 |
The HTML selector for the object to which the ad should snap on the top. For example, some publisher sites have a header or top menu that should not be covered by scroll reveal. In this case, use this custom variable to declare the header or top menu element. If the header is a |
null |
Note
Note: These instructions are not part of the mandatory procedure. You can use them to create a reusable template if required.
Clicking the arrow next to Save, and selecting Save as template enables you to save your layout as a template. This template will be available for all users in your account, and can speed up your workflow the next time you build a scroll reveal.
Now that the essentials of your creative are set, you can start creating and animating the content. For more information, see the following :
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.
Comments