Expand ad on extended mouseover

[acmey...@gmail.com]

I have an expanding ad that needs to expand when the user hovers for three seconds.

The closest I've gotten is delaying the transition using:

setTimeout(nextPage, 3000);

function nextPage() {
document.getElementById('pagedeck').goToNextPage();
}

But after I traffic that in DCS it doesn't work the same. The creative all works as it should, but the banner's window doesn't expand to the new size, so most of the creative isn't visible.

Even if that were to work, it doesn't solve my problems exactly as I need since once the user has hovered over the ad at all the transition is inevitable instead of requiring the full three seconds of hover.

Thanks in advance for any help!

[San Khong]

Hi acmeyers00,

I tried the same thing and the only difference is I use the following custom action for mouseover event on the banner page:

setTimeout(nextPage, 3000);

function nextPage() {

  gwd.actions.gwdDoubleclick.goToPage('gwd-ad', 'expanded-page', 'none', 1000, 'linear', 'top');

}

It expands after 3 sec of mouseover on DoubleClick Studio preview. I also attached the sample file.

Hope if helps.

San

Google Web Designer team

[acmey...@gmail.com]

Hi San,

Thanks for your reply! Your solution fixed the issue of the banner not expanding to the whole height after mouseover.

So we still need a way to have the action dependent on three full seconds of hover, but at least now we can see all the content!

Thanks,

Austin

[San Khong]

Hi Austin,

My solution works for expanding after three seconds on hover. Did you check out the test file I attached? 

Thanks,

San

[acmey...@gmail.com]

Your file isn't opening correctly for me. Are you hosting it somewhere with the creative content? If not then I won't be able to just open the HTML, I'd need a zip with all the assets/files.

[San Khong]

Please open my file in Google Web Designer and look at the Events panel. What you are missing is to use the mouseover event with the target banner page.

Thanks,

[acmey...@gmail.com]

Okay, I got your file working. My project works the same right now, but what I really want is for the expanded page to only open if the user keeps their mouse hovering on the banner for 3 seconds.

Hovering over it for any less than 3 seconds shouldn't expand the banner.

[San Khong]

That's exactly what your code does. And I tested my file in Chrome (local browser preview and DoubleClick studio) and it only expands after 3 seconds of hovering on the banner. Do you see something differently?

[acmey...@gmail.com]

What's happening for me (in both your and my files) is that as soon as the user hovers over the banner at all (even if it's for less than a second) a timer starts that lasts 3 seconds, then the banner opens.

So it's not requiring that the user keeps their mouse over the banner for the full 3 seconds before opening, it's just delaying the open for the 3 seconds.

[San Khong]

Ah, I see what you're trying to achieve now. Let me think about it and get back to you.

San

[San Khong]

I found the easy solution.

Add a variable to your setTimeOut function such as 

myVar = setTimeout(nextPage, 3000);

Then use clearTimeout(myVar); on the mouseout event.

Attached is the file.