Engagements Ads Badge
Certification PREP COURSE
Google Confidential and Proprietary
Training Agenda
● Engagement Ads overview
● GDN Lightbox formats
● GDN HTML5 Lightbox
● Using our Engagement Ads API’s
● Specs and Requirements
Visit our Rich Media Help Center: support.google.com/richmedia
Google Confidential and Proprietary
Engagement Ads overview
Visit our Rich Media Help Center: support.google.com/richmedia
Google Confidential and Proprietary
What are Engagement Ads?
●
Engagement Ads are creative ad formats
that that help you connect and engage with
consumers in the moments that matter.
●
They fit into standard ad display units, and
can expand to a larger size.
●
Can be built in DoubleClick Studio following
the standard Rich Media process.
●
Can include multiple levels of content within
one creative.
Visit our Rich Media Help Center: support.google.com/richmedia
Google Confidential and Proprietary
File Structure
1.
Set up your files
2.
Add the enabler
3.
Add lightbox component
4.
Add a polite load
5.
Add an expand button
6.
Set up lightbox expand & collapse
7.
Add custom tracking
8.
Upload to Studio
●
Parent file as the shell for the expanded unit
●
Create a collapsed file that will be loaded into
the parent file
●
Create an expanded lightbox panel that will
be loaded into the parent file
●
Create a backup image
Visit our Rich Media Help Center: support.google.com/richmedia
Google Confidential and Proprietary
File Structure
1.
Set up your files
2.
Add the enabler
3.
Add lightbox component
4.
Add a polite load
5.
Add an expand button
6.
Set up lightbox expand & collapse
7.
Add custom tracking
8.
Upload to Studio
●
Is required for all rich media creatives
●
Includes standard tracking functionalities
○ Display time, number of impression,
interaction time, etc…
●
Can handle more complex functions
Visit our Rich Media Help Center: support.google.com/richmedia
Google Confidential and Proprietary
File Structure
1.
Set up your files
2.
Add the enabler
3.
Add lightbox component
4.
Add a polite load
5.
Add an expand button
6.
Set up lightbox expand & collapse
7.
Add custom tracking
8.
Upload to Studio
●
Delays the loading of additional creative
assets (child SWF) until the page has finished
loading
●
DoubleClick Studio does not require that
your files use polite load but most websites
do
●
Loads in your collapse panel
Visit our Rich Media Help Center: support.google.com/richmedia
Google Confidential and Proprietary
File Structure
1.
Set up your files
2.
Add the enabler
3.
Add lightbox component
4.
Add a polite load
5.
Add an expand button
6.
Set up lightbox expand & collapse
7.
Add custom tracking
8.
Upload to Studio
●
Drag & Drop it to the stage or use the API
●
Must have the same size as collapse panel
●
Position it to the center of stage
Visit our Rich Media Help Center: support.google.com/richmedia
Google Confidential and Proprietary
File Structure
1.
Set up your files
2.
Add the enabler
3.
Add lightbox component
4.
Add a polite load
5.
Add an expand button
6.
Set up lightbox expand & collapse
7.
Add custom tracking
8.
Upload to Studio
●
Create a button in your parent file and
name it: expandBtn
●
Expands the creative when users rolls over
the expandBtn button
●
Place it over the entire collapse area
Visit our Rich Media Help Center: support.google.com/richmedia
Google Confidential and Proprietary
File Structure
1.
Set up your files
2.
Add the enabler
3.
Add lightbox component
4.
Add a polite load
5.
Add an expand button
6.
Set up lightbox expand & collapse
7.
Add custom tracking
8.
Upload to Studio
●
Create holder movieclip
●
Use API for Lightbox expand & collapse
●
Load expanded file with StudioLoader object
●
Use expandComplete and
collapseComplete events to display or
hide Lightbox creative
●
Collapse creative on EXIT
Visit our Rich Media Help Center: support.google.com/richmedia
Google Confidential and Proprietary
File Structure
1.
Set up your files
2.
Add the enabler
3.
Add lightbox component
4.
Add a polite load
5.
Add an expand button
6.
Set up lightbox expand & collapse
7.
Add custom tracking
8.
Upload to Studio
●
Tracking lets the advertiser learn what works
and what doesn’t work with their target
audience
●
You can add up to 100 customer tracking
elements (exits, counters, and timers) to a
single creative
●
Add custom counters when the expanded
panel is fully loaded
Visit our Rich Media Help Center: support.google.com/richmedia
Google Confidential and Proprietary
File Structure
1.
Set up your files
2.
Add the enabler
3.
Add lightbox component
4.
Add a polite load
5.
Add an expand button
6.
7.
8.
In the Studio Web UI, you can:
●
Upload your creative assets
●
Set exit URLs
●
Preview creatives
●
Test custom tracking
●
Generate client preview links
●
Submit creative to QA for testing
●
Push creatives to your client’s DFA or DFP
account
Set up lightbox expand & collapse
Add custom tracking
Upload to Studio
Visit our Rich Media Help Center: support.google.com/richmedia
Google Confidential and Proprietary
GDN Lightbox formats
Visit our Rich Media Help Center: support.google.com/richmedia
Google Confidential and Proprietary
Standard lightbox
Build Requirements:
●
Built like an expanding creative
○ Enabler & Loader Component for
Polite Load & Expanding Component.
○ A visible 1px. border in a color that contrasts
with the rest of the initial load content.
○ Initial load state should include a static,
branded image or loading animation.
○ Stage of your parent file must match
dimensions of the of the largest stage of your creative.
●
Include the Lightbox component for Lightbox functionality.
Visit our Rich Media Help Center: support.google.com/richmedia
Google Confidential and Proprietary
Masthead lightbox
●
●
●
Based on the YouTube masthead format
○ Lets advertisers capitalize on masthead assets by re-using them
in the GDN Lightbox format.
○ Built as an expandable.
Uses the Lightbox component.
remove YouTube
Remember to remove the YouTube close button from the
“Close Ad” button
stage and the library of your Flash assets.
Visit our Rich Media Help Center: support.google.com/richmedia
Google Confidential and Proprietary
Masthead lightbox
Build Requirements:
●
Polite load, invitation, and expanded panels.
●
Enabler & Loader Component for Polite Load & Expanding
Component.
●
Can use the Studio video player or the YouTube video player.
Visit our Rich Media Help Center: support.google.com/richmedia
Google Confidential and Proprietary
Catalog lightbox
Build Requirements:
●
Lightbox that expands
to reveal a Google Catalog.
●
Enabler & Loader
Component for Polite Load &
Expanding Component.
●
Built as expandable.
●
Uses the Lightbox component.
●
Set your Google Catalogs URL
within the Lightbox component (or
through the API) using the
catalogURL property.
Visit our Rich Media Help Center: support.google.com/richmedia
Google Confidential and Proprietary
HTML5 lightbox
Build Requirements:
●
Similar to the Lightbox, but built in
HTML5 and can display across mobile web.
●
Built as an HTML5 expandable.
●
Remove the close button if
re-purposing assets.
●
There is no HTML5 Lightbox component.
○ Instead, add expansionMode=lightbox
into the Additional Key-Values field in
DFA/DCM.
●
You can test your creative on a GDN
test page by following the steps in the
Rich Media Help Center.
Visit our Rich Media Help Center: support.google.com/richmedia
Google Confidential and Proprietary
Using our Engagement Ads APIs
and components
Visit our Rich Media Help Center: support.google.com/richmedia
Google Confidential and Proprietary
Lightbox API
API Documentation
●
●
can be found here
explains all methods and
properties of the
component’s API
Visit our Rich Media Help Center: support.google.com/richmedia
Google Confidential and Proprietary
Lightbox API
Instantiate the component
import com.google.ads.studio.innovation.lightbox.proxy.Lightbox;
var lightbox:Lightbox = new Lightbox();
// Component size represents the collapsed size, and it will automatically
// center itself to the stage for smoother expands.
lightbox.width = 300;
lightbox.height = 250;
addChild(lightbox);
Visit our Rich Media Help Center: support.google.com/richmedia
Google Confidential and Proprietary
Lightbox API
Animated collapse and expanded dimensions
// If you want an animated collapse.
lightbox.proxy.animatedCollapse = true;
// REQUIRED. Set the expansion size. Your Flash stage size must be large
// enough to accommodate both the collapsed and expanded size.
lightbox.proxy.expandedWidth = 600;
lightbox.proxy.expandedHeight = 400;
Visit our Rich Media Help Center: support.google.com/richmedia
Google Confidential and Proprietary
Lightbox API
Expanded file and collapsed content setup
// You can have a child file load/unload automatically on expand/collapse.
// To avoid security errors or unexpected behavior, make sure to add the
// following line (uncommented) inside the child fla:
// Security.allowDomain("www.gstatic.com");
lightbox.proxy.expandedFilePath = "expandedChild.swf";
// Add content to the component to get automatic positioning & visibility
// during expand & collapse.
lightbox.proxy.addCollapsedContent(collapsedContent);
Visit our Rich Media Help Center: support.google.com/richmedia
Google Confidential and Proprietary
Lightbox API
Registering listeners to monitor expand and collapse
// Add listeners to perform custom actions when creative expands/collapses.
lightbox.addEventListener("expandComplete", expandCompleteHandler);
lightbox.addEventListener("collapse", collapseHandler);
lightbox.addEventListener("collapseComplete", collapseCompleteHandler);
// Expanding the creative should only be called on user rollover.
// expandButton is an example button instance on the stage.
expandButton.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
Visit our Rich Media Help Center: support.google.com/richmedia
Google Confidential and Proprietary
Lightbox API
Enabling the expand and collapse functionality
function expandCompleteHandler(event:Event):void { trace("expanded"); }
function collapseHandler(event:Event):void {
// Since you used animatedCollapse, you would start that animation now.
// But don't forget to call the following when animation completes:
lightbox.proxy.endAnimatedCollapse();
}
function collapseCompleteHandler(event:Event):void {
trace("collapse completed");
}
function rollOverHandler(event:MouseEvent):void {
lightbox.proxy.expand();
}
Visit our Rich Media Help Center: support.google.com/richmedia
Google Confidential and Proprietary
Google Catalog Lightbox API
Instantiate the component and set dimensions
import com.google.ads.studio.innovation.lightbox.proxy.Lightbox;
var lightbox:Lightbox = new Lightbox();
lightbox.width = 300;
lightbox.height = 250;
// For Google Catalogs, the recommended expanded size is 900 by 600.
lightbox.proxy.expandedWidth = 900;
lightbox.proxy.expandedHeight = 600;
Visit our Rich Media Help Center: support.google.com/richmedia
Google Confidential and Proprietary
Google Catalog Lightbox API
Setup catalog url and expand handlers
lightbox.proxy.catalogUrl = "http://www.google.com/catalogs/i?
id=6022938_d54c3792_ed04e120";
// Optionally you can also choose to open the catalog to a specific page
// by appending #start=pagenumber to the end. The following catalog
// would load and display page 3 instead of the catalog cover:
// http://www.google.com/catalogs/i?id=6022938_d54c3792_ed04e120#start=3
// Expanding the creative should only be called on user rollover.
// expandButton is an example button instance on the stage.
expandButton.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
function rollOverHandler(event:MouseEvent):void {
lightbox.proxy.expand();
}
Visit our Rich Media Help Center: support.google.com/richmedia
Google Confidential and Proprietary
Lightbox Component
●
The Lightbox Proxy has its own MXP
which can be downloaded from the API
page here
●
After installation, the component appears
under the “DoubleClick Innovation AS3”
folder in the Flash component window
Visit our Rich Media Help Center: support.google.com/richmedia
Google Confidential and Proprietary
Lightbox Component
●
Unlike other component and due to the
complexity of the lightbox API, the
properties panel only exposes on
property
○ remoteComponentVersion which
should be set to “1” in almost all
cases
Visit our Rich Media Help Center: support.google.com/richmedia
Google Confidential and Proprietary
Specs and Requirements
Visit our Rich Media Help Center: support.google.com/richmedia
Google Confidential and Proprietary
Technical Requirements: Lightbox
●
●
●
●
●
Invitation state
○ An expansion call-to-action (CTA) is required. For example: “Hover to Expand”
○ Cannot contain exit hotspots
Load sizes
○ Initial load size: 150KB maximum is recommended for fastest initial load time
○ Total non-user initiated load size: 2.2MB maximum (includes initial and
subsequent/polite loads)
○ Viewer initiated load size: 10MB maximum per interaction
○ Backup Image: 150KB maximum
Close button
○ The Lightbox component automatically adds a Close button in the top-right
corner of the creative.
Video
○ Autoplay video: 30 seconds maximum
○ Viewer initiated video must have player controls and 4 minutes maximum per
video
Exit on expanded state
○ Creative must collapse
○ All sound and video must stop
Visit our Rich Media Help Center: support.google.com/richmedia
Google Confidential and Proprietary
Technical Requirements: Standard Expandable
●
●
●
●
●
●
Invitation state
○ Cannot contain exit hotspots
Expansion methods
○ Rollover to expand units
○ An engagement ad must be built as multi-directional expandable (MDE)
Load sizes
○ Initial load size: 150KB maximum is recommended for fastest initial load time
○ Total non-user initiated load size: 2.2MB maximum (includes initial and
subsequent/polite loads)
○ Viewer initiated load size: 10MB maximum per interaction
○ Backup Image: 150KB maximum
Close button
○ Must have a prominent Close X button
Video
○ Autoplay video: 30 seconds maximum
○ Viewer initiated video must have player controls and 4 minutes maximum per
video
Exit on expanded state
○ Creative must collapse
○ All sound and video must stop
Visit our Rich Media Help Center: support.google.com/richmedia
Google Confidential and Proprietary
That's it!
You're ready to get your Engagement
Ads Badge!
Google Confidential and Proprietary
© Copyright 2024 ExpyDoc
