Jump to content

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

GSAP Polite Load banner

Recommended Posts

i know there is a thread about polite loading into doubleclick and their enabler. how do a do a generic polite load using gsap for 3rd party banner vendors?

  • Like 1
Link to comment
Share on other sites

let me rephrase my question. how can i do a gsap polite load NOT FOR DOUBLECLICK? These are doubleclick templates that use the enabler and are for rich media banners. is it possible to polite load a standard banner to a 3rd party vendor using gsap?

Link to comment
Share on other sites

Polite loading is nothing other than waiting the page to completely load before loading the ad itself and as such, GSAP does not really have anything to do with it.


You can achieve a generic polite load by simply having your code run inside a window.onload() call, then load other scripts and images.


For example:

window.onload = function() {
 var imageLoader = new ImageLoader();
 var scriptLoader = new ScriptLoader();
imageLoader.loadImage("idName", imageArray, ".imageExtension");


The ImageLoader and ScriptLoader are two little classes I wrote and use frequently. I have them stored in CodePen

See the Pen bdyEZY by dipscom (@dipscom) on CodePen


See the Pen EjzPJB by dipscom (@dipscom) on CodePen

. Feel free to use/fork them.

  • Like 2
Link to comment
Share on other sites

thank you Dipscom and cellli. we've been using edge animate and google web developer, both of which have polite load built into their publish settings, but would rather use gsap for better compatibility and control. 


just to be sure (sorry if i'm annoying), some typical banner specs might be "initial polite load: 64kb. total load: 2Mb." so if I understand Dipscom's javascript, the page will only load my initial html containing that window.onload()  and everything else (images, gsap/jquery, etc.) will load subsequently, thus satisfying those initial load requirements?

Link to comment
Share on other sites

also, is there any way to QA/check this before sending out?

Link to comment
Share on other sites

Yes, whatever you line up to be loaded via the scripts contained inside the window.onload will count as being polite loaded.


Be aware that any images that you place directly into the HTML will count towards the initial load. So will any of the scripts you place directly into the HEADER tag.


As to QA/Check, not sure what you mean by that. You could place some console.log() calls in diferrent places if you would like to check the order of things or you any of the browser's dev tools of you choice.

  • Like 1
Link to comment
Share on other sites

so then I should just load all the banner assets, images, etc. inside that window.onLoad, right?


what i meant by QA/check is that our QA department currently has no idea how to QA an html banner. they are used to loading a swf into a validator site and noting the output. i know doubleclick is currently building one, but are possibly several months from release.


I really appreciate your patience with my newbie questions. I was a flash developer for 20 years, so this transition has been quick and dirty ;)

Link to comment
Share on other sites

Well you best way to QA the HTML banner would be to:

1. Test the banner specs (timing, loops, file sizes, etc)

2. Cross-browser check (older browsers has limited support for HTML 5. These browsers should pull the backup gif.

3. We were getting the polite loading info from DoubleClick. Now, however since all HTML5 creatives will contain the container HTML5 file, and that HTML File is always going to be the initial load file, I am able to tell what the initial load size is by counting that index file and whatever scripts or images it loads in with it or is a part of that initial HTML file. For example, if these is a slide that will be part of the polite load. etc.

4. Test the backup image by loading banner in a non HTML supported browser. This does not count for file size however, but is picked up by the user agent switcher.


So this is our current test for HTML5 banners. I am hoping your QA Department will read this post.

  • Like 2
Link to comment
Share on other sites

Hi guys!


Sorry, mad few days, not much time to be around.


So, QA. Well, as some have been saying, it is the Wild West at the moment. It's every man/woman/parrot for himself.


That holds true to QA as well. Each ad serving platform will have their own QA process and they will let you know what that is. But the majority of stuff is the same as it was in flash.


I am not aware of any automated tool to check QA/Clicktags. To be honest, I simply make too many of those that I end up knowing the stuff by heart. Mostly is just common sense and "don't be annoying" stuff.


Other than that, I don't have much to add from what earlqa has said.

Link to comment
Share on other sites

If your banners do not need rich media AdOps can simply upload your zipped assets to DCM, and you can skip using DCRM.


In DCM a polite load is simply a JPG image placeholder.


In DCRM polite load is specific to DCRM's enabler.js


Unless you are doing expandables or video, you can simply create banners for DCM, DCRM has impression based fees, and requires QA and Trafficking. DCM, all you do is zip, and include your backup images outside your zip, as AdOps will be required to manually upload that backup image. You will need a zip for every banner though and AdOps may complain that HTML5 takes more work on their part.


As far as I know everyone with a DCM account was auto upgraded to Enhanced banners at no extra charge. The old k weight limits went out the window. In addition enhanced banners have no maximum files, so I can swap logos, publish, repeat 11 times, and my images folder can contain the 10 logos my current creative is not using.


My cheat sheet specific to Edge.


DCM clickTag btn syntax
window.open(clickTag, "_blank");
Published HTML file add right before </head>
<script type="text/javascript">
var clickTag = "https://www.google.com";
DCRM Studio exit syntax in Edge on button
Studio enabler.js (goes after <head> )
<!-- The DoubleClick Studio Enabler must be included before the edge runtime. -->
<script type="text/javascript" charset="utf-8" src="http://s0qa.2mdn.net/ads/studio/Enabler.js"></script>
<!--Adobe Edge Runtime-->
DCRM exit btn syntax in Edge animate
Enabler.exit('Clicked on banner ad');
Because Studio is Rich Media you can have multiple exit buttons that Studio will detect, so a second one might say
Enabler.exit('Clicked on Facebook icon');
DC for the most part has awesome documentation, just super confusing because you need to know, DCM or DCRM.
DCRM polite load
Link to comment
Share on other sites

also, is there any way to QA/check this before sending out?


You might find this upcoming hangout helpful for some of your questions: https://support.google.com/richmedia/answer/1343040#hangout


How to QA HTML5 ads – 9/17/15 (3pm - 4pm ET)

It's important to have a robust testing process for QAing your HTML5 ads. Dive into the details in this session, where you'll learn about Custom Lightbox QA scripting, HTML5 Banners, running through the Chrome "Inspect Element" environment, and more.

  • Like 1
Link to comment
Share on other sites

  • 9 months later...

Nice loaders by Jack.


This might be a dumb question but what about a generic html5 banner containing video. I assume theres no point in trying to polite load the video as well? 


In other words: after loading images and scripts banner is ready to go and that is when we start the video.



Thanks in advance

Link to comment
Share on other sites

Well, it depends really. What is the purpose of the video? How long is the video?


Scenario 1:

1-3 seconds explosion that reveals content. - Yeah, preload the whole video as you preload the rest of the assets.


Scenario 2:

15 seconds intro video that transitions to an endcard. Start loading the video as you are loading the content. Once content is loaded, ready to go and you have enough of the video buffered, pay it.


Scenario 3:

Animation that leads into an endcard that contains a 15 seconds (or longer) video. No need to preload anything, wait until the animation hits the endframe, then make the call for the video. Let the video API handle the loading, buffering, playing of it. That way you get to the "juicy" video without having to wait more than necessary.


It's never dumb to ask question. It's dumb not to ask them.

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