Parallax is a beautiful, immersive display format designed for mobile web. It leverages a layered, parallax animation effect to capture attention in an interesting and non-intrusive way. The format creates a unique perception that different image layers of the ad have different depths. As the viewer scrolls through content on their phone, the ad is fully revealed.
Design your creative using Google Web Designer
To get started designing your parallax ad, open Google Web Designer and drag the Parallax component to the stage.
Start from a layout
To get some inspiration or to get a jump start on your creative design, you can open one of the following pre-built layouts in Google Web Designer. To find them, open Google Web Designer, then select Use template. The Template Gallery will open. From there, select Parallax for Display & Video 360, then select one of the following layouts:
- Parallax Reveal
- Parallax Particles
- Parallax Lockup
Parallax Sliding Into Position
Add an exit
Make sure to add at least one button or hotspot a consumer can click to go to your advertiser landing page. To add an exit, use Google Web Designer's Tap Area component. No custom code is required.
- Be sure your ad has a button or other clear visual call-to-action element for the user to click or touch.
- Drag the Tap Area component from the Interaction folder of the Components panel to the stage, and position it over the call to action.
- Click the new event button in the Events panel.
- In the event dialog, select the following options:
Target The Tap Area component (
Event Tap Area > Touch/Click Action Google Ad > Exit Receiver
- Metrics ID - A label (e.g., "CTA") to make reports easier to understand.
- URL - The exit URL.
- Collapse on exit - For expandable ads, check to collapse the ad when the user closes the ad.
- Pause media on exit - Check to stop video and audio playback when the user closes the ad.
- Collapsed page on exit - For expandable ads, the page to show when the user closes the ad.
When your creative is ready, publish locally from Google Web Designer, then upload it to Display & Video 360 as an HTML5 creative.
Open an advertiser, then click Creatives in the left menu.
Click New Upload HTML5 or image.
Enter a name for the creative in Display & Video 360.
To add your creative files, drag the published creative .zip file from your computer and drop it over "Drag file here". Or, click Upload, then select the .zip file from your computer. Learn what to include in HTML5 zip files
If your HTML5 upload is rejected, use the HTML5 Validator to test zip files and learn how to fix problems.
Upload a backup image, and enter a separate landing page and reporting label for when the backup is shown.
(Optional) Upload a polite load image. This image is shown when there are delays loading your primary creative files, or on slower network connections.
In the Events section, review and edit the exits detected in the creative. For each exit (or click tag) you can edit the landing page URL, beginning with
https://. To edit the reporting label or URL, hover over the row, then click Edit .
After you save the creative, it may take a few minutes for an updated landing page to appear in preview or in your synced Campaign Manager advertiser.
(Optional) Click Additional details to append a tracking tag to the creative, add an integration code, or notes.
Save your creative.
Parallax is currently only eligible on Ad Manager inventory. Parallax teases users through a cool scroll-based interaction, and as such, it is designed for below-the-fold inventory. When you set up targeting, target smartphone inventory that's below-the-fold.
Use the following settings to properly target eligible inventory:
Viewability: Active view - All impressions (greatest reach), Ad Position - Below the fold
If you're a publisher or exchange who's looking to serve Parallax creatives, the only requirement is that you have below-the-fold inventory that uses Google Publisher Tags, which allows the creative to respond to scroll events.