Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Scott

Banner dimensions vs. child element dimensions

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 post
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 post
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?

  • Like 1
Link to post
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 post
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 post
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 post
Share on other sites

Isn't <meta name="ad.size" content="width=300,height=250"> just for AdWords?

 

And because I honestly don't know, how does AdWords differ from GDN, and plain display banners?

Link to post
Share on other sites

I have no idea, somnamblst, I never know which is which - Other than the help guides for AdWords is on blue background and the ones for DCM on green.

 

How many ad platforms Google owns is beyond me.

  • Like 1
Link to post
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 post
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 post
Share on other sites

Hi joe_midi,

 

I'm having trouble to implement {{PUB_CLICKTHROUGH}} with adobe edge and my client is not happy at all.

 

Is there for any chance a way to do it with Adobe Edge to make it work?

 

I've tried many different codes and nothing worked at all.

Link to post
Share on other sites

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 post
Share on other sites

Scott I think the issue with DFP is they expect a tag. Which is  what DCM outputs. I have hhad DFP reject a tag that had images hosted on a domain tthat was not an approved domain (third party vendors), and mmy imagges were hosted on the DFP clients domain name server!

Link to post
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 post
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 post
Share on other sites

If this is true, you can''t use Edge published files for Atlas. 

 

   Zip files cannot include sub-folders.

  • Like 1
Link to post
Share on other sites

Hi guys,

 

Attached the banner and the codes implemented.

 

I would like to know if you can have a look and let me know if it's ok please.

 

 

Kind regards,

 

fernandofas

english160x600.zip

Link to post
Share on other sites

Looks good to me. Clicks through to page not found because the macro is not a URL

 

In Edge 2015 you can choose to publish to root. I decided to not go that route because the versioning I do in a single folder would have been a mess.

Link to post
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 post
Share on other sites

Hi everyone,

 

You guys saved my life.

 

I managed to make the {{PUB_CLICKTHROUGH}} to work with Adobe Edge inserting the following script after the Edge run time:

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

 

 

Thank you all

  • Like 1
Link to post
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.

×