Jump to content
Search Community

Minimalistic banner builder that supports different ad platforms and GSAP

LipstickVoid 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

I'm new to banner development and I'm pretty much on my own. Living and learning... I've built quite a lot of DCMs without any issues. My DCM template is pretty solid already but this template I created doesn't work well with other formats and ad platforms. I ran into a lot of issues while doing DCRM and sizmek ads. 

 

I've tried BannerTime and I liked it for the most part like being able to choose which platform specific template to use and all but it's using smart objects and stuff which the dumb me doesn't really see the point of using all that while every KB counts. I also noticed that it served the ad right in the middle of the page horizontally and vertically. I also do not see the point of that. Aren't ads supposed to be at the top left corner by default? But I digress. I'm scared if I changed something, it would break something else.

 

I plan to create my own builder in the future once I gain more understanding on the requirements of each ad platform. For now I just want a very minimal builder that can create boilerplates for different ad platforms with gsap so that I don't run into any more issues. That's it. Please help if you know any. Thank you. 

 

Oh and does anyone run into issues by using outdated templates? I don't know why ad platforms do not make it easy to get the latest stable templates. So, it would be great if it's a builder that is being updated quite regularly.

  • Like 1
Link to comment
Share on other sites

Hey! Welcome to the glamorous world of banner dev! 

 

Re. Bannertime, I love it. It removes the issue of preloading/polite loading, and the various clickTag implementations from the equation, and lets you focus on animation. The presentation of the banner centered in the browser is just so it looks nice when being reviewed by clients or art directors; this has nothing to do with how it will look when it's iframed in its placement on a publisher's website. Bannertime's smartObjects are great too, in that they have some built-in functionality, like centering either horizontally, vertically or both; a toggle for setting retina quality, using svgs or embedded bitmaps, etc. Tons of convenience built right in.

 

Oh - if you ever build ads with Bannertime for one format (eg. DCM) and need to change them later, you can just generate a BT ad for the new format, and copy/paste the contents of banner.loader.js into the existing version, and you're done.

 

It would be nice if ad platforms provided up to date templates, but I find that I mostly like using my own, or, especially since the new version came out, Bannertime. 

  • Like 2
Link to comment
Share on other sites

Hey! Welcome to the glamorous world of banner dev! 

 

Re. Bannertime, I love it. It removes the issue of preloading/polite loading, and the various clickTag implementations from the equation, and lets you focus on animation. The presentation of the banner centered in the browser is just so it looks nice when being reviewed by clients or art directors; this has nothing to do with how it will look when it's iframed in its placement on a publisher's website. Bannertime's smartObjects are great too, in that they have some built-in functionality, like centering either horizontally, vertically or both; a toggle for setting retina quality, using svgs or embedded bitmaps, etc. Tons of convenience built right in.

 

Oh - if you ever build ads with Bannertime for one format (eg. DCM) and need to change them later, you can just generate a BT ad for the new format, and copy/paste the contents of banner.loader.js into the existing version, and you're done.

 

It would be nice if ad platforms provided up to date templates, but I find that I mostly like using my own, or, especially since the new version came out, Bannertime. 

 

Thanks for the reply.

 

It's a wonderful world indeed! Doing banners is quite fun.

 

The issue on my part is I don't get to "find out" how the banner is uploaded and how it's being served as it's handled by another team. They also don't seem to know how the banners should be developed as they specialize in testing them and serving them. All they can do is give you these default templates which aren't always that helpful. There were times I followed the templates down to every detail but they still caused problems. I don't know if this happens to other developers who have done banners or when they started doing banners. I'm unsure about what needs to be done so that the ads are served correctly. This is why I'm scared to tweak with the templates because when something isn't working, I am responsible for it. Now that you've explained such as why being in the middle doesn't affect how the banner is served makes sense to me now but I need someone or some source to answer these questions for me. As I've said I'm all alone in this. I'm still thinking banners in a web development way. Now I feel more confident in using bannertime. 

 

I managed to craft a sizmek template of my own and I'm understanding them a bit better.  I will look into Bannertime more in the future especially smart objects. 

  • Like 2
Link to comment
Share on other sites

  • 3 weeks later...

@LipstickVoid Apologies, our documentation at the moment is very poor, but we're working on it!

 

The reasoning for SmartObjects was to create a way to write out DOM elements and CSS styling really quickly, as you can just sit in the banner.animations.js file to create the entire thing without having to swap between files constantly.

It also helps in maintaining really clean code as we can clearly see what elements we're creating and not leaving unused element tags in the HTML. (I know for sure I'm guilty of that)

 

Regarding having the ad in the centre of the page, we just found it much easier to work on a banner when it's right in front of us, and we didn't have to strain to look in the top corner of the screen. When it's uploaded to any particular platform, the iFrame it is bound in will force it to be in the correct location.

 

 

 

 

Link to comment
Share on other sites

If you haven't already, feel free to check out our gsap banner ad builder. We currently support exporting for AdWords, DoubleClick and Atlas Solutions and we're working on Sizmek support which will hopefully be out soon. Try it at https://tweenui.com/animator and let me know what you think. Also, just ping me if you want a professional account for testing things out.

 

Link to comment
Share on other sites

  • 1 month later...

@joe_midi I'm currently experimenting with BannerTime. Please help with these two Qs

 

Is there any option available in BannerTime to use a slider so that you can pause and skip to the exact time? I was using jquery slider before and stripped them out when exporting the zipped files. For preview stage client loved that they were able to pause when they wanted to and pinpoint exact timeframes to make modifications. It's very helpful. I can add this in myself but this leads to another q....

 

If this was something I was to add in myself, is there anyway that I could make my own templates inside BannerTime so next time I generate a new banner with bannertime, my custom add ons are already there?

 

Thanks!

Link to comment
Share on other sites

@LipstickVoid Yes, current animation scrubber is not ideal. But it pauses on double click and there is a box with exact time as far as I remember.

 

I had an idea to create most complete and awesome scrubber and integrate it with Bannertime. So feel free to share your ideas and suggestions. Maybe that will motivate me to focus on it more :) 

 

As for templates you could fork generator-bannertime on GitHub and make your customizations. Here is the path where templates are located: generator-bannertime/generators/app/templates/src/300x250/

Link to comment
Share on other sites

11 hours ago, Gedas said:

@LipstickVoid Yes, current animation scrubber is not ideal. But it pauses on double click and there is a box with exact time as far as I remember.

 

I had an idea to create most complete and awesome scrubber and integrate it with Bannertime. So feel free to share your ideas and suggestions. Maybe that will motivate me to focus on it more :) 

 

As for templates you could fork generator-bannertime on GitHub and make your customizations. Here is the path where templates are located: generator-bannertime/generators/app/templates/src/300x250/

 

Thanks! I need to play around more with the scrubber to see what can be improved.

Link to comment
Share on other sites

  • 1 month later...

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...