Make whole area of a banner clickable

Hey guys!

I’m just starting with Hype 4 and am trying (for the first time) to export my banners as HTML5 for Google AdWords. I would like the whole are of my banner to be clickable (not only a button) – is this possible? And if so, how can I achieve this? I can’t seem to find a good way to do it.

Right now, I’ve added a pointer action "Go to URL… " to my background (that fills the whole banner area) and selected “Ignore all pointer events” for all the layers above it. This seems to work but I’m getting a warning, that this method will not work in IE 9 and 10, as these browsers don’t support setting pointer-events to none.

I guess I don’t need to be as concerned about IE 9/10, these versions are quite old, but the method itself does not seem to be very elegant – and I’m afraid there might be some further issues with it. Is there a better way of making the whole area of a banner clickable that I can’t see?

Also, just to double-check, will this pointer action trigger on mobile devices (it’s named On Mouse Click), or do I need to set up a different event for mobiles?

Thanks in advance and hope you all will have great day!

(☞゚ヮ゚)☞

It depends. If I’m feeling lazy, and it’s a button, meh… using Hype’s “Go To URL” is fine.

But in your case, I might edit the “innerHTML” to manually place a background image and then wrap that with a hyperlink. Something like this…

<a href="https://photics.com">
    <img src="${resourcesFolderName}/banner.png" alt="Banner Image">
</a>

In parenthesis, you should see “Tap”. But, since this is an ad campaign, you’ll likely want to test your ad on mobile devices.

Screen Shot 2020-05-25 at 12.13.01 PM

Ehhh… I don’t like using it. Avoiding it if possible is best, but sometimes it’s unavoidable. I don’t think it’s gonna get worse, not in the short-term anyway. Because old browsers like IE 10 and lower are dropping off, theoretically, it should get better. Heh, but this is the Internet and all sorts of problems suddenly appear.

Using Go to URL with a Rectangle above all other elements is extremely common.

This layer can be locked so it doesn’t interfere with editing.

Some ad systems let you define clickTags which they will use to provide the ad exit; for some of these we provide Export Scripts where this can be added in the Document Inspector. But if you’re not using one then just an invisible Rectangle is a good way to go!

Thank you both so much for replying! I did manage make the banner clickable and it’s not yelling any errors at me anymore – IE 9 and 10 users will be happy, I think :tada: :grin:

@Photics Hmm … I’m trying to make it work with inserting the HTML code but closest I got to something that’s working is a situation, where I have an animated banner and next to it a clickable static background image. My guess is that I need to edit the javascript code that was generated along with the html, not the html itself. I’ll poke around some more … I’m not much of a coder, I know basic HTML and then I’m done. Time to learn more I guess.

I love this!!

===

@jonathan the rectangle seems to work great! As for the Export Scripts – I’m using the AdWords script which packages the whole banner nicely (yaay!) but I can’t seem to find a way to add a link through the Document Inspector other than from ACTIONS => Pointer. Am I missing anything?

1 Like

Not for AdWords - I think the rectangle is the way to go. The DoubleClick ones have exit functionality.