Collapse Ad and pull up the content below it?

338 views
Skip to first unread message

mediaw...@gmail.com

unread,
Feb 28, 2017, 5:53:49 PM2/28/17
to Google Web Designer beta, troy....@mediawelldone.com
We are running an ad that is 970x250 and collapses to 970x90. That is, when the user clicks a "close" button in the top-right corner of the 970x250 page, the ad collapses to a 970x90. The idea is that when the ad is closed, the content below the ad is pulled up.

The way I implemented this was by creating an expandable in GWD, where the banner size is 970x90 and the expanded size is 970x250. I set the default page to be the expanded 970x250, because that's what's supposed to be shown first.

Here's the problem. When the user hits close, the banner collapses as it's supposed to, but it leaves a bunch of white space below it, as if the ad size is still 970x250. What I want it to do is pull the content up below it, but I can't figure out a way to do that. I suspect this is because I set the ad size to be 970x250 in DoubleClick studio, but I have no other choice--if I set the ad to be 970x90, the expanded ad gets cut off at a height of 90px, even if I manually set the expanded height to be 250px!

My work-around is kind of a hack. This works, but I am not happy with it at all. I make the default page the 970x90 banner page, but I added an event such that the ad goes to the expanded page as soon as the banner page loads. I am able to get the content below it to push down because I checked the "push down" checkbox in DoubleClick studio.

I feel like I've tried everything. What am I missing here? Is this simply not possible? I'd appreciate any advice.

San Khong

unread,
Feb 28, 2017, 7:45:25 PM2/28/17
to Google Web Designer beta, troy....@mediawelldone.com
It looks like your hack is the way to do it.  The DoubleClick expansion build guide shows the same recommendation (optional section at the bottom) that you should auto expand when the page is loaded. I cannot think of another way either. Can you please let us know why you do not like the workaround?

Thanks,
San
Google Web Designer team

mediaw...@gmail.com

unread,
Mar 1, 2017, 2:14:11 PM3/1/17
to Google Web Designer beta, troy....@mediawelldone.com
Thanks for the response, San. If there isn't really another way to do it, then I can't really complain.

My problem with this method is that the banner page is shown for a split second before the page auto-expands. I'm not writing any custom Javascript to do this, but I am using the following event from the GWD user interface:

banner-page > page activated > go to page > pagedeck > expanded page

If I could figure out how to prevent the ad from showing the banner size for a split-second, I'd be golden. Should I be writing javascript to auto-expand, or is there some other event I could use in GWD?

San Khong

unread,
Mar 1, 2017, 2:40:56 PM3/1/17
to Google Web Designer beta, troy....@mediawelldone.com
One workaround I found to avoid that split-second is to temporarily hide the elements in the banner page (you can do this in the Properties panel for the elements to set Visibility to hidden or do it in the CSS panel).  In the banner-page > page activated event, choose custom action, and set it to go to the expanded page and show the elements in the banner page again after half a second or so.

Something like this in the custom action with the gwd-image_1 element in banner-page:
gwd.actions.gwdPagedeck.goToPage('pagedeck', 'expanded-page', 'none', 1000, 'linear', 'top');
setTimeout(function() {
  gwd.actions.events.setInlineStyle('gwd-image_1', 'visibility: visible; ');
}, 500);

I noticed that if I don't use setTimeout, the visibility visible is set too quickly and it still shows the elements in the banner page for a split second.  But using setTimeout seems to work for me.

Hope it helps.
Reply all
Reply to author
Forward
0 new messages