Jump to content
Search Community

Banner dimensions vs. child element dimensions

Scott test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

So I've just wrapped up development of my first banner, and I'm now working with a vendor that is trying to upload it to DCM. Unfortunately, they're saying they can't use the banner because the reported dimensions are 394x255 instead of 300x250.

 

Setup:

I have an image within the banner that's sized 394x255, but this image, along with all of the other elements of the banner are wrapped in a div that's sized 300x250 with overflow:hidden. So from my understanding, the size of the child elements should not be considered because they are clipped by the parent elements bounds. I've also used inspector and see that the top most element is sized 300x250.

 

Does this mean HTML5 banners cannot contain images that exceed their dimensions, even when wrapped in a properly sized div with overflow:hidden? Or am I doing something wrong?

 

Thanks in advance for any pointers, this community has been a huge help. :)

Link to comment
Share on other sites

I've served ads that dimensions' extend beyond the overflow through DCM that were accepted and ran without incident. Often times I have elements outside the parent div that I then tween into the parent div.  I have not tried trimming an image in that method however. I crop my background images to the size, but I could see if you were tweening the bg image outside the visible div area where you would use this technique.

 

It seems to me you should be able to serve this ad. 

Link to comment
Share on other sites

Thanks for the feedback. Yes, you're right, I have a large image of a face that I'm panning across slowly. In order to achieve the effect, the image must be larger than the dimensions of the banner, I don't see how this animation would be possible otherwise.

 

Unfortunately, the vendor doesn't seem very motivated to troubleshoot. Their answer is "I cannot upload the creative into a DCM placement because of the size."

Link to comment
Share on other sites

I have served many a banner with a background way larger than the parent div. Like, twice the size.

 

The problem with yours might be on the file setup. Have you got the meta tag with the correct ad dimensions, for example?

Thanks, that's reassuring to know. Yes, I've used the following meta tag:

<meta name="ad.size" content="width=300,height=250">
Link to comment
Share on other sites

I feel your pain. Just recently I had an issue myself where the project manager wouldn't do much to help me troubleshoot. She would send me the specs over and over again, ask me to refer to them and review the code because they were unable to upload. The only feedback was a screenshot cropped all the way down to the warning window saying the ad could not be uploaded because it was missing the <meta> tag with the ad size.

 

Believe me I reviewed the code several times and that one tag was definitely in.

 

They wouldn't give me access to the account to troubleshoot so, I created myself one in AdWords, tried to upload, saw a completely different error, fixed it and that was the end of the struggle.

 

In the end the cause was because inside the svgs I was using there were <style> definitions and for some reason, that is not allowed.

 

Might be worth you trying to have an account yourself for troubleshooting.

  • Like 1
Link to comment
Share on other sites

That's exactly what I'm doing now, Dipscom. I went through the steps of signing up for DoubleClick for Publishers (DFP), which first requires you to sign up for AdSense, and once I got through all of that I came to realize that DFP doesn't support HTML5 banners that consist of multiple files. Apparently I need DCM for that... doh! So now I'm waiting on a response to my request for access to DCM.

 

If for some reason I can't get access to DCM, my last resort will be following this guys direction and hosting the banner on a CDN, which I point DFP to, and then provide the DFP URL to the vendor. Sounds like a headache when dealing with tens of banners.

 

I really wish there was some sort of HTML5 banner validator to simplify this whole process. Something like this tool for flash banners.

Link to comment
Share on other sites

I really wish there was some sort of HTML5 banner validator to simplify this whole process. Something like this tool for flash banners.

 

 

Good point, at the moment there is none, especially since all platform providers are vying for everyone to use their specs, but if you bug DoubleClick enough, they might provide you with one!

 

All it really needs is the validation section of DCM, and from the looks of it all their different platforms are using (or soon to be using) the same backbone technology.

 

 

With regards to the meta tag, I've just seen a document from Atlas (which I believe is now owned by Facebook?) uses the ad.size meta tag. Might be a best-practice to use it everywhere and get all platforms onboard. 

<meta name="ad.size" content="width=300,height=250">

But strangely they don't use the clickTag variable, but use a handlebars macro instead:

<a href=”{{PUB_CLICKTHROUGH}}“ target=”_blank”></a>
Link to comment
Share on other sites

  • 1 month later...

Hi fernadofas,

 

I am successfully using Edge to create banners for DCM. If your ad is Rich Media (DCRM) I also have the syntax for that.

 

Your 0% opacity button must be the top layer, unlike Flash.

 

This is the syntax for your click event.

 

window.open(clickTag, "_blank");

 

Uncheck use Adobe CDN for js file

 

In your published HTML doc, paste this in the head outside of your Edge runtime code.

 

<script type="text/javascript">
var clickTag = "https://www.google.com";
</script>

 

Zip your publsihed files and provide a backup JPG, GIF or PNG as a separate file.

 

Let me know if you have other questions.

Link to comment
Share on other sites

Hi sommambist,

 

Thank for your reply.

 

I working on banners for Atlas ( a Facebook company ) and they use this link to go through '<a href="{{PUB_CLICKTHROUGH}}" target="_blank"></a>.

The syntax for the click event is great, thanks.

 

I'm not sure where to place the link. Shall it be in the "div" after publish or somewhere else?

 

Thank you.

Link to comment
Share on other sites

{{PUB_CLICKTHROUGH}}"  is what is called a macro in AdOps speak.

 

So I belive this might be how to code that as a clicktag var

 

<script type="text/javascript">

var clickTag = "{{PUB_CLICKTHROUGH}}";
</script>

 

Doubleclick's macro is  

%%CLICK_URL_ESC%%

 

I would put <script type="text/javascript">

var clickTag = "{{PUB_CLICKTHROUGH}}";
</script> right after<!--Adobe Edge Runtime End--> but before </head>
 
The cool thing about how doubleclick is using Google.com as a placeholder for the URL that Adops will implement in DCM, is your banner will actually click through so you can QA them.
  • Like 1
Link to comment
Share on other sites

Hi somnambist,

 

That's great and I will try it tonight.

The only thing that I'm worried is that is not Doubleclick is for Atlas and they have the following rules https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xfp1/t39.2365-6/11057048_1417448581899526_184672838_n.pdf

 

They quite odd in this terms.

 

Thanks you very much so far for your replies.

Link to comment
Share on other sites

That's exactly what I'm doing now, Dipscom. I went through the steps of signing up for DoubleClick for Publishers (DFP), which first requires you to sign up for AdSense, and once I got through all of that I came to realize that DFP doesn't support HTML5 banners that consist of multiple files. Apparently I need DCM for that... doh! So now I'm waiting on a response to my request for access to DCM.

 

If for some reason I can't get access to DCM, my last resort will be following this guys direction and hosting the banner on a CDN, which I point DFP to, and then provide the DFP URL to the vendor. Sounds like a headache when dealing with tens of banners.

 

I really wish there was some sort of HTML5 banner validator to simplify this whole process. Something like this tool for flash banners.

Hey - just letting you guys know, I was at a meeting at DoubleClick this past Friday, and they are acutely aware of the need for a validation tool. In fact, their engineers are working on one, and they've said it was tentatively on their roadmap for Q1 2016. Fingers crossed.

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...